fix: zones preferences

src/component/panels/SpectraPanel/SpectraPreferences.tsx

@@ -18,24 +18,12 @@ import { Scroller } from '../../elements/Scroller.js';
 import useNucleus from '../../hooks/useNucleus.js';
 import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
 import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths.js';
+import { replaceNucleiObjectKeys } from '../../utility/replaceNucleiObjectKeys.js';
 import { NucleusGroup } from '../extra/preferences/NucleusGroup.js';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
 
 import { SpectraColumnsManager } from './base/SpectraColumnsManager.js';
 
-function replaceNucleusKeys(
-  data: PanelsPreferences['spectra'],
-  searchValue: string,
-  replaceValue: string,
-) {
-  const nuclei = {};
-
-  for (const key in data.nuclei) {
-    nuclei[key.replace(searchValue, replaceValue)] = data.nuclei[key];
-  }
-  return { ...data, nuclei };
-}
-
 const groupPaneStyle: GroupPaneStyle = {
   header: {
     color: 'black',
@@ -90,7 +78,7 @@ function SpectraPreferences(props, ref: any) {
 
   const preferencesByNuclei = usePanelPreferencesByNuclei('spectra', nuclei);
   const methods = useForm({
-    defaultValues: replaceNucleusKeys(preferencesByNuclei, ',', '_'),
+    defaultValues: replaceNucleiObjectKeys(preferencesByNuclei, ',', '_'),
     resolver: yupResolver(spectraPreferencesValidation),
   });
   const {
@@ -110,7 +98,7 @@ function SpectraPreferences(props, ref: any) {
         type: 'SET_PANELS_PREFERENCES',
         payload: {
           key: 'spectra',
-          value: replaceNucleusKeys(values, '_', ','),
+          value: replaceNucleiObjectKeys(values, '_', ','),
         },
       });
       return true;

src/component/panels/ZonesPanel/ZonesPreferences.tsx

@@ -6,6 +6,7 @@ import useNucleus from '../../hooks/useNucleus.js';
 import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
 import { getUniqueNuclei } from '../../utility/getUniqueNuclei.js';
 import { is2DNucleus } from '../../utility/nucleusToString.js';
+import { replaceNucleiObjectKeys } from '../../utility/replaceNucleiObjectKeys.js';
 import type { NucleusPreferenceField } from '../extra/preferences/NucleusPreferences.js';
 import { NucleusPreferences } from '../extra/preferences/NucleusPreferences.js';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
@@ -68,18 +69,21 @@ const preferences2DFields: NucleusPreferenceField[] = [
 function ZonesPreferences(props, ref) {
   const preferences = usePreferences();
   const nucleus = useNucleus();
-  const nuclei2D = nucleus.filter((n) => is2DNucleus(n));
-  const nuclei = useMemo(() => getUniqueNuclei(nucleus), [nucleus]);
-  const zonesPreferences = usePanelPreferencesByNuclei('zones', [
-    ...nuclei,
-    ...nuclei2D,
-  ]);
+  const nuclei = useMemo(
+    () =>
+      getUniqueNuclei(nucleus).concat(nucleus.filter((n) => is2DNucleus(n))),
+    [nucleus],
+  );
+  const zonesPreferences = usePanelPreferencesByNuclei('zones', nuclei);
 
   const saveHandler = useCallback(
     (values) => {
       preferences.dispatch({
         type: 'SET_PANELS_PREFERENCES',
-        payload: { key: 'zones', value: values },
+        payload: {
+          key: 'zones',
+          value: replaceNucleiObjectKeys(values, '_', ','),
+        },
       });
     },
     [preferences],
@@ -92,27 +96,33 @@ function ZonesPreferences(props, ref) {
   useSettingImperativeHandle(ref, handleSubmit, saveHandler);
 
   useEffect(() => {
-    reset(zonesPreferences);
+    reset(replaceNucleiObjectKeys(zonesPreferences, ',', '_'));
   }, [reset, zonesPreferences]);
 
   return (
     <PreferencesContainer>
-      {nuclei?.map((n) => (
-        <NucleusPreferences
-          control={control}
-          key={n}
-          nucleus={n}
-          fields={preferences1DFields}
-        />
-      ))}
-      {nuclei2D?.map((n) => (
-        <NucleusPreferences
-          control={control}
-          key={n}
-          nucleus={n}
-          fields={preferences2DFields}
-        />
-      ))}
+      {nuclei?.map((n) => {
+        if (is2DNucleus(n)) {
+          return (
+            <NucleusPreferences
+              control={control}
+              key={n}
+              nucleus={n.replace(',', '_')}
+              nucleusTitle={n}
+              fields={preferences2DFields}
+            />
+          );
+        } else {
+          return (
+            <NucleusPreferences
+              control={control}
+              key={n}
+              nucleus={n}
+              fields={preferences1DFields}
+            />
+          );
+        }
+      })}
     </PreferencesContainer>
   );
 }

src/component/panels/extra/preferences/NucleusGroup.tsx

@@ -24,17 +24,14 @@ const styles = {
   header: {
     borderBottom: '1px solid #e8e8e8',
     paddingBottom: '5px',
+    marginBottom: '10px',
     fontWeight: 'bold',
     color: '#4a4a4a',
   },
 };
 
-export function NucleusGroup({
-  nucleus,
-  children,
-  renderTop,
-  renderBottom,
-}: NucleusGroupWithChildrenProps) {
+export function NucleusGroup(props: NucleusGroupWithChildrenProps) {
+  const { nucleus, children, renderTop, renderBottom } = props;
   return (
     <div key={nucleus} style={styles.groupContainer}>
       <IsotopesViewer style={styles.header} value={nucleus} />

src/component/panels/extra/preferences/NucleusPreferences.tsx

@@ -15,13 +15,21 @@ interface NucleusPreferencesProps<
 > extends NucleusGroupProps,
     Pick<ControllerProps<TFieldValues>, 'control'> {
   fields: NucleusPreferenceField[];
+  nucleusTitle?: string;
 }
 
 export function NucleusPreferences(props: NucleusPreferencesProps) {
-  const { nucleus, fields, renderTop, renderBottom, control } = props;
+  const {
+    nucleus,
+    nucleusTitle = nucleus,
+    fields,
+    renderTop,
+    renderBottom,
+    control,
+  } = props;
   return (
     <NucleusGroup
-      nucleus={nucleus}
+      nucleus={nucleusTitle}
       renderTop={renderTop}
       renderBottom={renderBottom}
     >

src/component/utility/replaceNucleiObjectKeys.ts

@@ -0,0 +1,11 @@
+export function replaceNucleiObjectKeys<
+  T extends { nuclei: Record<string, any> },
+>(data: T, searchValue: string, replaceValue: string): T {
+  const nuclei: Record<string, any> = {};
+
+  for (const key in data.nuclei) {
+    nuclei[key.replace(searchValue, replaceValue)] = data.nuclei[key];
+  }
+
+  return { ...data, nuclei } as T;
+}