feat: spectra colors customization and show/hide the values of integrals

package.json

@@ -86,7 +86,7 @@
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.23.11",
+    "nmr-load-save": "^0.24.0",
     "nmr-processing": "^11.7.0",
     "nmredata": "^0.9.9",
     "numeral": "^2.0.6",
@@ -148,4 +148,4 @@
     "vite": "^5.0.10",
     "vitest": "^1.0.4"
   }
-}
+}

src/component/1d/integral/Integration.tsx

@@ -15,6 +15,7 @@
   const { x, y } = integral;
   const { scaleRatio } = useActiveSpectrumIntegralsViewState();
   const path = useIntegralPath({ x, y, max, scaleRatio });
+  const { showIntegralsValues } = useActiveSpectrumIntegralsViewState();
   const integralPreferences = usePanelPreferences('integrals', nucleus);
 
   return (
@@ -27,10 +28,12 @@
         d={path}
       />
 
-      <IntegralResizable
-        integralData={integral}
-        integralFormat={integralPreferences.relative.format}
-      />
+      {showIntegralsValues && (
+        <IntegralResizable
+          integralData={integral}
+          integralFormat={integralPreferences.relative.format}
+        />
+      )}
     </g>
   );
 }

src/component/1d/ranges/Range.tsx

@@ -12,6 +12,7 @@
 import { useDispatch } from '../../context/DispatchContext';
 import { ResizerWithScale } from '../../elements/ResizerWithScale';
 import { HighlightEventSource, useHighlight } from '../../highlight';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
 import { useResizerStatus } from '../../hooks/useResizerStatus';
 import { options } from '../../toolbar/ToolTypes';
 import { IntegralIndicator } from '../integral/IntegralIndicator';
@@ -60,6 +61,7 @@
 
   const scaleX = useScaleX();
   const dispatch = useDispatch();
+  const { showIntegralsValues } = useActiveSpectrumRangesViewState();
 
   const isBlockedByEditing =
     selectedTool && selectedTool === options.editRange.id;
@@ -145,12 +147,14 @@
                 data-no-export="true"
               />
 
-              <IntegralIndicator
-                value={integration}
-                format={relativeFormat}
-                width={width}
-                opacity={isNotSignal ? 0.5 : 1}
-              />
+              {showIntegralsValues && (
+                <IntegralIndicator
+                  value={integration}
+                  format={relativeFormat}
+                  width={width}
+                  opacity={isNotSignal ? 0.5 : 1}
+                />
+              )}
             </g>
           );
         }}

src/component/elements/formik/FormikColorPickerDropdown.tsx

@@ -0,0 +1,28 @@
+import { useFormikContext } from 'formik';
+import lodashGet from 'lodash/get';
+import { ColorPickerDropdown, ColorPickerProps } from 'react-science/ui';
+
+interface FormikColorPickerDropdownProps extends ColorPickerProps {
+  name: string;
+}
+
+function FormikColorPickerDropdown(props: FormikColorPickerDropdownProps) {
+  const { onChangeComplete = () => null, name, ...colorPickerProps } = props;
+
+  const { values, setFieldValue } = useFormikContext();
+
+  function colorChangeHandler(color) {
+    onChangeComplete(color);
+    void setFieldValue(name, color.hex);
+  }
+
+  return (
+    <ColorPickerDropdown
+      {...colorPickerProps}
+      onChangeComplete={colorChangeHandler}
+      color={{ hex: lodashGet(values, name) }}
+    />
+  );
+}
+
+export default FormikColorPickerDropdown;

src/component/hooks/useActiveSpectrumIntegralsViewState.ts

@@ -6,6 +6,7 @@
 
 export const defaultIntegralsViewState: IntegralsViewState = {
   scaleRatio: 1,
+  showIntegralsValues: true,
 };
 
 export function useActiveSpectrumIntegralsViewState() {

src/component/hooks/useActiveSpectrumRangesViewState.ts

@@ -8,6 +8,7 @@
   showPeaks: false,
   showMultiplicityTrees: false,
   showIntegrals: false,
+  showIntegralsValues: true,
   showJGraph: false,
   displayingMode: 'spread',
   integralsScaleRatio: 1,

src/component/loader/DropZone.tsx

@@ -54,7 +54,8 @@
 function DropZone(props) {
   const { width, height } = useChartData();
   const dispatch = useDispatch();
-  const { dispatch: dispatchPreferences, current } = usePreferences();
+  const { dispatch: dispatchPreferences, current: workspacePreferences } =
+    usePreferences();
   const preferences = usePreferences();
   const isToolEnabled = useCheckToolsVisibility();
   const openImportMetaInformationModal = useMetaInformationImportationModal();
@@ -76,12 +77,13 @@
           parseMetaFileResult = await parseMetaFile(metaFile);
         }
         const { nmrLoaders: sourceSelector } = preferences.current;
+        const { onLoadProcessing, spectraColors } = workspacePreferences;
         const { nmriumState, containsNmrium } = await readDropFiles(
           fileCollection,
           {
             sourceSelector,
             logger: logger.child({ context: 'nmr-processing' }),
-            onLoadProcessing: current.onLoadProcessing,
+            onLoadProcessing,
             experimentalFeatures,
           },
         );
@@ -101,6 +103,7 @@
             nmriumState,
             containsNmrium,
             parseMetaFileResult,
+            spectraColors,
           },
         });
       }

src/component/modal/setting/GeneralSettings.tsx

@@ -33,6 +33,7 @@
 import ImportationFiltersTabContent from './settings-tabs/ImportationFiltersTabContent';
 import InfoBlockTabContent from './settings-tabs/InfoBlockTabContent';
 import OnLoadProcessingTabContent from './settings-tabs/OnLoadProcessingTabContent';
+import SpectraColorsTabContent from './settings-tabs/SpectraColorsTabContent';
 import ToolsTabContent from './settings-tabs/ToolsTabContent';
 import { validation } from './settingsValidation';
 
@@ -422,6 +423,11 @@
                     <OnLoadProcessingTabContent />
                   </div>
                 </Tab>
+                <Tab title="Spectra colors" tabid="spectra-colors">
+                  <div className="inner-content">
+                    <SpectraColorsTabContent />
+                  </div>
+                </Tab>
               </Tabs>
             </Formik>
           </div>