feat: improve signal kinds for ranges and integrals

src/component/hooks/useSignalKinds.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { SIGNAL_KINDS } from '../../data/constants/SignalsKinds';
+import { SignalKind } from '../../data/types/common/SignalKind';
+import { useChartData } from '../context/ChartContext';
+import { stringCapitalize } from '../utility/stringCapitalize';
+
+export interface SignalKindItem {
+  value: SignalKind;
+  label: string;
+}
+
+const SignalKinds: SignalKindItem[] = SIGNAL_KINDS.map((key) => ({
+  value: key,
+  label: stringCapitalize(key),
+}));
+
+export function useSignalKinds() {
+  const { molecules } = useChartData();
+  return useMemo(() => {
+    const moleculesLabelsList = molecules.map(({ id, label }) => ({
+      value: id,
+      label,
+    }));
+    const kinds = SignalKinds.concat(moleculesLabelsList);
+    return kinds;
+  }, [molecules]);
+}

src/component/panels/IntegralsPanel/IntegralTable.tsx

@@ -3,7 +3,6 @@ import { Info1D, Integral } from 'nmr-processing';
 import { useCallback, useMemo, memo } from 'react';
 import { FaRegTrashAlt } from 'react-icons/fa';
 
-import { SignalKinds } from '../../../data/constants/SignalsKinds';
 import { checkIntegralKind } from '../../../data/data1d/Spectrum1D';
 import { useDispatch } from '../../context/DispatchContext';
 import EditableColumn from '../../elements/EditableColumn';
@@ -18,6 +17,7 @@ import NoTableData from '../extra/placeholder/NoTableData';
 
 import { IntegralPanelInnerProps } from './IntegralPanel';
 import NoDataForFid from '../extra/placeholder/NoDataForFid';
+import { useSignalKinds } from '../../hooks/useSignalKinds';
 
 const selectStyle = { width: '100%', border: 'none' };
 
@@ -29,6 +29,8 @@ interface IntegralTableProps
 
 function IntegralTable({ activeTab, data, info }: IntegralTableProps) {
   const dispatch = useDispatch();
+  const signalKinds = useSignalKinds();
+
   const deleteIntegralHandler = useCallback(
     (e, row) => {
       e.preventDefault();
@@ -157,7 +159,7 @@ function IntegralTable({ activeTab, data, info }: IntegralTableProps) {
         Cell: ({ row }) => (
           <Select
             onChange={(value) => changeIntegralDataHandler(value, row)}
-            items={SignalKinds}
+            items={signalKinds}
             style={selectStyle}
             defaultValue={row.original.kind}
           />
@@ -169,6 +171,7 @@ function IntegralTable({ activeTab, data, info }: IntegralTableProps) {
       changeIntegralDataHandler,
       integralsPreferences,
       saveRelativeHandler,
+      signalKinds,
     ],
   );
 

src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx

@@ -3,14 +3,14 @@ import { css } from '@emotion/react';
 import { Fragment, CSSProperties } from 'react';
 import { FaRegTrashAlt, FaSearchPlus, FaEdit } from 'react-icons/fa';
 
-import { SignalKinds } from '../../../../data/constants/SignalsKinds';
 import Select from '../../../elements/Select';
 import {
   OnHoverEvent,
   BaseRangeColumnProps,
   RowSpanTags,
 } from '../RangesTableRow';
 import useEditRangeModal from '../hooks/useEditRangeModal';
+import { useSignalKinds } from '../../../hooks/useSignalKinds';
 
 const styles = css`
   width: 66px;
@@ -50,14 +50,15 @@ function ActionsColumn({
 }: ActionsColumnProps) {
   const { editRange, deleteRange, changeRangeSignalKind, zoomRange } =
     useEditRangeModal(row);
+  const signalKinds = useSignalKinds();
 
   return (
     <Fragment>
       {showKind && (
         <td {...onHoverSignal}>
           <Select
             onChange={changeRangeSignalKind}
-            items={SignalKinds}
+            items={signalKinds}
             defaultValue={row.tableMetaInfo.signal.kind}
             style={selectBoxStyle}
           />

src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties, Fragment, useCallback } from 'react';
 import { FaEdit, FaRegTrashAlt, FaSearchPlus } from 'react-icons/fa';
 
-import { SignalKinds } from '../../../../data/constants/SignalsKinds';
 import { useAssignmentData } from '../../../assignment/AssignmentsContext';
 import { useDispatch } from '../../../context/DispatchContext';
 import Select from '../../../elements/Select';
@@ -12,6 +11,7 @@ import {
 } from '../../../elements/popup/Modal';
 import EditZoneModal from '../../../modal/editZone/EditZoneModal';
 import { ZoneData } from '../hooks/useMapZones';
+import { useSignalKinds } from '../../../hooks/useSignalKinds';
 
 const selectBoxStyle: CSSProperties = {
   marginLeft: 2,
@@ -28,6 +28,7 @@ interface ActionsColumnProps {
 function ActionsColumn({ rowData, rowSpanTags }: ActionsColumnProps) {
   const dispatch = useDispatch();
   const assignmentData = useAssignmentData();
+  const signalKinds = useSignalKinds();
   const modal = useModal();
 
   const changeSignalKindHandler = useCallback(
@@ -115,7 +116,7 @@ function ActionsColumn({ rowData, rowSpanTags }: ActionsColumnProps) {
           onChange={(value) => {
             changeSignalKindHandler(value);
           }}
-          items={SignalKinds}
+          items={signalKinds}
           defaultValue={rowData.tableMetaInfo.signal.kind}
           style={selectBoxStyle}
         />

src/component/utility/stringCapitalize.ts

@@ -0,0 +1,3 @@
+export function stringCapitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

src/data/constants/SignalsKinds.ts

@@ -1,37 +1,12 @@
-export const SignalKinds: Array<{ label: string; value: string }> = [
-  {
-    label: 'Signal',
-    value: 'signal',
-  },
-  {
-    label: 'Reference',
-    value: 'reference',
-  },
-  {
-    label: 'Solvent',
-    value: 'solvent',
-  },
-  {
-    label: 'Impurity',
-    value: 'impurity',
-  },
-  {
-    label: 'Standard',
-    value: 'standard',
-  },
-  {
-    label: 'P1',
-    value: 'p1',
-  },
-  {
-    label: 'P2',
-    value: 'p2',
-  },
-  {
-    label: 'P3',
-    value: 'p3',
-  },
+import { SignalKind } from '../types/common/SignalKind';
+
+export const SIGNAL_KINDS: SignalKind[] = [
+  'undefined',
+  'signal',
+  'reference',
+  'solvent',
+  'standard',
 ];
 
-export const SignalKindsToInclude = ['signal'];
+export const SignalKindsToInclude: SignalKind[] = ['signal'];
 export const DatumKind = { signal: 'signal', mixed: 'mixed' };

src/data/types/common/SignalKind.ts

@@ -0,0 +1,8 @@
+export type SignalKind =
+  | 'undefined'
+  | 'signal'
+  | 'reference'
+  | 'impurity'
+  | 'standard'
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | (string & {});