From 4038357e1b937bf02a439702672b0ff630a3c4ca Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Tue, 30 Sep 2025 10:59:58 +0200 Subject: [PATCH] refactor: inset action buttons hide ranges actions if no ranges, peaks actions if no peaks, and integrals actions if no integrals --- src/component/1d/inset/DraggableInset.tsx | 220 +++++++++++++++------- 1 file changed, 153 insertions(+), 67 deletions(-) diff --git a/src/component/1d/inset/DraggableInset.tsx b/src/component/1d/inset/DraggableInset.tsx index 3f181819b9..2b0e646679 100644 --- a/src/component/1d/inset/DraggableInset.tsx +++ b/src/component/1d/inset/DraggableInset.tsx @@ -15,12 +15,14 @@ import { FaSitemap, FaTimes } from 'react-icons/fa'; import { LuMessageSquareText } from 'react-icons/lu'; import { Rnd } from 'react-rnd'; +import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/isSpectrum1D.ts'; import { SVGRootContainer } from '../../1d-2d/components/SVGRootContainer.js'; import { useDispatch } from '../../context/DispatchContext.js'; import { useGlobal } from '../../context/GlobalContext.js'; import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js'; import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js'; import { useSVGUnitConverter } from '../../hooks/useSVGUnitConverter.js'; +import useSpectrum from '../../hooks/useSpectrum.ts'; import { useCheckExportStatus } from '../../hooks/useViewportSize.js'; import { booleanToString } from '../../utility/booleanToString.js'; import type { FilterType } from '../../utility/filterType.js'; @@ -234,8 +236,105 @@ export function DraggableInset(props: Inset) { ); } +type PeaksAction = 'peaks/showPeaks' | 'peaks/displayingMode'; +type RangesAction = + | 'ranges/showPeaks' + | 'ranges/displayingMode' + | 'ranges/showMultiplicityTrees' + | 'ranges/showIntegrals' + | 'ranges/showIntegralsValues' + | 'ranges/showAssignmentsLabels'; +type IntegralsAction = 'integrals/showIntegrals'; + +type Actions = PeaksAction | RangesAction | IntegralsAction; + +function createPeaksActionsButtons( + view: InsetView, + onClick: (id: PeaksAction) => void, +) { + return [ + { + icon: , + title: `${booleanToString(!view.peaks.showPeaks)} peaks`, + onClick: () => onClick('peaks/showPeaks'), + active: view.peaks.showPeaks, + }, + { + icon: , + title: + view.peaks.displayingMode === 'spread' + ? 'Top of the peak' + : 'Top of the spectrum', + onClick: () => onClick('peaks/displayingMode'), + active: view.peaks.displayingMode === 'spread', + }, + ]; +} +function createIntegralsActionsButtons( + view: InsetView, + onClick: (id: IntegralsAction) => void, +) { + return [ + { + icon: , + title: `${booleanToString(!view.integrals.showIntegralsValues)} integrals values`, + onClick: () => onClick('integrals/showIntegrals'), + active: view.integrals.showIntegralsValues, + }, + ]; +} +function createRangesActionsButtons( + view: InsetView, + onClick: (id: RangesAction) => void, +) { + return [ + { + icon: , + title: `${booleanToString(!view.ranges.showMultiplicityTrees)} multiplicity trees in spectrum`, + onClick: () => onClick('ranges/showMultiplicityTrees'), + active: view.ranges.showMultiplicityTrees, + }, + { + icon: , + title: `${booleanToString(!view.ranges.showIntegrals)} integrals`, + onClick: () => onClick('ranges/showIntegrals'), + active: view.ranges.showIntegrals, + }, + { + icon: , + title: `${booleanToString(!view.ranges.showIntegralsValues)} integrals values`, + onClick: () => onClick('ranges/showIntegralsValues'), + active: view.ranges.showIntegralsValues, + }, + + { + id: 'ranges/showPeaks', + icon: , + title: `${booleanToString(!view.ranges.showPeaks)} peaks`, + onClick: () => onClick('ranges/showPeaks'), + active: view.ranges.showPeaks, + }, + { + icon: , + title: + view.ranges.displayingMode === 'spread' + ? 'Top of the peak' + : 'Top of the spectrum', + onClick: () => onClick('ranges/displayingMode'), + active: view.ranges.displayingMode === 'spread', + }, + { + icon: , + title: `${booleanToString(!view.ranges.showAssignmentsLabels)} assignments labels`, + onClick: () => onClick('ranges/showAssignmentsLabels'), + active: view.ranges.showAssignmentsLabels, + }, + ]; +} + function useActionButtons(insetKey: string, view: InsetView) { const dispatch = useDispatch(); + const spectrum = useSpectrum(); function handleRemove() { dispatch({ @@ -276,10 +375,9 @@ function useActionButtons(insetKey: string, view: InsetView) { }); } - const actionsButtons: ActionsButtonsPopoverProps['buttons'] = [ + let actionsButtons: ActionsButtonsPopoverProps['buttons'] = [ { icon: , - intent: 'none', title: 'Move inset', style: { cursor: 'move' }, @@ -291,74 +389,62 @@ function useActionButtons(insetKey: string, view: InsetView) { title: 'Remove inset', onClick: handleRemove, }, - { elementType: 'separator' }, + ]; - { - icon: , - title: `${booleanToString(!view.peaks.showPeaks)} peaks`, - onClick: () => handleTogglePeaksViewProperty('showPeaks'), - active: view.peaks.showPeaks, - }, - { - icon: , - title: - view.peaks.displayingMode === 'spread' - ? 'Top of the peak' - : 'Top of the spectrum', - onClick: () => handleToggleInsetsDisplayingPeaksMode('peaks'), - active: view.peaks.displayingMode === 'spread', - }, - { elementType: 'separator' }, + if (!isSpectrum1D(spectrum)) { + return actionsButtons; + } - { - icon: , - title: `${booleanToString(!view.ranges.showMultiplicityTrees)} multiplicity trees in spectrum`, - onClick: () => handleToggleRangesViewProperty('showMultiplicityTrees'), - active: view.ranges.showMultiplicityTrees, - }, - { - icon: , - title: `${booleanToString(!view.ranges.showIntegrals)} integrals`, - onClick: () => handleToggleRangesViewProperty('showIntegrals'), - active: view.ranges.showIntegrals, - }, - { - icon: , - title: `${booleanToString(!view.ranges.showIntegralsValues)} integrals values`, - onClick: () => handleToggleRangesViewProperty('showIntegralsValues'), - active: view.ranges.showIntegralsValues, - }, + const hasRanges = spectrum.ranges.values.length > 0; + const hasIntegrals = spectrum.integrals.values.length > 0; + const hasPeaks = spectrum.peaks.values.length > 0; + + const handlers: Record void> = { + 'peaks/showPeaks': () => handleTogglePeaksViewProperty('showPeaks'), + 'peaks/displayingMode': () => + handleToggleInsetsDisplayingPeaksMode('peaks'), + 'ranges/showMultiplicityTrees': () => + handleToggleRangesViewProperty('showMultiplicityTrees'), + 'ranges/showIntegrals': () => + handleToggleRangesViewProperty('showIntegrals'), + 'ranges/showIntegralsValues': () => + handleToggleRangesViewProperty('showIntegralsValues'), + 'ranges/showPeaks': () => handleToggleRangesViewProperty('showPeaks'), + 'ranges/displayingMode': () => + handleToggleInsetsDisplayingPeaksMode('ranges'), + 'ranges/showAssignmentsLabels': () => + handleToggleRangesViewProperty('showAssignmentsLabels'), + 'integrals/showIntegrals': () => + handleToggleIntegralsViewProperty('showIntegralsValues'), + }; + + function handleClick(id: Actions) { + handlers[id]?.(); + } - { - id: 'ranges-toggle-peaks', - icon: , - title: `${booleanToString(!view.ranges.showPeaks)} peaks`, - onClick: () => handleToggleRangesViewProperty('showPeaks'), - active: view.ranges.showPeaks, - }, - { - icon: , - title: - view.ranges.displayingMode === 'spread' - ? 'Top of the peak' - : 'Top of the spectrum', - onClick: () => handleToggleInsetsDisplayingPeaksMode('ranges'), - active: view.ranges.displayingMode === 'spread', - }, - { - icon: , - title: `${booleanToString(!view.ranges.showAssignmentsLabels)} assignments labels`, - onClick: () => handleToggleRangesViewProperty('showAssignmentsLabels'), - active: view.ranges.showAssignmentsLabels, - }, - { elementType: 'separator' }, - { - icon: , - title: `${booleanToString(!view.integrals.showIntegralsValues)} integrals values`, - onClick: () => handleToggleIntegralsViewProperty('showIntegralsValues'), - active: view.integrals.showIntegralsValues, - }, - ]; + if (hasPeaks) { + actionsButtons = [ + ...actionsButtons, + { elementType: 'separator' }, + ...createPeaksActionsButtons(view, handleClick), + ]; + } + + if (hasRanges) { + actionsButtons = [ + ...actionsButtons, + { elementType: 'separator' }, + ...createRangesActionsButtons(view, handleClick), + ]; + } + + if (hasIntegrals) { + actionsButtons = [ + ...actionsButtons, + { elementType: 'separator' }, + ...createIntegralsActionsButtons(view, handleClick), + ]; + } return actionsButtons; }