feat: add nuclei tab on general settings

src/component/modal/setting/tanstack_general_settings/general_settings_dialog_body.tsx

@@ -6,6 +6,7 @@ import { StyledDialogBody } from '../../../elements/StyledDialogBody.tsx';
 
 import { ExportTab } from './tabs/export_tab.tsx';
 import { GeneralTab } from './tabs/general_tab.tsx';
+import { NucleiTab } from './tabs/nuclei_tab.tsx';
 import { defaultGeneralSettingsFormValues } from './validation.ts';
 
 const Tabs = styled(BPTabs)`
@@ -43,6 +44,8 @@ export const GeneralSettingsDialogBody = withForm({
               panel={<GeneralTab form={form} />}
             />
 
+            <Tab title="Nuclei" id="nuclei" panel={<NucleiTab form={form} />} />
+
             <Tab id="export" title="Export" panel={<ExportTab form={form} />} />
           </Tabs>
         </Div>

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

@@ -0,0 +1,261 @@
+import { Classes, NumericInput } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { useStore } from '@tanstack/react-form';
+import { useCallback, useMemo } from 'react';
+import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
+import { Button, withForm } from 'react-science/ui';
+import type { CellProps } from 'react-table';
+
+import { GroupPane } from '../../../../elements/GroupPane.tsx';
+import { Input2 } from '../../../../elements/Input2.tsx';
+import type { Column } from '../../../../elements/ReactTable/ReactTable.tsx';
+import ReactTable from '../../../../elements/ReactTable/ReactTable.tsx';
+import { Section } from '../../general_settings.tsx';
+import { defaultGeneralSettingsFormValues } from '../validation.ts';
+
+interface NucleiFormElement {
+  nucleus: string;
+  ppmFormat: string;
+  hzFormat: string;
+}
+
+const emptyNucleiFormElement: NucleiFormElement = {
+  nucleus: '',
+  ppmFormat: '0.00',
+  hzFormat: '0.00',
+};
+
+export const NucleiTab = withForm({
+  defaultValues: defaultGeneralSettingsFormValues,
+  render: function Render({ form }) {
+    const fields = useStore(form.store, (state) => state.values.nuclei);
+
+    const handleAdd = useCallback(
+      (data: readonly NucleiFormElement[], index: number) => {
+        let columns: NucleiFormElement[] = [];
+
+        if (data) {
+          columns = [
+            ...data.slice(0, index),
+            emptyNucleiFormElement,
+            ...data.slice(index),
+          ];
+        } else {
+          columns.push(emptyNucleiFormElement);
+        }
+
+        form.setFieldValue('nuclei', columns);
+      },
+      [form],
+    );
+
+    const handleDelete = useCallback(
+      (data: readonly NucleiFormElement[], formElement: NucleiFormElement) => {
+        const fields = data.filter((element) => {
+          return element.nucleus !== formElement.nucleus;
+        });
+
+        form.setFieldValue('nuclei', fields);
+      },
+      [form],
+    );
+
+    const COLUMNS = useMemo<Array<Column<NucleiFormElement>>>(
+      () => [
+        {
+          Header: 'Nucleus',
+          style: { padding: 0 },
+          Cell: ({ row: { index } }: CellProps<NucleiFormElement>) => {
+            return (
+              <form.Field key={index} name={`nuclei[${index}].nucleus`}>
+                {(subField) => (
+                  <Input2
+                    style={{
+                      backgroundColor: 'transparent',
+                      boxShadow: 'none',
+                    }}
+                    value={subField.state.value}
+                    onChange={subField.handleChange}
+                  />
+                )}
+              </form.Field>
+            );
+          },
+        },
+        {
+          Header: 'δ (ppm)',
+          style: { padding: 0 },
+          Cell: ({ row: { index } }: CellProps<NucleiFormElement>) => {
+            return (
+              <form.Field key={index} name={`nuclei[${index}].ppmFormat`}>
+                {(subField) => (
+                  <Input2
+                    style={{
+                      backgroundColor: 'transparent',
+                      boxShadow: 'none',
+                    }}
+                    value={subField.state.value}
+                    onChange={subField.handleChange}
+                  />
+                )}
+              </form.Field>
+            );
+          },
+        },
+        {
+          Header: 'Coupling (Hz)',
+          style: { padding: 0 },
+          Cell: ({ row: { index } }: CellProps<NucleiFormElement>) => {
+            return (
+              <form.Field key={index} name={`nuclei[${index}].hzFormat`}>
+                {(subField) => (
+                  <Input2
+                    style={{
+                      backgroundColor: 'transparent',
+                      boxShadow: 'none',
+                    }}
+                    value={subField.state.value}
+                    onChange={subField.handleChange}
+                  />
+                )}
+              </form.Field>
+            );
+          },
+        },
+        {
+          Header: 'Axis from',
+          style: { padding: 0 },
+          Cell: ({ row: { index } }: CellProps<NucleiFormElement>) => {
+            return (
+              <form.Field key={index} name={`nuclei[${index}].axisFrom`}>
+                {(subField) => (
+                  <NumericInput
+                    style={{
+                      backgroundColor: 'transparent',
+                      boxShadow: 'none',
+                    }}
+                    value={Number(subField.state.value) || undefined}
+                    fill
+                    onValueChange={(valueAsNumber) =>
+                      subField.handleChange(valueAsNumber)
+                    }
+                  />
+                )}
+              </form.Field>
+            );
+          },
+        },
+        {
+          Header: 'Axis to',
+          style: { padding: 0 },
+          Cell: ({ row: { index } }: CellProps<NucleiFormElement>) => {
+            return (
+              <form.Field key={index} name={`nuclei[${index}].axisTo`}>
+                {(subField) => (
+                  <NumericInput
+                    style={{
+                      backgroundColor: 'transparent',
+                      boxShadow: 'none',
+                    }}
+                    value={Number(subField.state.value) || undefined}
+                    fill
+                    onValueChange={(valueAsNumber) =>
+                      subField.handleChange(valueAsNumber)
+                    }
+                  />
+                )}
+              </form.Field>
+            );
+          },
+        },
+        {
+          Header: '',
+          style: {
+            width: 60,
+          },
+          id: 'op-buttons',
+          Cell: ({
+            row: { original, index: rowIndex },
+            data,
+          }: CellProps<NucleiFormElement>) => {
+            return (
+              <Buttons>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  intent="success"
+                  onClick={() => handleAdd(data, rowIndex + 1)}
+                >
+                  <FaPlus className={Classes.ICON} />
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  intent="danger"
+                  onClick={() => handleDelete(data, original)}
+                >
+                  <FaRegTrashAlt className={Classes.ICON} />
+                </Button>
+              </Buttons>
+            );
+          },
+        },
+      ],
+      [form, handleAdd, handleDelete],
+    );
+
+    return (
+      <GroupPane
+        text="Number formatting for crosshair and info line and axis domain"
+        renderHeader={(text) => {
+          return (
+            <FieldsBlockHeader text={text} onAdd={() => handleAdd(fields, 0)} />
+          );
+        }}
+      >
+        <ReactTable
+          style={{
+            'thead tr th': { zIndex: 1 },
+            td: { padding: 0 },
+          }}
+          rowStyle={{
+            hover: { backgroundColor: '#f7f7f7' },
+            active: { backgroundColor: '#f5f5f5' },
+          }}
+          data={fields}
+          columns={COLUMNS}
+          emptyDataRowText="No Nucleus"
+        />
+      </GroupPane>
+    );
+  },
+});
+
+interface FieldsBlockHeaderProps {
+  onAdd: () => void;
+  text: string;
+}
+
+function FieldsBlockHeader(props: FieldsBlockHeaderProps) {
+  const { onAdd, text } = props;
+  return (
+    <Section>
+      <p style={{ flex: 1 }}>{text}</p>
+
+      <Button
+        size="small"
+        variant="outlined"
+        intent="success"
+        tooltipProps={{ content: '', disabled: true }}
+        onClick={onAdd}
+      >
+        Add nuclei preferences
+      </Button>
+    </Section>
+  );
+}
+
+const Buttons = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+`;

src/component/modal/setting/tanstack_general_settings/utils/checkUniqueByKey.ts

@@ -0,0 +1,55 @@
+import type { RefinementCtx } from 'zod';
+
+interface CheckUniqueByKeyOptions<T> {
+  data?: T[];
+  checkKey: keyof T;
+  basePath?: string;
+  context: RefinementCtx;
+}
+
+export function checkUniqueByKey<T>(options: CheckUniqueByKeyOptions<T>) {
+  const { data, checkKey, context, basePath = '' } = options;
+
+  if (!data) return true;
+
+  const matchesFrequencies: Record<
+    string,
+    { value: number; fieldsIndexes: number[] }
+  > = {};
+  let index = 0;
+  for (const datum of data) {
+    let key;
+    const matchValue = datum[checkKey];
+
+    if (typeof matchValue === 'string') {
+      key = matchValue.toLowerCase();
+    }
+
+    if (key) {
+      if (matchesFrequencies[key]) {
+        ++matchesFrequencies[key].value;
+        matchesFrequencies[key].fieldsIndexes.push(index);
+      } else {
+        matchesFrequencies[key] = { value: 1, fieldsIndexes: [index] };
+      }
+    }
+    index++;
+  }
+
+  for (const key in matchesFrequencies) {
+    const { value, fieldsIndexes } = matchesFrequencies[key];
+    if (value > 1) {
+      for (const index of fieldsIndexes) {
+        context.addIssue({
+          code: 'custom',
+          message: `${key} must be unique`,
+          path: basePath
+            ? [basePath, index, String(checkKey)]
+            : [index, String(checkKey)],
+        });
+      }
+    }
+  }
+
+  return true;
+}

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

@@ -5,6 +5,8 @@ import { z } from 'zod/v4';
 import type { LoggerType } from '../../../context/LoggerContext.tsx';
 import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties.ts';
 
+import { checkUniqueByKey } from './utils/checkUniqueByKey.ts';
+
 const loggingLevel: LoggerType[] = [
   'fatal',
   'error',
@@ -102,7 +104,26 @@ const exportPreferencesValidation = z.object({
   clipboard: exportSettingsValidation,
 });
 
+const nucleiValidation = z
+  .array(
+    z.object({
+      nucleus: z.string({ error: 'Nucleus is a required field' }),
+      ppmFormat: z.string({ error: 'PPM format is a required field' }),
+      hzFormat: z.string({ error: 'Hz format  is a required field' }),
+      axisFrom: z.coerce.number().optional(),
+      axisTo: z.coerce.number().optional(),
+    }),
+  )
+  .superRefine((nuclei, ctx) => {
+    checkUniqueByKey({
+      data: nuclei,
+      checkKey: 'nucleus',
+      context: ctx,
+    });
+  });
+
 export const workspaceValidation = z.object({
+  nuclei: nucleiValidation,
   peaksLabel: peaksLabelValidation,
   general: generalValidation,
   display: displayValidation,
@@ -113,6 +134,7 @@ export const workspaceValidation = z.object({
 export const defaultGeneralSettingsFormValues: z.input<
   typeof workspaceValidation
 > = {
+  nuclei: [{ nucleus: '', ppmFormat: '', hzFormat: '' }],
   peaksLabel: {
     marginTop: 0,
   },