feat: zoom out based on defined axis domain preferences

package.json

@@ -57,9 +57,9 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.10.2",
+    "@blueprintjs/core": "^5.10.3",
     "@blueprintjs/icons": "^5.9.0",
-    "@blueprintjs/select": "^5.1.4",
+    "@blueprintjs/select": "^5.1.5",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@lukeed/uuid": "^2.0.1",
@@ -90,12 +90,12 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.30.0",
-    "nmr-processing": "^12.2.0",
+    "nmr-load-save": "0.32.0",
+    "nmr-processing": "^12.3.1",
     "nmredata": "^0.9.9",
     "numeral": "^2.0.6",
-    "openchemlib": "^8.9.0",
-    "openchemlib-utils": "^5.17.0",
+    "openchemlib": "^8.10.0",
+    "openchemlib-utils": "^5.19.1",
     "papaparse": "^5.4.1",
     "re-resizable": "6.9.16",
     "react-d3-utils": "^1.0.0",
@@ -123,16 +123,16 @@
     "@playwright/test": "^1.44.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.4.3",
-    "@types/lodash": "^4.17.1",
-    "@types/node": "^20.12.10",
+    "@types/lodash": "^4.17.3",
+    "@types/node": "^20.12.12",
     "@types/papaparse": "^5.3.14",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/coverage-v8": "^1.6.0",
     "cross-env": "^7.0.3",
-    "cspell": "^8.8.0",
+    "cspell": "^8.8.1",
     "eslint": "^8.57.0",
     "eslint-config-cheminfo-react": "^11.0.1",
     "eslint-config-cheminfo-typescript": "^12.4.0",
@@ -142,8 +142,8 @@
     "rc-menu": "^9.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.0",
-    "rimraf": "^5.0.5",
+    "react-router-dom": "^6.23.1",
+    "rimraf": "^5.0.7",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^14.2.3",
     "stylelint": "^16.5.0",
@@ -152,4 +152,4 @@
     "vite": "^5.2.11",
     "vitest": "^1.6.0"
   }
-}
+}

src/component/1d-2d/FieldEdition.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import { Popover, PopoverProps } from '@blueprintjs/core';
+import { css } from '@emotion/react';
 import { Formik } from 'formik';
 import { ReactNode, useState } from 'react';
 import * as Yup from 'yup';

src/component/2d/Chart2D.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock';
 import { useChartData } from '../context/ChartContext';
 import { usePreferences } from '../context/PreferencesContext';
+import { ShareDataProvider } from '../context/ShareDataContext';
 import { Margin } from '../reducer/Reducer';
 
 import XAxis from './XAxis';
@@ -13,7 +14,6 @@ import { FTContainer } from './ft/FTContainer';
 import IndicationLines from './zones/IndicationLines';
 import Zones from './zones/Zones';
 import ZonesAssignmentsLabels from './zones/ZonesAssignmentsLabels';
-import { ShareDataProvider } from '../context/ShareDataContext';
 
 interface Chart2DProps {
   spectra?: Spectrum1D[];

src/component/EventsTrackers/KeysListenerTracker.tsx

@@ -32,7 +32,10 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
     },
   } = useChartData();
   const dispatch = useDispatch();
-  const { dispatch: dispatchPreferences } = usePreferences();
+  const {
+    dispatch: dispatchPreferences,
+    current: { nuclei },
+  } = usePreferences();
   const toaster = useToaster();
   const modal = useModal();
   const openLoader = useLoader();
@@ -439,6 +442,20 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
             default:
           }
         }
+
+        if (e.shiftKey) {
+          switch (e.key) {
+            case 'F': {
+              dispatch({
+                type: 'SET_AXIS_DOMAIN',
+                payload: { nucleiPreferences: nuclei },
+              });
+              break;
+            }
+            default:
+          }
+        }
+
         if (e.shiftKey && (e.metaKey || e.ctrlKey)) {
           switch (e.key) {
             case 's':
@@ -462,6 +479,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
       handleChangeOption,
       handleFullZoomOut,
       isToolVisible,
+      nuclei,
       openLoader,
       openSaveAsDialog,
       saveAsJSONHandler,

src/component/header/Header.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useMemo, useCallback, memo } from 'react';
+import { useMemo, memo } from 'react';
 import {
   FaRegWindowMaximize,
   FaQuestionCircle,
@@ -22,6 +22,7 @@ import DropDownButton, {
   DropDownListItem,
 } from '../elements/dropDownButton/DropDownButton';
 import { useSaveSettings } from '../hooks/useSaveSettings';
+import { useWorkspaceAction } from '../hooks/useWorkspaceAction';
 import { LogsHistoryModal } from '../modal/LogsHistoryModal';
 import AboutUsModal from '../modal/aboutUs/AboutUsModal';
 import GeneralSettingsModal from '../modal/setting/GeneralSettings';
@@ -89,8 +90,8 @@ function HeaderInner(props: HeaderInnerProps) {
       display: { general },
     },
     workspace,
-    dispatch,
   } = usePreferences();
+  const { setActiveWorkspace } = useWorkspaceAction();
   const fullscreen = useFullscreen();
 
   const workspacesList = useWorkspacesList();
@@ -123,17 +124,9 @@ function HeaderInner(props: HeaderInnerProps) {
     }
   }, [selectedOptionPanel]);
 
-  const changeWorkspaceHandler = useCallback(
-    (option: DropDownListItem) => {
-      dispatch({
-        type: 'SET_ACTIVE_WORKSPACE',
-        payload: {
-          workspace: option.key,
-        },
-      });
-    },
-    [dispatch],
-  );
+  function changeWorkspaceHandler(option: DropDownListItem) {
+    setActiveWorkspace(option.key);
+  }
 
   function renderItem(item) {
     return <WorkspaceItem item={item} />;

src/component/hooks/useFormatNumberByNucleus.ts

@@ -6,7 +6,8 @@ import { formatNumber } from '../utility/formatNumber';
 
 export type ReturnFunction = (
   value?: number | string,
-  formatKey?: string,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  formatKey?: 'ppmFormat' | 'hzFormat' | (string & {}),
   prefix?: string,
   suffix?: string,
 ) => string;
@@ -15,22 +16,26 @@ export function useFormatNumberByNucleus(nucleus?: string[]): ReturnFunction[];
 export function useFormatNumberByNucleus(nucleus?: string): ReturnFunction;
 export function useFormatNumberByNucleus(nucleus?: string | string[]) {
   const preferences = usePreferences();
-  const nucleusByKey = lodashGet(preferences.current, `formatting.nuclei`, {
-    ppm: '0.0',
-    hz: '0.0',
-  });
+  const nucleiPreferences = lodashGet(preferences.current, `nuclei`, []);
 
   return useMemo(() => {
     function formatFun(n: string) {
-      return (value: any, formatKey = 'ppm', prefix = '', suffix = '') => {
-        return formatNumber(
-          value,
-          nucleusByKey?.[n.toLowerCase()]?.[formatKey],
-          {
-            prefix,
-            suffix,
-          },
-        );
+      const preferences = nucleiPreferences?.find(
+        ({ nucleus }) => nucleus.toLowerCase() === n.toLowerCase(),
+      ) || {
+        ppmFormat: '0.0',
+        hzFormat: '0.0',
+      };
+      return (
+        value: any,
+        formatKey = 'ppmFormat',
+        prefix = '',
+        suffix = '',
+      ) => {
+        return formatNumber(value, preferences[formatKey], {
+          prefix,
+          suffix,
+        });
       };
     }
 
@@ -45,5 +50,5 @@ export function useFormatNumberByNucleus(nucleus?: string | string[]) {
     } else {
       throw new Error('nuclus must be string or array of string');
     }
-  }, [nucleus, nucleusByKey]);
+  }, [nucleiPreferences, nucleus]);
 }

src/component/hooks/usePanelPreferences.ts

@@ -21,8 +21,6 @@ import {
 } from '../reducer/preferences/panelsPreferencesDefaultValues';
 import { getValue } from '../utility/LocalStorage';
 
-const basePath = 'formatting.panels';
-
 type Panel =
   | 'spectra'
   | 'peaks'
@@ -82,7 +80,7 @@ function getPanelPreferences(
   nucleus?: string,
   returnOnlyNucleusPreferences = false,
 ) {
-  const panelPath = `${basePath}.${panelKey}`;
+  const panelPath = `panels.${panelKey}`;
   let path = panelPath;
 
   if (nucleus) {

src/component/hooks/useSaveSettings.tsx

@@ -10,6 +10,8 @@ import { useToaster } from '../context/ToasterContext';
 import FormikInput from '../elements/formik/FormikInput';
 import ConfirmationDialog from '../elements/popup/Modal/ConfirmDialog';
 
+import { useWorkspaceAction } from './useWorkspaceAction';
+
 const schema = Yup.object().shape({
   workspaceName: Yup.string().required(),
 });
@@ -48,17 +50,13 @@ export function useSaveSettings() {
   const toaster = useToaster();
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
   const settingsRef = useRef<Workspace>();
-  const { dispatch, current } = usePreferences();
+  const { current } = usePreferences();
   const formRef = useRef<FormikProps<any>>(null);
+  const { saveWorkspace, addNewWorkspace } = useWorkspaceAction();
+
+  function handleAddNewWorkspace({ workspaceName }) {
+    addNewWorkspace(workspaceName, settingsRef.current);
 
-  function addNewWorkspace({ workspaceName }) {
-    dispatch({
-      type: 'ADD_WORKSPACE',
-      payload: {
-        workspaceKey: workspaceName,
-        data: settingsRef.current,
-      },
-    });
     closeDialog();
     toaster.show({
       message: 'Preferences saved successfully',
@@ -72,10 +70,8 @@ export function useSaveSettings() {
       if (current.source !== 'user') {
         openDialog();
       } else {
-        dispatch({
-          type: 'SET_PREFERENCES',
-          ...(values && { payload: values }),
-        });
+        saveWorkspace(values);
+
         closeDialog();
       }
     },
@@ -84,7 +80,11 @@ export function useSaveSettings() {
         message:
           'Please enter a new user workspace name in order to save your changes locally',
         render: (props) => (
-          <WorkspaceAddForm {...props} onSave={addNewWorkspace} ref={formRef} />
+          <WorkspaceAddForm
+            {...props}
+            onSave={handleAddNewWorkspace}
+            ref={formRef}
+          />
         ),
         buttons: [
           {