feat: display spectrum label in stack mode

Author: hamed-musallam

src/component/1d/LinesSeries.tsx

@@ -10,6 +10,7 @@ import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
 import { useVisibleSpectra1D } from '../hooks/use_visible_spectra_1d.ts';
 
 import Line from './Line.js';
+import { SpectrumLabel } from './SpectrumLabel.tsx';
 import { useInsetOptions } from './inset/InsetProvider.js';
 
 const BOX_SIZE = 10;
@@ -31,6 +32,7 @@ function LinesSeries() {
     <g className="spectra">
       {spectra.map((d, i) => (
         <g key={d.id}>
+          <SpectrumLabel index={i} spectrum={d} />
           <Line display={d.display} id={d.id} data={get1DDataXY(d)} index={i} />
           <HeadlightRectStackMode spectrumID={d.id} index={i} />
         </g>

src/component/1d/SpectrumLabel.tsx

@@ -0,0 +1,63 @@
+import type { SpectraTableColumn, Spectrum } from '@zakodium/nmrium-core';
+import dlv from 'dlv';
+
+import { useChartData } from '../context/ChartContext.tsx';
+import { useScaleChecked } from '../context/ScaleContext.tsx';
+import { usePanelPreferences } from '../hooks/usePanelPreferences.ts';
+import { useVerticalAlign } from '../hooks/useVerticalAlign.ts';
+
+export function SpectrumLabel({
+  index,
+  spectrum,
+}: {
+  index: number;
+  spectrum: Spectrum;
+}) {
+  const { spectraBottomMargin, shiftY } = useScaleChecked();
+  const {
+    height,
+    margin,
+    toolOptions: { selectedTool },
+    view: {
+      spectra: { activeTab },
+    },
+  } = useChartData();
+  const { columns, enableSpectraLabel } = usePanelPreferences(
+    'spectra',
+    activeTab,
+  );
+  const verticalAlign = useVerticalAlign();
+
+  if (
+    verticalAlign !== 'stack' ||
+    selectedTool !== 'zoom' ||
+    !Array.isArray(columns) ||
+    columns.length === 0 ||
+    !enableSpectraLabel
+  ) {
+    return null;
+  }
+
+  const innerHeight = height - margin.bottom - spectraBottomMargin;
+  const label = getSpectrumLabel(columns, spectrum);
+
+  return (
+    <text
+      dy={-5}
+      fontSize={12}
+      transform={`translate(${margin.left},${innerHeight - shiftY * index})`}
+    >
+      {label}
+    </text>
+  );
+}
+
+function getSpectrumLabel(
+  columns: SpectraTableColumn[],
+  spectrum: Spectrum,
+): string {
+  return columns
+    .filter((column) => column.isSpectrumLabel)
+    .map((column) => (column.jpath ? dlv(spectrum, column.jpath, '') : ''))
+    .join(', ');
+}

src/component/panels/SpectraPanel/SpectraPanelHeader.tsx

@@ -7,17 +7,19 @@ import { SvgNmrResetScale, SvgNmrSameTop } from 'cheminfo-font';
 import { memo, useCallback } from 'react';
 import { FaCreativeCommonsSamplingPlus } from 'react-icons/fa';
 import { IoColorPaletteOutline } from 'react-icons/io5';
-import { MdFormatColorFill } from 'react-icons/md';
+import { MdFormatColorFill, MdOutlineFormatColorText } from 'react-icons/md';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { usePreferences } from '../../context/PreferencesContext.js';
 import { useToaster } from '../../context/ToasterContext.js';
 import { useAlert } from '../../elements/Alert.js';
 import { useActiveSpectra } from '../../hooks/useActiveSpectra.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.ts';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { useToggleSpectraVisibility } from '../../hooks/useToggleSpectraVisibility.js';
 import type { DisplayerMode } from '../../reducer/Reducer.js';
+import { booleanToString } from '../../utility/booleanToString.ts';
 import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
 import type { ToolbarItemProps } from '../header/DefaultPanelHeader.js';
 import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
@@ -60,7 +62,9 @@ function SpectraPanelHeaderInner({
   const dispatch = useDispatch();
   const {
     current: { spectraColors },
+    dispatch: dispatchPreferences,
   } = usePreferences();
+  const { enableSpectraLabel } = usePanelPreferences('spectra', activeTab);
 
   const handleDelete = useCallback(() => {
     alert.showAlert({
@@ -116,6 +120,14 @@ function SpectraPanelHeaderInner({
       payload: {},
     });
   }
+
+  function toggleSpectraLabelHandler() {
+    dispatchPreferences({
+      type: 'TOGGLE_SPECTRA_LABEL',
+      payload: { nucleus: activeTab },
+    });
+  }
+
   const hasActiveSpectra = activeSpectra && activeSpectra?.length > 0;
   const spectraLengthPerTab = getSpectraByNucleus(activeTab, data)?.length;
   const { getToggleVisibilityButtons } = useToggleSpectraVisibility(
@@ -168,6 +180,12 @@ function SpectraPanelHeaderInner({
       tooltip: 'Distinct spectra recoloring',
       onClick: distinctReColorSpectraHandler,
     },
+    {
+      icon: <MdOutlineFormatColorText />,
+      tooltip: `${booleanToString(!enableSpectraLabel)} spectra label`,
+      active: enableSpectraLabel,
+      onClick: toggleSpectraLabelHandler,
+    },
   ]);
 
   return (

src/component/panels/SpectraPanel/SpectraPreferences.tsx

@@ -129,6 +129,7 @@ function SpectraPreferences(props: object, ref: Ref<any>) {
           jpath: [],
           label: '',
           visible: true,
+          isSpectrumLabel: false,
         },
         ...columns.slice(index),
       ];

src/component/panels/SpectraPanel/base/SpectraColumnsManager.tsx

@@ -115,6 +115,16 @@ export function SpectraColumnsManager({
           />
         ),
       },
+      {
+        Header: 'spectrum label',
+        style: { width: '30px', textAlign: 'center' },
+        Cell: ({ row }: CellProps<SpectraTableColumn>) => (
+          <Checkbox
+            style={{ margin: 0 }}
+            {...register(getObjectKey(nucleus, row.index, 'isSpectrumLabel'))}
+          />
+        ),
+      },
       {
         Header: '',
         style: { width: '65px' },

src/component/reducer/preferences/actions/toggleSpectraLabel.ts

@@ -0,0 +1,27 @@
+import type { Draft } from 'immer';
+
+import type {
+  PreferencesState,
+  ToggleSpectraLabelAction,
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
+
+export function toggleSpectraLabel(
+  draft: Draft<PreferencesState>,
+  action: ToggleSpectraLabelAction,
+) {
+  if (action.payload) {
+    const currentWorkspacePreferences = getActiveWorkspace(draft);
+
+    const { nucleus } = action.payload;
+    const nucleusPreferences =
+      currentWorkspacePreferences.panels.spectra?.nuclei[nucleus];
+
+    if (!nucleusPreferences) {
+      return;
+    }
+
+    nucleusPreferences.enableSpectraLabel =
+      !nucleusPreferences.enableSpectraLabel;
+  }
+}

src/component/reducer/preferences/panelsPreferencesDefaultValues.ts

@@ -33,21 +33,25 @@ const getSpectraDefaultValues = (
         label: 'Spectrum Name',
         jpath: ['info', 'name'],
         visible: true,
+        isSpectrumLabel: true,
       },
       {
         label: 'Solvent',
         jpath: ['info', 'solvent'],
         visible: true,
+        isSpectrumLabel: false,
       },
       {
         jpath: ['info', 'pulseSequence'],
         label: 'Pulse',
         visible: true,
+        isSpectrumLabel: false,
       },
       {
         jpath: ['info', 'experiment'],
         label: 'Experiment',
         visible: true,
+        isSpectrumLabel: false,
       },
       {
         name: 'color',
@@ -56,6 +60,7 @@ const getSpectraDefaultValues = (
         visible: true,
       },
     ],
+    enableSpectraLabel: true,
   };
 
   return getPreferences(preferences, nucleus);

src/component/reducer/preferences/preferencesReducer.ts

@@ -57,6 +57,7 @@ import { setWorkspace } from './actions/setWorkspace.js';
 import { toggleInformationBlock } from './actions/toggleInformationBlock.js';
 import { toggleOpenSplitPanel } from './actions/toggleOpenSplitPanel.js';
 import { togglePanel } from './actions/togglePanel.js';
+import { toggleSpectraLabel } from './actions/toggleSpectraLabel.ts';
 import { mapWorkspaces } from './utilities/mapWorkspaces.js';
 
 const LOCAL_STORAGE_SETTINGS_KEY = 'nmr-general-settings';
@@ -91,6 +92,10 @@ export type SetPanelsPreferencesAction = ActionType<
   'SET_PANELS_PREFERENCES',
   { key: keyof PanelsPreferences; value: any }
 >;
+export type ToggleSpectraLabelAction = ActionType<
+  'TOGGLE_SPECTRA_LABEL',
+  { nucleus: string }
+>;
 
 export type SetWorkspaceAction = ActionType<
   'SET_WORKSPACE',
@@ -196,6 +201,7 @@ export type PreferencesActions =
   | InitPreferencesAction
   | SetPreferencesAction
   | SetPanelsPreferencesAction
+  | ToggleSpectraLabelAction
   | SetWorkspaceAction
   | WorkspaceAction
   | AddWorkspaceAction
@@ -345,7 +351,8 @@ function innerPreferencesReducer(
       return changeDefaultMoleculeSettings(draft, action);
     case 'TOGGLE_SPLIT_PANEL':
       return toggleOpenSplitPanel(draft, action);
-
+    case 'TOGGLE_SPECTRA_LABEL':
+      return toggleSpectraLabel(draft, action);
     default:
       return draft;
   }