feat: toggle stocsy

src/component/1d/matrix/Stocsy.tsx

@@ -22,6 +22,14 @@ interface StocsyProps {
 const componentId = 'stocsy';
 
 export function Stocsy() {
+  const {
+    matrixGenerationOptions: { showStocsy },
+  } = useChartData();
+  if (!showStocsy) return null;
+
+  return <InnerStocsy />;
+}
+export function InnerStocsy() {
   const matrix = useMatrix();
   if (!matrix) return null;
   const { x, matrixY } = matrix;
@@ -62,7 +70,6 @@ const RenderStocsyAsCanvas = withExportRegister((props: StocsyProps) => {
       ctx.fillStyle = 'background-color: transparent';
     }
 
-    // Function to draw lines in a rectangle
     function drawLinesInRect(x1, x2, y1, y2, color) {
       if (!ctx) return;
       ctx.strokeStyle = color;

src/component/context/DispatchContext.tsx

@@ -8,6 +8,7 @@ import { DomainActions } from '../reducer/actions/DomainActions';
 import { FiltersActions } from '../reducer/actions/FiltersActions';
 import { IntegralsActions } from '../reducer/actions/IntegralsActions';
 import { LoadActions } from '../reducer/actions/LoadActions';
+import { MatrixGenerationActions } from '../reducer/actions/MatrixGenerationActions';
 import { MoleculeActions } from '../reducer/actions/MoleculeActions';
 import { PeaksActions } from '../reducer/actions/PeaksActions';
 import { PreferencesActions } from '../reducer/actions/PreferencesActions';
@@ -35,6 +36,7 @@ export type Action =
   | ZonesActions
   | FiltersActions
   | CorrelationsActions
+  | MatrixGenerationActions
   | ActionType<'INITIALIZE_NMRIUM'>
   | ActionType<'SECRET_THROW_ERROR', { randomNumber: number }>;
 // // eslint-disable-next-line @typescript-eslint/ban-types

src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx

@@ -21,6 +21,7 @@ import FormikOnChange from '../../elements/formik/FormikOnChange';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import useToolsFunctions from '../../hooks/useToolsFunctions';
 import { options } from '../../toolbar/ToolTypes';
+import { booleanToString } from '../../utility/booleanToString';
 import { exportAsMatrix } from '../../utility/export';
 import { tablePanelStyle } from '../extra/BasicPanelStyle';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
@@ -74,6 +75,7 @@ function MatrixGenerationPanel() {
     },
     xDomain,
     data,
+    matrixGenerationOptions: { showStocsy },
   } = useChartData();
 
   const formRef = useRef<FormikProps<any>>(null);
@@ -92,7 +94,10 @@ function MatrixGenerationPanel() {
     exportAsMatrix(data, spectraPreferences?.columns || [], 'Spectra Matrix');
   }
   function handleToggleStocsy() {
-    exportAsMatrix(data, spectraPreferences?.columns || [], 'Spectra Matrix');
+    dispatch({
+      type: 'TOGGLE_MATRIX_GENERATION_VIEW_PROPERTY',
+      payload: { key: 'showStocsy' },
+    });
   }
 
   function handleSave(options) {
@@ -127,8 +132,9 @@ function MatrixGenerationPanel() {
           },
           {
             icon: <IoAnalytics />,
-            tooltip: 'Toggle Stocsy',
-            onClick: handleExportAsMatrix,
+            tooltip: `${booleanToString(!showStocsy)} stocsy`,
+            onClick: handleToggleStocsy,
+            active: showStocsy,
           },
         ]}
         rightButtons={[

src/component/reducer/Reducer.ts

@@ -20,6 +20,7 @@ import * as DomainActions from './actions/DomainActions';
 import * as FiltersActions from './actions/FiltersActions';
 import * as IntegralsActions from './actions/IntegralsActions';
 import * as LoadActions from './actions/LoadActions';
+import * as MatrixGenerationActions from './actions/MatrixGenerationActions';
 import * as MoleculeActions from './actions/MoleculeActions';
 import * as PeaksActions from './actions/PeaksActions';
 import * as PreferencesActions from './actions/PreferencesActions';
@@ -67,6 +68,11 @@ export interface TwoDimensionPhaseCorrection {
   addTracesToBothDirections: boolean;
 }
 
+export interface MatrixGenerationOptions {
+  showBoxPlot: boolean;
+  showStocsy: boolean;
+}
+
 export const getDefaultTwoDimensionsPhaseCorrectionTraceOptions =
   (): TwoDimensionPhaseCorrection['traces'] => {
     const directions: [TraceDirection, TraceDirection] = [
@@ -172,6 +178,10 @@ export const getInitialState = (): State => ({
     },
   },
   usedColors: { '1d': [], '2d': [] },
+  matrixGenerationOptions: {
+    showBoxPlot: false,
+    showStocsy: false,
+  },
 });
 
 export const initialState = getInitialState();
@@ -367,6 +377,7 @@ export interface State {
   usedColors: UsedColors;
 
   errorAction?: any; // should be an Error
+  matrixGenerationOptions: MatrixGenerationOptions;
 }
 
 export function initState(state: State): State {
@@ -720,6 +731,11 @@ function innerSpectrumReducer(draft: Draft<State>, action: Action) {
 
       case 'SET_AUTOMATIC_ASSIGNMENTS':
         return AssignmentsActions.handleSetAutomaticAssignments(draft, action);
+      case 'TOGGLE_MATRIX_GENERATION_VIEW_PROPERTY':
+        return MatrixGenerationActions.toggleMatrixGenerationViewProperty(
+          draft,
+          action,
+        );
 
       case 'SECRET_THROW_ERROR': {
         throw new Error('Error thrown in main reducer');

src/component/reducer/actions/MatrixGenerationActions.ts

@@ -0,0 +1,44 @@
+import { Draft } from 'immer';
+
+import { FilterType } from '../../utility/filterType';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
+import { MatrixGenerationOptions, State } from '../Reducer';
+import { ActionType } from '../types/ActionType';
+
+type ToggleMatrixGenerationViewAction = ActionType<
+  'TOGGLE_MATRIX_GENERATION_VIEW_PROPERTY',
+  {
+    key: keyof FilterType<MatrixGenerationOptions, boolean>;
+  }
+>;
+
+export type MatrixGenerationActions = ToggleMatrixGenerationViewAction;
+
+function hideSpectra(draft: Draft<State>) {
+  const {
+    data: spectra,
+    view: {
+      spectra: { activeTab },
+    },
+  } = draft;
+
+  const spectraPerNucleus = getSpectraByNucleus(activeTab, spectra);
+
+  for (const spectrum of spectraPerNucleus) {
+    spectrum.display.isVisible = false;
+  }
+}
+
+function toggleMatrixGenerationViewProperty(
+  draft: Draft<State>,
+  action: ToggleMatrixGenerationViewAction,
+) {
+  const { key } = action.payload;
+  draft.matrixGenerationOptions[key] = !draft.matrixGenerationOptions[key];
+
+  if (['showStocsy', 'showStocsy'].includes(key)) {
+    hideSpectra(draft);
+  }
+}
+
+export { toggleMatrixGenerationViewProperty };

src/component/toolbar/ToolBar.tsx

@@ -170,7 +170,7 @@ export default function ToolBar() {
   function exportHandler(data) {
     switch (data?.id) {
       case 'svg':
-        void saveAsSVGHandler();
+        saveAsSVGHandler();
         break;
       case 'png':
         void saveAsPNGHandler();