From 6864ca317d45be0dd0fa4ed7671fd54ba3c4e727 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Tue, 21 May 2024 17:24:26 +0200 Subject: [PATCH] feat: toggle stocsy --- src/component/1d/matrix/Stocsy.tsx | 9 +++- src/component/context/DispatchContext.tsx | 2 + .../MatrixGenerationPanel.tsx | 12 +++-- src/component/reducer/Reducer.ts | 16 +++++++ .../actions/MatrixGenerationActions.ts | 44 +++++++++++++++++++ src/component/toolbar/ToolBar.tsx | 2 +- 6 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 src/component/reducer/actions/MatrixGenerationActions.ts diff --git a/src/component/1d/matrix/Stocsy.tsx b/src/component/1d/matrix/Stocsy.tsx index 709aff1b21..d39a3c8197 100644 --- a/src/component/1d/matrix/Stocsy.tsx +++ b/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 ; +} +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; diff --git a/src/component/context/DispatchContext.tsx b/src/component/context/DispatchContext.tsx index fb4626c5ed..aa63a336ec 100644 --- a/src/component/context/DispatchContext.tsx +++ b/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 diff --git a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx index a92d3b6058..6fffa47246 100644 --- a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx +++ b/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>(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: , - tooltip: 'Toggle Stocsy', - onClick: handleExportAsMatrix, + tooltip: `${booleanToString(!showStocsy)} stocsy`, + onClick: handleToggleStocsy, + active: showStocsy, }, ]} rightButtons={[ diff --git a/src/component/reducer/Reducer.ts b/src/component/reducer/Reducer.ts index a8f5603e8a..230f2fd5f4 100644 --- a/src/component/reducer/Reducer.ts +++ b/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, 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'); diff --git a/src/component/reducer/actions/MatrixGenerationActions.ts b/src/component/reducer/actions/MatrixGenerationActions.ts new file mode 100644 index 0000000000..98393c9c26 --- /dev/null +++ b/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; + } +>; + +export type MatrixGenerationActions = ToggleMatrixGenerationViewAction; + +function hideSpectra(draft: Draft) { + 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, + action: ToggleMatrixGenerationViewAction, +) { + const { key } = action.payload; + draft.matrixGenerationOptions[key] = !draft.matrixGenerationOptions[key]; + + if (['showStocsy', 'showStocsy'].includes(key)) { + hideSpectra(draft); + } +} + +export { toggleMatrixGenerationViewProperty }; diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 37905e6166..f4182febff 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/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();