refactor: spectra list (#1919)

fix: the 2d tab should be active by default if we have 2d and 1d spectra
feat: add spectra column customization
feat: add description for predefined columns

Co-authored-by: jobo322 <jose.bolanos@correounivalle.edu.co>

package.json

@@ -80,7 +80,7 @@
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.0.0",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "0.5.1",
+    "nmr-load-save": "0.5.2-pre.1669302748",
     "nmr-processing": "^9.2.0",
     "nmredata": "^0.9.1",
     "numeral": "^2.0.6",

src/component/1d/peaks/PeakAnnotations.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Datum1D } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
 import { useScaleChecked } from '../../context/ScaleContext';
+import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
 import useSpectrum from '../../hooks/useSpectrum';
 import { useActiveSpectrum } from '../../reducer/Reducer';
 import getVerticalShift from '../utilities/getVerticalShift';
@@ -16,6 +17,7 @@ function PeakAnnotations() {
   const activeSpectrum = useActiveSpectrum();
   const { scaleX, scaleY } = useScaleChecked();
   const spectrum = useSpectrum(emptyData) as Datum1D;
+  const peaksViewState = useActiveSpectrumPeaksViewState();
 
   const Peaks = useMemo(() => {
     const getVerticalAlign = () => {
@@ -24,7 +26,7 @@ function PeakAnnotations() {
     if (
       !spectrum?.peaks?.values ||
       !spectrum.display.isVisible ||
-      !spectrum.display.isPeaksMarkersVisible
+      !peaksViewState.isPeaksVisible
     ) {
       return null;
     }
@@ -45,7 +47,17 @@ function PeakAnnotations() {
         ))}
       </g>
     );
-  }, [spectrum, verticalAlign, activeSpectrum?.index, scaleX, scaleY]);
+  }, [
+    spectrum.peaks.values,
+    spectrum.display.isVisible,
+    spectrum.id,
+    spectrum.info.nucleus,
+    peaksViewState.isPeaksVisible,
+    verticalAlign,
+    activeSpectrum?.index,
+    scaleX,
+    scaleY,
+  ]);
 
   return (
     <g className="peaks" clipPath={`url(#${displayerKey}clip-chart-1d)`}>

src/component/1d/peaks/PeaksShapes.tsx

@@ -1,5 +1,6 @@
 import { Datum1D } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
+import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
 import useSpectrum from '../../hooks/useSpectrum';
 import { useActiveSpectrum } from '../../reducer/Reducer';
 import getVerticalShift from '../utilities/getVerticalShift';
@@ -9,15 +10,8 @@ import { usePeakShapesPath } from './usePeakShapesPath';
 const emptyData = { peaks: {}, display: {} };
 
 function PeaksShapes() {
-  const {
-    verticalAlign,
-    displayerKey,
-    toolOptions: {
-      data: {
-        peaksOptions: { showPeaksShapes, showPeaksSum },
-      },
-    },
-  } = useChartData();
+  const { verticalAlign, displayerKey } = useChartData();
+  const { showPeaksShapes, showPeaksSum } = useActiveSpectrumPeaksViewState();
   const activeSpectrum = useActiveSpectrum();
   const spectrum = useSpectrum(emptyData) as Datum1D;
 

src/component/2d/ft/Contours.tsx

@@ -32,7 +32,7 @@ interface ContoursInnerProps {
 
 function usePath(datum: Datum2D, contours) {
   const { margin, width, height, xDomain, yDomain } = useChartData();
-  const { xShift, yShift } = getShift(datum);
+  const shift = getShift(datum);
 
   const _scaleX = get2DXScale({ margin, width, xDomain });
   const _scaleY = get2DYScale({ margin, height, yDomain });
@@ -43,25 +43,25 @@ function usePath(datum: Datum2D, contours) {
       if (lines.length < 1e6) {
         for (let i = 0; i < lines.length; i += 4) {
           pathBuilder.moveTo(
-            _scaleX(lines[i] + xShift),
-            _scaleY(lines[i + 1] + yShift),
+            _scaleX(lines[i] + shift.x),
+            _scaleY(lines[i + 1] + shift.y),
           );
           pathBuilder.lineTo(
-            _scaleX(lines[i + 2] + xShift),
-            _scaleY(lines[i + 3] + yShift),
+            _scaleX(lines[i + 2] + shift.x),
+            _scaleY(lines[i + 3] + shift.y),
           );
         }
       }
     } else {
       pathBuilder.moveTo(
-        _scaleX(element[0].x + xShift),
-        _scaleY(element[0].y + yShift),
+        _scaleX(element[0].x + shift.x),
+        _scaleY(element[0].y + shift.y),
       );
 
       for (let j = 1; j < element.length; j++) {
         pathBuilder.lineTo(
-          _scaleX(element[j].x + xShift),
-          _scaleY(element[j].y + yShift),
+          _scaleX(element[j].x + shift.x),
+          _scaleY(element[j].y + shift.y),
         );
       }
     }

src/component/elements/ActiveButton.tsx

@@ -9,15 +9,20 @@ const styles = css`
   border: none;
   border-radius: 5px;
   padding: 5px;
+  &:not([disabled]) {
+    &:hover {
+      background-color: lightgray !important;
+      color: black !important;
+    }
 
-  &:hover {
-    background-color: lightgray !important;
-    color: black !important;
+    &.toggle-active {
+      background-color: gray;
+      color: white;
+    }
   }
 
-  &.toggle-active {
-    background-color: gray;
-    color: white;
+  &:disabled {
+    opacity: 0.3;
   }
 `;
 

src/component/elements/IsotopesViewer.tsx

@@ -4,13 +4,17 @@ interface IsotopesViewerProps extends HTMLAttributes<HTMLDivElement> {
   value?: string;
 }
 
+function renderIsotope(value: string) {
+  return value.replace(/(?<isotope>\d+)/g, '<sup>$<isotope></sup>');
+}
+
 function IsotopesViewer({ value = '', ...othersProps }: IsotopesViewerProps) {
   return (
     <div
       {...othersProps}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
-        __html: value.replace(/(?<isotope>\d+)/g, '<sup>$<isotope></sup>'),
+        __html: renderIsotope(value),
       }}
     />
   );