feat: save NMRium preferences by workspace (#1393)

feat: save NMRium display preferences by workspace feat: hide general settings in exercise mode feat: save panel preferences by workspace fix: panel preference changes are not saved to local storage * close #1325 * close #1386 * chore: fix code format * chore: delete unused panel preferences hook * refactor: workspaces structure *change name from mode to workspace *move hideExperimentalFeatures object under display>general object *increment local storage version number
cheminfo · Mar 3, 2022 · 83ddbc5 · 83ddbc5
1 parent 16f4ef7
commit 83ddbc5
Show file tree

Hide file tree

Showing 25 changed files with 314 additions and 313 deletions.
diff --git a/src/component/NMRium.tsx b/src/component/NMRium.tsx
@@ -127,7 +127,7 @@ const containerStyles = css`
   }
 `;
 
-export enum NMRiumMode {
+export enum NMRiumWorkspaces {
   EXERCISE_1D = 'exercise1D',
   PROCESS_1D = 'process1D',
   DEFAULT = 'default',
@@ -136,7 +136,7 @@ export enum NMRiumMode {
 export interface NMRiumProps {
   data?: NMRiumData;
   onDataChange?: (data: State) => void;
-  mode?: NMRiumMode;
+  workspace?: NMRiumWorkspaces;
   preferences?: NMRiumPreferences;
   emptyText?: ReactNode;
   /**
@@ -149,6 +149,8 @@ export type NMRiumPreferences = Partial<{
   general: Partial<{
     disableMultipletAnalysis: boolean;
     hideSetSumFromMolecule: boolean;
+    hideGeneralSettings: boolean;
+    hideExperimentalFeatures: boolean;
   }>;
   panels: Partial<{
     hideSpectraPanel: boolean;
@@ -179,6 +181,7 @@ export type NMRiumPreferences = Partial<{
     hideBaseLineCorrectionTool: boolean;
     hideFFTTool: boolean;
     hideMultipleSpectraAnalysisTool: boolean;
+    hideExclusionZonesTool: boolean;
   }>;
 }>;
 
@@ -211,7 +214,7 @@ function NMRium(props: NMRiumProps) {
 
 function InnerNMRium({
   data: dataProp = defaultData,
-  mode = NMRiumMode.DEFAULT,
+  workspace = NMRiumWorkspaces.DEFAULT,
   preferences = defaultPreferences,
   getSpinner = defaultGetSpinner,
   onDataChange,
@@ -258,11 +261,11 @@ function InnerNMRium({
       type: INIT_PREFERENCES,
       payload: {
         display: preferences,
-        mode,
+        workspace,
         dispatch: dispatchPreferences,
       },
     });
-  }, [preferences, mode]);
+  }, [preferences, workspace]);
 
   useEffect(() => {
     dispatchMiddleWare({ type: SET_LOADING_FLAG, isLoading: true });

diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
@@ -9,6 +9,7 @@ import {
 
 import { docsBaseUrl } from '../../constants';
 import { useChartData } from '../context/ChartContext';
+import { usePreferences } from '../context/PreferencesContext';
 import { useAlert } from '../elements/popup/Alert';
 import { useModal, positions } from '../elements/popup/Modal';
 import AboutUsModal from '../modal/AboutUsModal';
@@ -26,10 +27,16 @@ interface HeaderInnerProps {
   onMaximize?: () => void;
   isFullscreen: boolean;
   selectedOptionPanel: string | null;
+  hideGeneralSettings: boolean;
 }
 
 function HeaderInner(props: HeaderInnerProps) {
-  const { isFullscreen, onMaximize = () => null, selectedOptionPanel } = props;
+  const {
+    isFullscreen,
+    onMaximize = () => null,
+    selectedOptionPanel,
+    hideGeneralSettings,
+  } = props;
 
   const alert = useAlert();
   const modal = useModal();
@@ -118,13 +125,15 @@ function HeaderInner(props: HeaderInnerProps) {
         >
           <FaQuestionCircle />
         </Toolbar.Item>
-        <Toolbar.Item
-          id="general-settings"
-          onClick={openGeneralSettingsHandler}
-          title="General settings"
-        >
-          <FaWrench />
-        </Toolbar.Item>
+        {!hideGeneralSettings && (
+          <Toolbar.Item
+            id="general-settings"
+            onClick={openGeneralSettingsHandler}
+            title="General settings"
+          >
+            <FaWrench />
+          </Toolbar.Item>
+        )}
 
         {!isFullscreen && (
           <Toolbar.Item
@@ -147,8 +156,18 @@ export default function HeaderWrapper({ isFullscreen, onMaximize }) {
   const {
     toolOptions: { selectedOptionPanel },
   } = useChartData();
+  const {
+    display: { general },
+  } = usePreferences();
 
   return (
-    <MemoizedHeader {...{ selectedOptionPanel, isFullscreen, onMaximize }} />
+    <MemoizedHeader
+      {...{
+        selectedOptionPanel,
+        isFullscreen,
+        onMaximize,
+        hideGeneralSettings: general?.hideGeneralSettings || false,
+      }}
+    />
   );
 }
diff --git a/src/component/hooks/useCheckExperimentalFeature.ts b/src/component/hooks/useCheckExperimentalFeature.ts
@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import { useMemo } from 'react';
 
 import { usePreferences } from '../context/PreferencesContext';
@@ -6,6 +7,10 @@ export default function useCheckExperimentalFeature(): boolean {
   const preferences = usePreferences();
 
   return useMemo(() => {
-    return !preferences?.display.hideExperimentalFeatures === true;
+    return !lodashGet(
+      preferences,
+      'display.general.hideExperimentalFeatures',
+      false,
+    );
   }, [preferences]);
 }
diff --git a/src/component/modal/setting/DisplayTabContent.tsx b/src/component/modal/setting/DisplayTabContent.tsx
@@ -50,7 +50,7 @@ const LIST: Array<{ label: string; name: string }> = [
   },
   {
     label: 'Experimental Features',
-    name: 'display.hideExperimentalFeatures',
+    name: 'display.general.hideExperimentalFeatures',
   },
 ];
 

diff --git a/src/component/modal/setting/GeneralSettings.tsx b/src/component/modal/setting/GeneralSettings.tsx
@@ -8,7 +8,6 @@ import Tab from '../../elements/Tab/Tab';
 import Tabs, { PositionsEnum } from '../../elements/Tab/Tabs';
 import FormikForm from '../../elements/formik/FormikForm';
 import { SET_PREFERENCES } from '../../reducer/preferencesReducer';
-import { useStateWithLocalStorage } from '../../utility/LocalStorage';
 
 import ControllersTabContent from './ControllersTabContent';
 import DisplayTabContent from './DisplayTabContent';
@@ -150,7 +149,6 @@ interface GeneralSettingsProps {
 function GeneralSettings({ onClose, onSave }: GeneralSettingsProps) {
   const [activeTab, setActiveTab] = useState('controllers');
   const preferences = usePreferences();
-  const [, setSettingsData] = useStateWithLocalStorage('nmr-general-settings');
   const refForm = useRef<any>();
 
   const handleSave = useCallback(() => {
@@ -159,12 +157,10 @@ function GeneralSettings({ onClose, onSave }: GeneralSettingsProps) {
 
   const submitHandler = useCallback(
     (values) => {
-      const { dispatch, basePreferences, ...resValues } = values;
-      setSettingsData(resValues);
       preferences.dispatch({ type: SET_PREFERENCES, payload: values });
       onSave?.();
     },
-    [onSave, preferences, setSettingsData],
+    [onSave, preferences],
   );
 
   const tabChangeHandler = useCallback((tab) => {

diff --git a/src/component/nmriumMode/basic.ts b/src/component/nmriumMode/basic.ts
diff --git a/src/component/nmriumMode/exercise1D.ts b/src/component/nmriumMode/exercise1D.ts
diff --git a/src/component/nmriumMode/process1D.ts b/src/component/nmriumMode/process1D.ts
diff --git a/src/component/panels/IntegralsPanel/IntegralPanel.tsx b/src/component/panels/IntegralsPanel/IntegralPanel.tsx
@@ -106,9 +106,6 @@ function IntegralPanelInner({
 
   const settingsPanelHandler = useCallback(() => {
     setFlipStatus(!isFlipped);
-    if (!isFlipped) {
-      settingRef.current.cancelSetting();
-    }
   }, [isFlipped]);
 
   const saveSettingHandler = useCallback(() => {

diff --git a/src/component/panels/IntegralsPanel/IntegralsPreferences.tsx b/src/component/panels/IntegralsPanel/IntegralsPreferences.tsx
@@ -17,10 +17,7 @@ import FormikNumberInput from '../../elements/formik/FormikNumberInput';
 import { useAlert } from '../../elements/popup/Alert';
 import useNucleus from '../../hooks/useNucleus';
 import { SET_PANELS_PREFERENCES } from '../../reducer/preferencesReducer';
-import {
-  useStateWithLocalStorage,
-  getValue as getValueByKeyPath,
-} from '../../utility/LocalStorage';
+import { getValue as getValueByKeyPath } from '../../utility/LocalStorage';
 import { integralDefaultValues } from '../extra/preferences/defaultValues';
 
 const styles: Record<
@@ -94,7 +91,6 @@ function IntegralsPreferencesInner({
   innerRef,
 }: IntegralsPreferencesInnerProps) {
   const alert = useAlert();
-  const [, setSettingsData] = useStateWithLocalStorage('nmr-general-settings');
 
   const formRef = useRef<any>();
 
@@ -123,19 +119,13 @@ function IntegralsPreferencesInner({
     updateValues();
   }, [updateValues]);
 
-  const saveToLocalStorgate = (values) => {
-    setSettingsData(values, 'formatting.panels.integrals');
-  };
-
   const saveHandler = useCallback(
-    (values, showMessage = false) => {
+    (values) => {
       preferences.dispatch({
         type: SET_PANELS_PREFERENCES,
         payload: { key: 'integrals', value: values },
       });
-      if (showMessage) {
-        alert.success('Integrals preferences saved successfully');
-      }
+      alert.success('Integrals preferences saved successfully');
     },
     [alert, preferences],
   );
@@ -144,19 +134,11 @@ function IntegralsPreferencesInner({
     saveSetting: () => {
       formRef.current.submitForm();
     },
-    cancelSetting: () => {
-      updateValues();
-    },
   }));
 
-  const handleSubmit = (values) => {
-    saveHandler(values, true);
-    saveToLocalStorgate(values);
-  };
-
   return (
     <div style={styles.container}>
-      <FormikForm onSubmit={handleSubmit} ref={formRef}>
+      <FormikForm onSubmit={saveHandler} ref={formRef}>
         <div style={styles.groupContainer}>
           <p style={styles.header}>General</p>
           <FormikColorInput name="color" />

diff --git a/src/component/panels/PeaksPanel/PeaksPanel.tsx b/src/component/panels/PeaksPanel/PeaksPanel.tsx
@@ -54,9 +54,6 @@ function PeaksPanelInner({
 
   const settingsPanelHandler = useCallback(() => {
     setFlipStatus(!isFlipped);
-    if (!isFlipped) {
-      settingRef.current.cancelSetting();
-    }
   }, [isFlipped]);
 
   const saveSettingHandler = useCallback(() => {