feat: improve panels and general preferences (#1547)

* chore: define panel preferences types

* chore: create utility function to get unique nuclei

* feat: create hook for panel preferences

* refactor: peaks preferences

* chore: correct the hook name spellings

* refactor: integral preferences

* chore: fix eslint

* chore: define type for context menu

* refactor: ranges  preferences

* refactor: edit range modal number format

* fix: context menu type

* refactor: zones preferences

* refactor: add delat in ppm and hz to ranges preferences

* refactor: preferences reducer

* refactor: j graph

* refactor: overloading usePanelPreferences hook

* refactor: database panel preferences

* fix: export Panels interface

* fix: return type of useusePanelPreferences hook

* refactor: ranges to publication string ppm and hz format

* chore: update local storage version number

* fix: value in Hz for ranges is wrong
close #1548

* feat: remove peak index column from peaks table
close #1549

* feat: ranges coupling constant format
close #1552

* refactor: format values in edit range modal

* chore: rename general formatting Modal header

* refcator: import formatNumber function

* refactor: integrals preferences structure

* refactor: peaks preferences structure

* refactor: ranges preferences structure

* refactor: zones preferences structure

* refactor: move useFormatNumberByNucleus hook

* refactor: rename formatNumber

* refactor: ranges preferences
close #1553

* chore: remove unused properties

* refcator: column field component

* refactor: panels preferences
 store preferences under nuclei Object in peaks, integrals, ranges, and zones panels and add general preferences for zones

* chore: fix prettier

* chore: format signal delta

* refactor: column format field interface

* refactor: generalize preferences

* chore: set ColumnColumnFormatField component props optional

* refactor: props in ColumnColumnFormatField and NucleusPreferences

src/component/1d/FooterBanner.tsx

@@ -11,9 +11,9 @@ import { BrushContext } from '../EventsTrackers/BrushTracker';
 import { MouseContext } from '../EventsTrackers/MouseTracker';
 import { useChartData } from '../context/ChartContext';
 import { useScaleChecked } from '../context/ScaleContext';
+import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus';
 import useSpectrum from '../hooks/useSpectrum';
 import { ActiveSpectrum } from '../reducer/Reducer';
-import { useFormatNumberByNucleus } from '../utility/FormatNumber';
 
 const styles = css`
   display: flex;

src/component/1d/Integral.tsx

@@ -1,43 +1,35 @@
-import { useMemo } from 'react';
-
-import { usePreferences } from '../context/PreferencesContext';
 import useIntegralPath from '../hooks/useIntegralPath';
-import { integralDefaultValues } from '../panels/extra/preferences/defaultValues';
-import { getValue } from '../utility/LocalStorage';
+import { usePanelPreferences } from '../hooks/usePanelPreferences';
 
 import IntegralResizable from './IntegralResizable';
 
 interface IntegralProps {
   integral: { id: string; from: number; to: number; integral?: number };
   isActive: boolean;
+  nucleus: string;
 }
 
-function Integral({ integral, isActive }: IntegralProps) {
-  const preferences = usePreferences();
+function Integral({ integral, isActive, nucleus }: IntegralProps) {
   const path = useIntegralPath(integral);
-
-  const integralSettings = useMemo(() => {
-    let {
-      color = integralDefaultValues.color,
-      strokeWidth = integralDefaultValues.strokeWidth,
-    } = getValue(preferences.current, 'formatting.panels.integrals') || {};
-    return { color, strokeWidth };
-  }, [preferences]);
+  const integralPreferences = usePanelPreferences('integrals', nucleus);
 
   return (
     <g>
       <path
         className="line"
-        stroke={integralSettings.color}
-        strokeWidth={integralSettings.strokeWidth}
+        stroke={integralPreferences.color}
+        strokeWidth={integralPreferences.strokeWidth}
         fill="none"
         style={{
           opacity: isActive ? 1 : 0.2,
         }}
         d={path}
       />
 
-      <IntegralResizable integralData={integral} />
+      <IntegralResizable
+        integralData={integral}
+        integralFormat={integralPreferences.relative.format}
+      />
     </g>
   );
 }

src/component/1d/IntegralResizable.tsx

@@ -9,6 +9,7 @@ import { useScaleChecked } from '../context/ScaleContext';
 import Resizer from '../elements/resizer/Resizer';
 import { HighlightedSource, useHighlight } from '../highlight/index';
 import { RESIZE_INTEGRAL } from '../reducer/types/Types';
+import { formatNumber } from '../utility/formatNumber';
 
 const stylesOnHover = css`
   pointer-events: bounding-box;
@@ -43,9 +44,13 @@ interface IntegralResizableProps {
     to: number;
     integral?: number;
   };
+  integralFormat: string;
 }
 
-function IntegralResizable({ integralData }: IntegralResizableProps) {
+function IntegralResizable({
+  integralData,
+  integralFormat,
+}: IntegralResizableProps) {
   const { height, margin } = useChartData();
   const { viewerRef } = useGlobal();
   const { scaleX } = useScaleChecked();
@@ -115,7 +120,9 @@ function IntegralResizable({ integralData }: IntegralResizableProps) {
               fill="black"
               style={{ fontSize: '12px', fontWeight: 'bold' }}
             >
-              {integral !== undefined ? integral.toFixed(2) : ''}
+              {integral !== undefined
+                ? formatNumber(integral, integralFormat)
+                : ''}
             </text>
           </g>
         )}

src/component/1d/IntegralsSeries.tsx

@@ -6,7 +6,13 @@ import { useChartData } from '../context/ChartContext';
 import Integral from './Integral';
 
 function IntegralsSeries() {
-  const { xDomains, activeSpectrum, data, displayerKey } = useChartData();
+  const {
+    xDomains,
+    activeSpectrum,
+    data,
+    displayerKey,
+    activeTab: nucleus,
+  } = useChartData();
 
   const Integrals = useMemo(() => {
     const isActive = (id) => {
@@ -26,6 +32,7 @@ function IntegralsSeries() {
             .map((spectrum) =>
               spectrum.integrals.values.map((integral) => (
                 <Integral
+                  nucleus={nucleus}
                   key={integral.id}
                   integral={integral}
                   isActive={isActive(spectrum.id)}
@@ -34,7 +41,7 @@ function IntegralsSeries() {
             )}
       </g>
     );
-  }, [activeSpectrum, data, xDomains]);
+  }, [activeSpectrum, data, nucleus, xDomains]);
 
   return <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>{Integrals}</g>;
 }

src/component/1d/PeakAnnotation.tsx

@@ -11,8 +11,9 @@ import {
 
 import { useDispatch } from '../context/DispatchContext';
 import { HighlightedSource, useHighlight } from '../highlight';
+import { usePanelPreferences } from '../hooks/usePanelPreferences';
 import { SHIFT_SPECTRUM } from '../reducer/types/Types';
-import { useFormatNumberByNucleus } from '../utility/FormatNumber';
+import { formatNumber } from '../utility/formatNumber';
 
 const styles = css`
   input {
@@ -77,7 +78,7 @@ function PeakAnnotation({
   const [isSelected, setIsSelected] = useState(false);
   const [_value, setValue] = useState(value);
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const format = useFormatNumberByNucleus(nucleus);
+  const { deltaPPM } = usePanelPreferences('peaks', nucleus);
   const highlight = useHighlight([id], {
     type: HighlightedSource.PEAK,
     extra: { id },
@@ -147,12 +148,12 @@ function PeakAnnotation({
   }, [highlight]);
 
   const newValue = useMemo(
-    () => (isSelected ? value : format(value)),
-    [format, isSelected, value],
+    () => (isSelected ? value : formatNumber(value, deltaPPM.format)),
+    [deltaPPM.format, isSelected, value],
   );
   const oldValue = useMemo(
-    () => (isSelected ? _value : format(_value)),
-    [_value, format, isSelected],
+    () => (isSelected ? _value : formatNumber(_value, deltaPPM.format)),
+    [_value, deltaPPM.format, isSelected],
   );
 
   return (

src/component/1d/jCouplingGraph/JGraph.tsx

@@ -1,5 +1,4 @@
 import { scaleLinear } from 'd3';
-import lodashGet from 'lodash/get';
 import { memo, useMemo } from 'react';
 
 import generateJGraphData, {
@@ -8,9 +7,8 @@ import generateJGraphData, {
 import { Signal1D } from '../../../data/types/data1d';
 import { Datum1D } from '../../../data/types/data1d/Datum1D';
 import { useChartData } from '../../context/ChartContext';
-import { usePreferences } from '../../context/PreferencesContext';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
-import { getRangeDefaultValues } from '../../panels/extra/preferences/defaultValues';
 
 import { JGraphContextProvider } from './JGraphContext';
 import { JGraphVerticalAxis } from './JGraphVerticalAxis';
@@ -39,42 +37,31 @@ const emptyData = { ranges: {} };
 const MemoizedJGraph = memo(InnerJGraph);
 
 export default function JGraph() {
-  const preferences = usePreferences();
-
   const {
     height,
     toolOptions: {
       data: { showJGraph },
     },
     activeTab,
   } = useChartData();
+  const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
   const graphHeight = height / 4;
 
   const { ranges } = useSpectrum(emptyData) as Datum1D;
 
-  const jGraphTolerance = useMemo(() => {
-    const _preferences =
-      lodashGet(
-        preferences.current,
-        `formatting.panels.ranges.[${activeTab}]`,
-      ) || getRangeDefaultValues(activeTab);
-
-    return _preferences.jGraphTolerance;
-  }, [activeTab, preferences]);
-
   const {
     signals,
     jCouplingMax: maxValue,
     links,
   } = useMemo(
     () =>
-      generateJGraphData(ranges.values, jGraphTolerance) || {
+      generateJGraphData(ranges.values, rangesPreferences.jGraphTolerance) || {
         signals: [],
         jCouplingMax: 0,
         links: [],
       },
-    [jGraphTolerance, ranges.values],
+    [rangesPreferences.jGraphTolerance, ranges.values],
   );
 
   const scaleY = useMemo(() => {

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

@@ -16,6 +16,7 @@ import Resizer from '../../elements/resizer/Resizer';
 import { HighlightedSource, useHighlight } from '../../highlight';
 import { RESIZE_RANGE } from '../../reducer/types/Types';
 import { options } from '../../toolbar/ToolTypes';
+import { formatNumber } from '../../utility/formatNumber';
 import MultiplicityTree from '../multiplicityTree/MultiplicityTree';
 import TempMultiplicityTree from '../multiplicityTree/TempMultiplicityTree';
 
@@ -62,13 +63,15 @@ interface RangeProps {
   selectedTool: string;
   rangeData: RangeData;
   startEditMode: boolean;
+  relativeFormat: string;
 }
 
 function Range({
   rangeData,
   showMultiplicityTrees,
   selectedTool,
   startEditMode,
+  relativeFormat,
 }: RangeProps) {
   const { viewerRef } = useGlobal();
   const { id, integration, signals } = rangeData;
@@ -197,7 +200,9 @@ function Range({
                   : 0.6
               }
             >
-              {integration !== undefined ? integration.toFixed(2) : ''}
+              {integration !== undefined
+                ? formatNumber(integration, relativeFormat)
+                : ''}
             </text>
           </g>
         )}

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

@@ -2,6 +2,7 @@ import { Fragment, memo } from 'react';
 
 import { Datum1D, Ranges as RangesProps } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
 
 import Range from './Range';
@@ -14,6 +15,7 @@ interface RangesInnerProps {
   editRangeID: string;
   showMultiplicityTrees: boolean;
   showRangesIntegrals: boolean;
+  relativeFormat: string;
 }
 
 function RangesInner({
@@ -23,6 +25,7 @@ function RangesInner({
   editRangeID,
   showMultiplicityTrees,
   showRangesIntegrals,
+  relativeFormat,
 }: RangesInnerProps) {
   return (
     <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
@@ -35,6 +38,7 @@ function RangesInner({
             startEditMode={
               editRangeID && editRangeID === range.id ? true : false
             }
+            relativeFormat={relativeFormat}
           />
           {showRangesIntegrals && <RangeIntegral range={range} />}
         </Fragment>
@@ -54,9 +58,11 @@ export default function Ranges() {
       selectedTool,
       data: { tempRange, showMultiplicityTrees, showRangesIntegrals },
     },
+    activeTab,
   } = useChartData();
 
   const { ranges } = useSpectrum(empyData) as Datum1D;
+  const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
   return (
     <MemoizedRanges
@@ -67,6 +73,7 @@ export default function Ranges() {
         selectedTool,
         displayerKey,
         editRangeID: tempRange?.id || '',
+        relativeFormat: rangesPreferences.relative.format,
       }}
     />
   );

src/component/1d/tool/XLabelPointer.tsx

@@ -5,7 +5,7 @@ import { BrushContext } from '../../EventsTrackers/BrushTracker';
 import { MouseContext } from '../../EventsTrackers/MouseTracker';
 import { useChartData } from '../../context/ChartContext';
 import { useScaleChecked } from '../../context/ScaleContext';
-import { useFormatNumberByNucleus } from '../../utility/FormatNumber';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
 
 const style: CSSProperties = {
   cursor: 'crosshair',

src/component/2d/FooterBanner.tsx

@@ -8,8 +8,8 @@ import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY';
 import { BrushContext } from '../EventsTrackers/BrushTracker';
 import { MouseContext } from '../EventsTrackers/MouseTracker';
 import { useChartData } from '../context/ChartContext';
+import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus';
 import { options } from '../toolbar/ToolTypes';
-import { useFormatNumberByNucleus } from '../utility/FormatNumber';
 
 import { getLayoutID, LAYOUT } from './utilities/DimensionLayout';
 import { get2DXScale, get1DYScale, get2DYScale } from './utilities/scale';

src/component/2d/tools/XYLabelPointer.tsx

@@ -3,7 +3,7 @@ import { useContext, useMemo, CSSProperties } from 'react';
 import { BrushContext } from '../../EventsTrackers/BrushTracker';
 import { MouseContext } from '../../EventsTrackers/MouseTracker';
 import { useChartData } from '../../context/ChartContext';
-import { useFormatNumberByNucleus } from '../../utility/FormatNumber';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
 import { getLayoutID, LAYOUT } from '../utilities/DimensionLayout';
 import { get2DXScale, get2DYScale, get1DYScale } from '../utilities/scale';
 

src/component/NMRium.tsx

@@ -52,7 +52,7 @@ import preferencesReducer, {
   preferencesInitialState,
   PreferencesState,
   initPreferencesState,
-} from './reducer/preferencesReducer';
+} from './reducer/preferences/preferencesReducer';
 import {
   INITIATE,
   SET_LOADING_FLAG,

src/component/context/PreferencesContext.tsx

@@ -4,7 +4,7 @@ import {
   preferencesInitialState,
   PreferencesState,
   WORKSPACES,
-} from '../reducer/preferencesReducer';
+} from '../reducer/preferences/preferencesReducer';
 import Workspaces from '../workspaces';
 
 export const PreferencesContext = createContext<PreferencesState>(

src/component/elements/ContextMenu.tsx

@@ -49,9 +49,16 @@ const styles = css`
     border: none;
   }
 `;
+interface ContextMenuItem {
+  onClick: <T>(data: T) => void;
+  label: string;
+}
 
+export interface ContextMenuProps {
+  context: ContextMenuItem[] | null;
+}
 // TODO: remove this hacky ref usage.
-function ContextMenu({ context }, ref: any) {
+function ContextMenu({ context }: ContextMenuProps, ref: any) {
   const [position, setPosition] = useState<{ left: any; top: any }>({
     left: 0,
     top: 0,