refactor: view state interfaces partially

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

@@ -7,9 +7,9 @@ import generateJGraphData, {
 import { Signal1D } from '../../../data/types/data1d';
 import { Datum1D } from '../../../data/types/data1d/Datum1D';
 import { useChartData } from '../../context/ChartContext';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
-import { rangeStateInit } from '../../reducer/Reducer';
 
 import { JGraphContextProvider } from './JGraphContext';
 import { JGraphVerticalAxis } from './JGraphVerticalAxis';
@@ -40,14 +40,11 @@ export default function JGraph() {
   const {
     height,
     view: {
-      ranges: rangeState,
       spectra: { activeTab },
     },
   } = useChartData();
   const spectrum = useSpectrum() as Datum1D;
-
-  const { showJGraph } =
-    rangeState.find((r) => r.spectrumID === spectrum?.id) || rangeStateInit;
+  const { ranges: rangesView } = useActiveSpectrum1DViewState();
 
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
@@ -79,7 +76,7 @@ export default function JGraph() {
     return { scaleY, height: graphHeight, maxValue };
   }, [graphHeight, scaleY, maxValue]);
 
-  if (!showJGraph || !spectrum?.display?.isVisible) return null;
+  if (!rangesView?.showJGraph || !spectrum?.display?.isVisible) return null;
 
   return (
     <JGraphContextProvider value={JGraphState}>

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

@@ -4,7 +4,7 @@ import { Datum1D } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
 import { useScaleChecked } from '../../context/ScaleContext';
 import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
 
 import PeakAnnotation from './PeakAnnotation';
@@ -16,13 +16,13 @@ function PeakAnnotations() {
   const activeSpectrum = useActiveSpectrum();
   const { scaleX, scaleY, shiftY } = useScaleChecked();
   const spectrum = useSpectrum(emptyData) as Datum1D;
-  const peaksViewState = useActiveSpectrumPeaksViewState();
+  const { peaks: PeaksViewState } = useActiveSpectrum1DViewState();
 
   const Peaks = useMemo(() => {
     if (
       !spectrum?.peaks?.values ||
       !spectrum.display.isVisible ||
-      !peaksViewState.isPeaksVisible
+      !PeaksViewState.isPeaksVisible
     ) {
       return null;
     }
@@ -48,7 +48,7 @@ function PeakAnnotations() {
     spectrum.display.isVisible,
     spectrum.id,
     spectrum.info.nucleus,
-    peaksViewState.isPeaksVisible,
+    PeaksViewState.isPeaksVisible,
     activeSpectrum?.index,
     shiftY,
     scaleX,

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

@@ -2,7 +2,7 @@ import { Datum1D } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
 import { useScale } from '../../context/ScaleContext';
 import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
 
 import { usePeakShapesPath } from './usePeakShapesPath';
@@ -12,7 +12,9 @@ const emptyData = { peaks: {}, display: {} };
 function PeaksShapes() {
   const { displayerKey } = useChartData();
   const { shiftY } = useScale();
-  const { showPeaksShapes, showPeaksSum } = useActiveSpectrumPeaksViewState();
+  const {
+    peaks: { showPeaksShapes, showPeaksSum },
+  } = useActiveSpectrum1DViewState();
   const activeSpectrum = useActiveSpectrum();
   const spectrum = useSpectrum(emptyData) as Datum1D;
 

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

@@ -1,11 +1,10 @@
-import { Fragment, memo, useMemo } from 'react';
+import { Fragment, memo } from 'react';
 
 import { Datum1D, Ranges as RangesProps } from '../../../data/types/data1d';
 import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
+import { useActiveSpectrum1DViewState } from '../../hooks/useActiveSpectrum1DViewState';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useSpectrum from '../../hooks/useSpectrum';
-import { rangeStateInit } from '../../reducer/Reducer';
 
 import Range from './Range';
 import RangeIntegral from './RangeIntegral';
@@ -50,20 +49,13 @@ export default function Ranges() {
   const {
     displayerKey,
     view: {
-      ranges: rangeState,
       spectra: { activeTab },
     },
     toolOptions: { selectedTool },
   } = useChartData();
-  const activeSpectrum = useActiveSpectrum();
-  const { showMultiplicityTrees, showRangesIntegrals } = useMemo(
-    () =>
-      activeSpectrum
-        ? rangeState.find((r) => r.spectrumID === activeSpectrum.id) ||
-          rangeStateInit
-        : rangeStateInit,
-    [activeSpectrum, rangeState],
-  );
+  const {
+    ranges: { showMultiplicityTrees, showRangesIntegrals },
+  } = useActiveSpectrum1DViewState();
   const spectrum = useSpectrum() as Datum1D;
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
 

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

@@ -74,16 +74,14 @@ function usePath(datum: Datum2D, contours) {
 
 const useContoursLevel = (datum: Datum2D, sign: LevelSign) => {
   const {
-    view: {
-      zoom: { levels },
-    },
+    view: { spectra2D },
   } = useChartData();
   const {
     id,
     display: { contourOptions },
   } = datum;
   const defaultLevel = getDefaultContoursLevel(contourOptions);
-  const level = levels?.[id]?.[sign];
+  const level = spectra2D[id]?.contoursLevel?.[sign];
   return typeof level !== 'number' ? defaultLevel[sign] : level;
 };
 

src/component/2d/zones/Signal.tsx

@@ -7,20 +7,17 @@ import { buildID } from '../../../data/utilities/Concatenation';
 import { useAssignment } from '../../assignment/AssignmentsContext';
 import { useChartData } from '../../context/ChartContext';
 import { useHighlightData, useHighlight } from '../../highlight';
+import { ZonesViewState } from '../../reducer/Reducer';
 import { get2DXScale, get2DYScale } from '../utilities/scale';
 
 import SignalCrosshair from './SignalCrosshair';
 
 interface SignalProps {
   signal: Signal2D;
-  isVisible: {
-    signals?: boolean;
-    peaks?: boolean;
-    zones?: boolean;
-  };
+  zonesViewState: ZonesViewState;
 }
 
-function Signal({ signal, isVisible }: SignalProps) {
+function Signal({ signal, zonesViewState }: SignalProps) {
   const { margin, width, height, xDomain, yDomain } = useChartData();
   const scaleX = get2DXScale({ margin, width, xDomain });
   const scaleY = get2DYScale({ margin, height, yDomain });
@@ -57,7 +54,7 @@ function Signal({ signal, isVisible }: SignalProps) {
 
   return (
     <g className="zone-signal">
-      {isVisible.signals && (
+      {zonesViewState.showSignals && (
         <g>
           <SignalCrosshair signal={signal} />
           <circle
@@ -78,7 +75,7 @@ function Signal({ signal, isVisible }: SignalProps) {
         </g>
       )}
       <g className="zone-signal-peak" style={{ pointerEvents: 'none' }}>
-        {isVisible.peaks &&
+        {zonesViewState.showPeaks &&
           signal.peaks &&
           signal.peaks.map((peak, i) => (
             <circle

src/component/2d/zones/Zone.tsx

@@ -7,6 +7,7 @@ import { checkZoneKind } from '../../../data/utilities/ZoneUtilities';
 import { useAssignment } from '../../assignment/AssignmentsContext';
 import { useChartData } from '../../context/ChartContext';
 import { HighlightEventSource, useHighlight } from '../../highlight';
+import { ZonesViewState } from '../../reducer/Reducer';
 import { get2DXScale, get2DYScale } from '../utilities/scale';
 
 import Signal from './Signal';
@@ -44,12 +45,10 @@ const stylesHighlighted = css`
 
 interface ZoneProps {
   zoneData: ZoneDataProps;
-  isVisible: {
-    zones: boolean;
-  };
+  zonesViewState: ZonesViewState;
 }
 
-function Zone({ zoneData, isVisible }: ZoneProps) {
+function Zone({ zoneData, zonesViewState }: ZoneProps) {
   const { x, y, id, signals } = zoneData;
   const assignmentZone = useAssignment(id);
   const highlightZone = useHighlight([assignmentZone.id], {
@@ -86,7 +85,7 @@ function Zone({ zoneData, isVisible }: ZoneProps) {
         highlightZone.hide();
       }}
     >
-      {isVisible.zones && (
+      {zonesViewState.showZones && (
         <g transform={`translate(${scaleX(x2)},${scaleY(y1)})`}>
           <rect
             x="0"
@@ -100,7 +99,11 @@ function Zone({ zoneData, isVisible }: ZoneProps) {
         </g>
       )}
       {signals.map((_signal, i) => (
-        <Signal key={`${id + i}`} signal={_signal} isVisible={isVisible} />
+        <Signal
+          key={`${id + i}`}
+          signal={_signal}
+          zonesViewState={zonesViewState}
+        />
       ))}
     </g>
   );

src/component/2d/zones/Zones.tsx

@@ -1,39 +1,35 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 import {
   Datum2D,
   Display2D,
   Zones as ZonesProps,
 } from '../../../data/types/data2d';
 import { useChartData } from '../../context/ChartContext';
+import { useActiveSpectrum2DViewState } from '../../hooks/useActiveSpectrum2DViewState';
 import useSpectrum from '../../hooks/useSpectrum';
-import { zoneStateInit } from '../../reducer/Reducer';
-
+import { ZonesViewState } from '../../reducer/Reducer';
 import Zone from './Zone';
 
 interface ZonesInnerProps {
   zones: ZonesProps;
   display: Display2D;
   displayerKey: string;
-  isVisible: {
-    zones: boolean;
-    signals: boolean;
-    peaks: boolean;
-  };
+  zonesViewState: ZonesViewState;
 }
 
 function ZonesInner({
   zones,
   display,
   displayerKey,
-  isVisible,
+  zonesViewState,
 }: ZonesInnerProps) {
   return (
     <g clipPath={`url(#${displayerKey}clip-chart-2d)`} className="2D-Zones">
       {display.isVisible &&
         zones.values.map((zone) => (
           <g className="zone" key={zone.id}>
-            <Zone zoneData={zone} isVisible={isVisible} />
+            <Zone zoneData={zone} zonesViewState={zonesViewState} />
           </g>
         ))}
     </g>
@@ -45,22 +41,12 @@ const MemoizedZones = memo(ZonesInner);
 const emptyData = { zones: {}, display: {} };
 
 export default function Zones() {
-  const {
-    displayerKey,
-    view: { zones: zoneState },
-  } = useChartData();
-
-  const { zones, display, id } = useSpectrum(emptyData) as Datum2D;
+  const { displayerKey } = useChartData();
 
-  const isVisible = useMemo(() => {
-    const { showPeaks, showSignals, showZones } =
-      zoneState.find((r) => r.spectrumID === id) || zoneStateInit;
-    return {
-      zones: showZones,
-      signals: showSignals,
-      peaks: showPeaks,
-    };
-  }, [id, zoneState]);
+  const { zones, display } = useSpectrum(emptyData) as Datum2D;
+  const { zones: zonesViewState } = useActiveSpectrum2DViewState();
 
-  return <MemoizedZones {...{ zones, display, displayerKey, isVisible }} />;
+  return (
+    <MemoizedZones {...{ zones, display, displayerKey, zonesViewState }} />
+  );
 }

src/component/hooks/useActiveSpectrum1DViewState.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+import { useChartData } from '../context/ChartContext';
+import {
+  ViewSpectra1D,
+  getDefaultSpectra1DViewState,
+} from '../reducer/Reducer';
+
+import { useActiveSpectrum } from './useActiveSpectrum';
+
+export function useActiveSpectrum1DViewState(): ViewSpectra1D {
+  const activeSpectrum = useActiveSpectrum();
+  const {
+    view: { spectra1D },
+  } = useChartData();
+  return useMemo(() => {
+    if (activeSpectrum?.id && spectra1D?.[activeSpectrum.id]) {
+      return spectra1D[activeSpectrum.id];
+    } else {
+      return getDefaultSpectra1DViewState();
+    }
+  }, [activeSpectrum?.id, spectra1D]);
+}

src/component/hooks/useActiveSpectrum2DViewState.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import { useChartData } from '../context/ChartContext';
+import {
+  getDefaultSpectra2DViewState,
+  ViewSpectra2D,
+} from '../reducer/Reducer';
+
+import { useActiveSpectrum } from './useActiveSpectrum';
+
+export function useActiveSpectrum2DViewState(): ViewSpectra2D {
+  const activeSpectrum = useActiveSpectrum();
+  const {
+    view: { spectra2D },
+  } = useChartData();
+
+  return useMemo(() => {
+    if (activeSpectrum?.id && spectra2D?.[activeSpectrum.id]) {
+      return spectra2D[activeSpectrum.id];
+    } else {
+      return getDefaultSpectra2DViewState();
+    }
+  }, [activeSpectrum?.id, spectra2D]);
+}