Skip to content

Commit

Permalink
refactor: toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
hamed-musallam committed Dec 7, 2023
1 parent 3fd0e31 commit b5e0b74
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 164 deletions.
2 changes: 1 addition & 1 deletion src/component/hooks/useCheckToolsVisibility.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import useSpectrum from './useSpectrum';

type SpectrumInfo = Info1D | Info2D;

interface CheckOptions {
export interface CheckOptions {

Check warning on line 15 in src/component/hooks/useCheckToolsVisibility.ts

View check run for this annotation

Codecov / codecov/patch

src/component/hooks/useCheckToolsVisibility.ts#L15

Added line #L15 was not covered by tests
checkSpectrumType?: boolean;
checkMode?: boolean;
extraInfoCheckParameters?: SpectrumInfo;
Expand Down
291 changes: 128 additions & 163 deletions src/component/toolbar/FunctionToolBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,17 @@ import {
SvgNmrRangePicking,
SvgNmrZeroFilling,
} from 'cheminfo-font';
import { NMRiumToolBarPreferences } from 'nmr-load-save';

Check warning on line 12 in src/component/toolbar/FunctionToolBar.tsx

View check run for this annotation

Codecov / codecov/patch

src/component/toolbar/FunctionToolBar.tsx#L12

Added line #L12 was not covered by tests
import { useState, useEffect, useCallback, memo } from 'react';
import { FaSearchPlus, FaExpand, FaDiceFour } from 'react-icons/fa';
import { Toolbar } from 'react-science/ui';
import { Toolbar, ToolbarItemProps } from 'react-science/ui';

Check warning on line 15 in src/component/toolbar/FunctionToolBar.tsx

View check run for this annotation

Codecov / codecov/patch

src/component/toolbar/FunctionToolBar.tsx#L15

Added line #L15 was not covered by tests

import { useChartData } from '../context/ChartContext';
import { useDispatch } from '../context/DispatchContext';
import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
import {
CheckOptions,
useCheckToolsVisibility,
} from '../hooks/useCheckToolsVisibility';

Check warning on line 22 in src/component/toolbar/FunctionToolBar.tsx

View check run for this annotation

Codecov / codecov/patch

src/component/toolbar/FunctionToolBar.tsx#L19-L22

Added lines #L19 - L22 were not covered by tests
import useDatumWithSpectraStatistics from '../hooks/useDatumWithSpectraStatistics';
import useToolsFunctions from '../hooks/useToolsFunctions';

Expand All @@ -26,6 +30,15 @@ interface FunctionToolBarInnerProps {
ftCounter: number;
}

interface ToolItemConfig {
id: keyof NMRiumToolBarPreferences;
label: string;
onClick?: () => void;
icon: ToolbarItemProps['icon'];
checkOptions?: CheckOptions;
condition?: boolean;
}

Check warning on line 41 in src/component/toolbar/FunctionToolBar.tsx

View check run for this annotation

Codecov / codecov/patch

src/component/toolbar/FunctionToolBar.tsx#L33-L41

Added lines #L33 - L41 were not covered by tests
function FunctionToolBarInner({
defaultValue,
ftCounter,
Expand Down Expand Up @@ -67,169 +80,121 @@ function FunctionToolBarInner({
});
}, [dispatch]);

const toolItems: ToolItemConfig[] = [
{
id: 'zoom',
label: options.zoom.label,
icon: <FaSearchPlus />,
},
{
id: 'zoomOut',
label: options.zoomOut.label,
onClick: handleFullZoomOut,
icon: <FaExpand />,
},
{
id: 'peakPicking',
label: `${options.peakPicking.label} ( Press p )`,
icon: <SvgNmrPeakPicking />,
},
{
id: 'integral',
label: `${options.integral.label} ( Press i )`,
icon: <SvgNmrIntegrate />,
},
{
id: 'zonePicking',
label: `${options.zonePicking.label} ( Press r )`,
icon: <FaDiceFour />,
},
{
id: 'slicing',
label: options.slicing.label,
icon: <p>Slic</p>,
},
{
id: 'rangePicking',
label: `${options.rangePicking.label} ( Press r )`,
icon: <SvgNmrRangePicking />,
},
{
id: 'multipleSpectraAnalysis',
label: options.multipleSpectraAnalysis.label,
icon: <SvgNmrMultipleAnalysis />,
checkOptions: { checkSpectrumType: false },
condition: ftCounter > 1,
},
{
id: 'apodization',
label: `${options.apodization.label} (Press a)`,
icon: <SvgNmrApodization />,
},
{
id: 'zeroFilling',
label: `${options.zeroFilling.label} ( Press z )`,
icon: <SvgNmrZeroFilling />,
},
{
id: 'phaseCorrection',
label: `${options.phaseCorrection.label} ( Press a )`,
icon: <SvgNmrPhaseCorrection />,
},
{
id: 'phaseCorrectionTwoDimensions',
label: `${options.phaseCorrectionTwoDimensions.label} ( Press a )`,
icon: <SvgNmrPhaseCorrection />,
},
{
id: 'baselineCorrection',
label: `${options.baselineCorrection.label} ( Press b )`,
icon: <SvgNmrBaselineCorrection />,
},
{
id: 'exclusionZones',
label: `${options.exclusionZones.label} ( Press e )`,
icon: <SvgNmrMultipleAnalysis />,
checkOptions: { checkSpectrumType: false },
condition: ftCounter > 0,
},
{
id: 'fft',
label: `${options.fft.label} ( Press t )`,
onClick: handleOnFFTFilter,
icon: <SvgNmrFourierTransform />,
},
{
id: 'fftDimension1',
label: options.fftDimension1.label,
onClick: handleFFtDimension1Filter,
icon: <SvgNmrFourierTransform />,
},
{
id: 'fftDimension2',
label: options.fftDimension2.label,
onClick: handleFFtDimension2Filter,
icon: <SvgNmrFourierTransform />,
},
];

Check warning on line 178 in src/component/toolbar/FunctionToolBar.tsx

View check run for this annotation

Codecov / codecov/patch

src/component/toolbar/FunctionToolBar.tsx#L83-L178

Added lines #L83 - L178 were not covered by tests
return (
<>
{isButtonVisible('zoom') && (
<Toolbar.Item
onClick={() => handleChange(options.zoom.id)}
title={options.zoom.label}
id={options.zoom.id}
active={option === options.zoom.id}
icon={<FaSearchPlus />}
/>
)}

{isButtonVisible('zoomOut') && (
<Toolbar.Item
id="zoom-out"
onClick={handleFullZoomOut}
title="Horizontal zoom out ( Press f ), Horizontal and Vertical zoom out, double click ( Press ff )"
icon={<FaExpand />}
/>
)}

{isButtonVisible('peakPicking') && (
<Toolbar.Item
onClick={() => handleChange(options.peakPicking.id)}
title={`${options.peakPicking.label} ( Press p )`}
id={options.peakPicking.id}
active={option === options.peakPicking.id}
icon={<SvgNmrPeakPicking />}
/>
)}
{isButtonVisible('integral') && (
<Toolbar.Item
onClick={() => handleChange(options.integral.id)}
title={`${options.integral.label} ( Press i )`}
id={options.integral.id}
active={option === options.integral.id}
icon={<SvgNmrIntegrate />}
/>
)}
{isButtonVisible('zonePicking') && (
<Toolbar.Item
onClick={() => handleChange(options.zonePicking.id)}
title={`${options.zonePicking.label} ( Press r )`}
id={options.zonePicking.id}
active={option === options.zonePicking.id}
icon={<FaDiceFour />}
/>
)}
{isButtonVisible('slicing') && (
<Toolbar.Item
onClick={() => handleChange(options.slicing.id)}
title={options.slicing.label}
id={options.slicing.id}
active={option === options.slicing.id}
icon={<p>Slic</p>}
/>
)}
{isButtonVisible('rangePicking') && (
<Toolbar.Item
onClick={() => handleChange(options.rangePicking.id)}
title={`${options.rangePicking.label} ( Press r )`}
id={options.rangePicking.id}
active={option === options.rangePicking.id}
icon={<SvgNmrRangePicking />}
/>
)}
{isButtonVisible('multipleSpectraAnalysis', {
checkSpectrumType: false,
}) &&
ftCounter > 1 && (
<Toolbar.Item
onClick={() => handleChange(options.multipleSpectraAnalysis.id)}
title={options.multipleSpectraAnalysis.label}
id={options.multipleSpectraAnalysis.id}
active={option === options.multipleSpectraAnalysis.id}
icon={<SvgNmrMultipleAnalysis />}
/>
)}
{isButtonVisible('apodization') && (
<Toolbar.Item
onClick={() => handleChange(options.apodization.id)}
title={`${options.apodization.label} (Press a)`}
id={options.apodization.id}
active={option === options.apodization.id}
icon={<SvgNmrApodization />}
/>
)}
{isButtonVisible('zeroFilling') && (
<Toolbar.Item
onClick={() => handleChange(options.zeroFilling.id)}
title={`${options.zeroFilling.label} ( Press z )`}
id={options.zeroFilling.id}
active={option === options.zeroFilling.id}
icon={<SvgNmrZeroFilling />}
/>
)}
{isButtonVisible('phaseCorrection') && (
<Toolbar.Item
onClick={() => handleChange(options.phaseCorrection.id)}
title={`${options.phaseCorrection.label} ( Press a )`}
id={options.phaseCorrection.id}
active={option === options.phaseCorrection.id}
icon={<SvgNmrPhaseCorrection />}
/>
)}
{isButtonVisible('phaseCorrectionTwoDimensions') && (
<Toolbar.Item
onClick={() => handleChange(options.phaseCorrectionTwoDimensions.id)}
title={`${options.phaseCorrectionTwoDimensions.label} ( Press a )`}
id={options.phaseCorrectionTwoDimensions.id}
active={option === options.phaseCorrectionTwoDimensions.id}
icon={<SvgNmrPhaseCorrection />}
/>
)}

{isButtonVisible('baselineCorrection') && (
<Toolbar.Item
onClick={() => handleChange(options.baselineCorrection.id)}
title={`${options.baselineCorrection.label} ( Press b )`}
id={options.baselineCorrection.id}
active={option === options.baselineCorrection.id}
icon={<SvgNmrBaselineCorrection />}
/>
)}

{isButtonVisible('exclusionZones', { checkSpectrumType: false }) &&
ftCounter > 0 && (
<Toolbar.Item
onClick={() => handleChange(options.exclusionZones.id)}
title={`${options.exclusionZones.label} ( Press e )`}
id={options.exclusionZones.id}
active={option === options.exclusionZones.id}
icon={<SvgNmrMultipleAnalysis />}
/>
)}

{isButtonVisible('fft') && (
<Toolbar.Item
id={options.fft.id}
className="cheminfo"
title={`${options.fft.label} ( Press t )`}
onClick={handleOnFFTFilter}
icon={<SvgNmrFourierTransform />}
/>
)}
{isButtonVisible('fftDimension1') && (
<Toolbar.Item
id={options.fftDimension1.id}
className="cheminfo"
title={options.fftDimension1.label}
onClick={handleFFtDimension1Filter}
icon={<SvgNmrFourierTransform />}
/>
)}
{isButtonVisible('fftDimension2') && (
<Toolbar.Item
id={options.fftDimension2.id}
className="cheminfo"
title={options.fftDimension2.label}
onClick={handleFFtDimension2Filter}
icon={<SvgNmrFourierTransform />}
/>
)}
{toolItems.map((item) => {
const { id, icon, label, checkOptions, onClick, condition } = item;

return (
isButtonVisible(id, checkOptions) &&
(condition === undefined || condition) && (
<Toolbar.Item
key={id}
onClick={onClick || (() => handleChange(id))}
title={label}
id={id}
active={option === id}
icon={icon}
/>
)
);
})}

Check warning on line 197 in src/component/toolbar/FunctionToolBar.tsx

View check run for this annotation

Codecov / codecov/patch

src/component/toolbar/FunctionToolBar.tsx#L181-L197

Added lines #L181 - L197 were not covered by tests
</>
);
}
Expand Down

0 comments on commit b5e0b74

Please sign in to comment.