From aa62ff0d233cc3d7e1ea2a652a13587c181be454 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 15:21:06 +0200 Subject: [PATCH] refactor: custom tooltip for zoom,zoom out and peak picking tool --- src/component/elements/CustomToolTip.tsx | 190 +++++++++++++++++++++++ src/component/toolbar/ToolBar.tsx | 86 ++++++---- 2 files changed, 247 insertions(+), 29 deletions(-) create mode 100644 src/component/elements/CustomToolTip.tsx diff --git a/src/component/elements/CustomToolTip.tsx b/src/component/elements/CustomToolTip.tsx new file mode 100644 index 0000000000..036c49aa16 --- /dev/null +++ b/src/component/elements/CustomToolTip.tsx @@ -0,0 +1,190 @@ +/** @jsxImportSource @emotion/react */ +import { css } from '@emotion/react'; +import { CSSProperties } from 'react'; + +const styles: Record< + | 'titleContainer' + | 'title' + | 'description' + | 'shortcutContainer' + | 'shortcutItem', + CSSProperties +> = { + titleContainer: { + display: 'flex', + justifyContent: 'space-between', + flexWrap: 'wrap', + alignItems: 'center', + }, + title: { + fontSize: '0.9rem', + minWidth: '50%', + padding: '5px 0', + textAlign: 'left', + color: 'white', + }, + description: { + paddingTop: '1rem', + fontSize: '0.7rem', + textAlign: 'left', + color: 'white', + }, + shortcutContainer: { + display: 'flex', + textWrap: 'nowrap', + color: 'white', + }, + shortcutItem: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '0.2rem', + border: '1px solid #ccc', + borderRadius: '4px', + height: 'calc(0.2rem + 20px)', + minWidth: 'calc(0.2rem + 20px)' /* Adjust padding and border width */, + marginLeft: '5px', + fontSize: '0.75rem', + fontWeight: 'bold', + textTransform: 'capitalize', + }, +}; + +interface ToolTipItem { + title: string; + shortcuts?: string[]; + subTitles?: ToolTipItem[]; + description?: string; + link?: string; +} + +export function CustomToolTip(props: ToolTipItem) { + const { + title, + shortcuts = [], + subTitles = [], + description = '', + link, + } = props; + + return ( +
+
+ {title} + +
+ + +

+ {description} + {link && ( + + Learn more + + )} +

+
+ ); +} + +function ShortCuts({ + shortcuts, + style = {}, +}: { + shortcuts: string[]; + style?: CSSProperties; +}) { + return ( +
+ {shortcuts.map((key, index) => { + return ( +
+ {key} +
+ ); + })} +
+ ); +} + +const subTitleStyle = css` + padding-left: 5px; + list-style: none; + + li { + position: relative; + padding-left: 15px; + box-sizing: border-box; + + &::before { + position: absolute; + top: 15px; + left: 0; + width: 10px; + height: 1px; + margin: auto; + content: ''; + background-color: white; + } + + &::after { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 1px; + height: 100%; + content: ''; + background-color: white; + } + + &:last-child::after { + height: 15px; + } + } + + li:first-child { + padding-top: 5px; + + &::before { + top: 20px; + } + } +`; + +function SubTitles({ items }: { items: ToolTipItem[] }) { + if (!items || items.length === 0) return null; + + return ( + + ); +} diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 17665716e5..bc7945a761 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -29,6 +29,7 @@ import { Toolbar, ToolbarItemProps } from 'react-science/ui'; import { useChartData } from '../context/ChartContext'; import { useDispatch } from '../context/DispatchContext'; import { useLoader } from '../context/LoaderContext'; +import { CustomToolTip } from '../elements/CustomToolTip'; import { ToolbarPopoverMenuItem, ToolbarPopoverItem, @@ -51,10 +52,8 @@ import { MetaImportationModal } from '../modal/metaImportation/MetaImportationMo import { options } from './ToolTypes'; import { EXPORT_MENU, IMPORT_MENU } from './toolbarMenu'; -interface BaseToolItem { +interface BaseToolItem extends Pick { id: keyof NMRiumToolBarPreferences; - title: string; - icon: ToolbarItemProps['icon']; checkOptions?: CheckOptions; condition?: boolean; } @@ -186,115 +185,141 @@ export default function ToolBar() { const toolItems: Array = [ { id: 'zoom', - title: options.zoom.label, + tooltip: ( + + ), icon: , }, { id: 'zoomOut', - title: - 'Horizontal zoom out (Press f), Horizontal and Vertical zoom out, double click (Press ff)', + tooltip: ( + + ), onClick: handleFullZoomOut, icon: , }, { id: 'peakPicking', - title: `${options.peakPicking.label} (Press p)`, + tooltip: ( + + ), + icon: , }, { id: 'integral', - title: `${options.integral.label} (Press i)`, + tooltip: `${options.integral.label} (Press i)`, icon: , }, { id: 'zonePicking', - title: `${options.zonePicking.label} (Press r)`, + tooltip: `${options.zonePicking.label} (Press r)`, icon: , }, { id: 'slicing', - title: options.slicing.label, + tooltip: options.slicing.label, icon: , }, { id: 'rangePicking', - title: `${options.rangePicking.label} (Press r)`, + tooltip: `${options.rangePicking.label} (Press r)`, icon: , }, { id: 'multipleSpectraAnalysis', - title: options.multipleSpectraAnalysis.label, + tooltip: options.multipleSpectraAnalysis.label, icon: , checkOptions: { checkSpectrumType: false }, condition: ftCounter > 0, }, { id: 'apodization', - title: `${options.apodization.label} (Press a)`, + tooltip: `${options.apodization.label} (Press a)`, icon: , }, { id: 'zeroFilling', - title: `${options.zeroFilling.label} (Press z)`, + tooltip: `${options.zeroFilling.label} (Press z)`, icon: , }, { id: 'phaseCorrection', - title: `${options.phaseCorrection.label} (Press a)`, + tooltip: `${options.phaseCorrection.label} (Press a)`, icon: , }, { id: 'phaseCorrectionTwoDimensions', - title: `${options.phaseCorrectionTwoDimensions.label} (Press a)`, + tooltip: `${options.phaseCorrectionTwoDimensions.label} (Press a)`, icon: , }, { id: 'baselineCorrection', - title: `${options.baselineCorrection.label} (Press b)`, + tooltip: `${options.baselineCorrection.label} (Press b)`, icon: , }, { id: 'exclusionZones', - title: `${options.exclusionZones.label} (Press e)`, + tooltip: `${options.exclusionZones.label} (Press e)`, icon: , checkOptions: { checkSpectrumType: false }, condition: ftCounter > 0, }, { id: 'fft', - title: `${options.fft.label} (Press t)`, + tooltip: `${options.fft.label} (Press t)`, onClick: handleOnFFTFilter, icon: , }, { id: 'fftDimension1', - title: options.fftDimension1.label, + tooltip: options.fftDimension1.label, onClick: handleFFtDimension1Filter, icon: , }, { id: 'fftDimension2', - title: options.fftDimension2.label, + tooltip: options.fftDimension2.label, onClick: handleFFtDimension2Filter, icon: , }, { id: 'import', - title: options.import.label, + tooltip: options.import.label, icon: , menuItems: importMenu, onClick: importHandler, }, { id: 'exportAs', - title: options.exportAs.label, + tooltip: options.exportAs.label, icon: , menuItems: exportMenu, onClick: exportHandler, }, { id: 'spectraStackAlignments', - title: `${options.spectraStackAlignments.label} (Press s)`, + tooltip: `${options.spectraStackAlignments.label} (Press s)`, icon: verticalAlign === 'stack' ? ( @@ -306,13 +331,13 @@ export default function ToolBar() { }, { id: 'realImaginary', - title: isRealSpectrumShown ? 'Display real ' : 'Display imaginary', + tooltip: isRealSpectrumShown ? 'Display real ' : 'Display imaginary', icon: , onClick: changeSpectrumViewHandler, }, { id: 'spectraCenterAlignments', - title: `Baseline ${verticalAlign === 'bottom' ? 'center' : 'bottom'} (Press c)`, + tooltip: `Baseline ${verticalAlign === 'bottom' ? 'center' : 'bottom'} (Press c)`, icon: verticalAlign === 'bottom' ? ( @@ -338,7 +363,7 @@ export default function ToolBar() { {toolItems.map((item) => { - const { id, icon, title, checkOptions, condition } = item; + const { id, icon, tooltip, checkOptions, condition } = item; const show = isButtonVisible(id, checkOptions) && (condition === undefined || condition); @@ -351,7 +376,7 @@ export default function ToolBar() { handleChange(id))} - tooltip={title} + tooltip={tooltip} + tooltipProps={{ + minimal: typeof tooltip !== 'string', + }} id={id} active={selectedTool === id} icon={icon}