From dd3183059ec23b88fdaefcbd5c06d2dc057d8e2d Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 11:51:59 +0200 Subject: [PATCH 01/15] chore: update react-science to version 3.0.0 --- package-lock.json | 8 ++++---- package.json | 2 +- src/component/elements/CloseButton.tsx | 2 +- src/component/elements/SaveButton.tsx | 4 +++- src/component/header/Header.tsx | 6 +++--- .../PhaseCorrectionTwoDimensionsPanel.tsx | 6 +++--- src/component/modal/AboutPredictionModal.tsx | 2 +- .../modal/AboutSpectrumSimulationModal.tsx | 2 +- src/component/modal/CopyClipboardModal.tsx | 2 +- src/component/modal/EditPeakShapeModal.tsx | 2 +- src/component/modal/PredictSpectraModal.tsx | 2 +- src/component/modal/aboutUs/AboutUsModal.tsx | 2 +- .../modal/changeSum/ChangeSumModal.tsx | 2 +- .../modal/editRange/EditRangeModal.tsx | 4 ++-- .../signal-tabs/SignalJCouplingsTable.tsx | 4 ++-- .../signal-tabs/SignalPeaksTable.tsx | 4 ++-- .../modal/editZone/EditZoneModal.tsx | 4 ++-- .../modal/setting/GeneralSettings.tsx | 2 +- .../AutomaticAssignment.tsx | 4 ++-- .../panels/IntegralsPanel/IntegralPanel.tsx | 4 ++-- .../MatrixGenerationPanel.tsx | 4 ++-- .../MoleculesPanel/MoleculePanelHeader.tsx | 14 ++++++------- .../panels/PeaksPanel/PeaksPanel.tsx | 10 +++++----- .../panels/RangesPanel/RangesHeader.tsx | 20 +++++++++---------- .../SpectraPanel/SpectraPanelHeader.tsx | 14 ++++++------- .../editLink/EditLinkModal.tsx | 2 +- .../panels/SummaryPanel/SummaryPanel.tsx | 4 ++-- .../panels/ZonesPanel/ZonesPanel.tsx | 8 ++++---- .../databasePanel/DatabaseSearchOptions.tsx | 8 ++++---- .../panels/header/DefaultPanelHeader.tsx | 8 ++++---- .../panels/header/PreferencesHeader.tsx | 4 ++-- .../header/SpectraAutomaticPickingButton.tsx | 2 +- .../MultipleSpectraAnalysisPanel.tsx | 8 ++++---- src/component/toolbar/ToolBar.tsx | 4 ++-- test-e2e/NmriumPage/index.ts | 4 ++-- test-e2e/panels/ranges.test.ts | 2 +- test-e2e/panels/structures.test.ts | 10 ++++++---- 37 files changed, 99 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index 692e53172..53c160ac9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,7 +60,7 @@ "react-ocl-nmr": "^3.0.1", "react-plot": "^1.4.2", "react-rnd": "^10.4.1", - "react-science": "^2.0.0", + "react-science": "^3.0.0", "react-slider": "^2.0.6", "react-table": "^7.8.0", "react-transition-group": "^4.4.5", @@ -11570,9 +11570,9 @@ } }, "node_modules/react-science": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/react-science/-/react-science-2.0.0.tgz", - "integrity": "sha512-kieoki/L7NYGTESvFFhRy2UrR2cmuDQViQvqgabKslpBgY88+RS3N+vjF7vX0RtfQia0ly2lIG89uoBcIDJ7Nw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-science/-/react-science-3.0.0.tgz", + "integrity": "sha512-/5e0sEMrCBqBO/MY9OwnI5x9/WGQCV7Fp8l7r9ahhXqomkjhbb0t8PyzXD18wvRY9sYBvj8mRbnOACY5K3Mymw==", "dependencies": { "@blueprintjs/select": "^5.1.2", "@emotion/react": "^11.11.4", diff --git a/package.json b/package.json index 9cb5cbd39..7990fa443 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,7 @@ "react-ocl-nmr": "^3.0.1", "react-plot": "^1.4.2", "react-rnd": "^10.4.1", - "react-science": "^2.0.0", + "react-science": "^3.0.0", "react-slider": "^2.0.6", "react-table": "^7.8.0", "react-transition-group": "^4.4.5", diff --git a/src/component/elements/CloseButton.tsx b/src/component/elements/CloseButton.tsx index e86df8788..f2986cc10 100644 --- a/src/component/elements/CloseButton.tsx +++ b/src/component/elements/CloseButton.tsx @@ -4,7 +4,7 @@ import { ToolbarItemProps } from 'react-science/ui'; import { ToolBarButton } from './ToolBarButton'; export function CloseButton( - props: Pick, + props: Pick, ) { return ( ) { +export function SaveButton( + props: Pick, +) { return ( window.open(docsBaseUrl, '_blank')} icon={} /> )} window.open('https://www.youtube.com/@nmrium', '_blank') } @@ -201,7 +201,7 @@ function HeaderInner(props: HeaderInnerProps) { } /> diff --git a/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx b/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx index 3f97557c8..2a2f97d1e 100644 --- a/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx +++ b/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx @@ -199,7 +199,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() { css={css` border: 1px solid #f7f7f7; `} - title="Horizontal" + tooltip="Horizontal" icon={} active={activeTraceDirection === 'horizontal'} onClick={() => onChangeHandler('horizontal')} @@ -208,7 +208,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() { css={css` border: 1px solid #f7f7f7; `} - title="Vertical" + tooltip="Vertical" icon={} active={activeTraceDirection === 'vertical'} onClick={() => onChangeHandler('vertical')} @@ -218,7 +218,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
} active={addTracesToBothDirections} onClick={handleToggleAddTraceToBothDirections} diff --git a/src/component/modal/AboutPredictionModal.tsx b/src/component/modal/AboutPredictionModal.tsx index 7f12a57c8..23acee784 100644 --- a/src/component/modal/AboutPredictionModal.tsx +++ b/src/component/modal/AboutPredictionModal.tsx @@ -46,7 +46,7 @@ function AboutPredictionModal() { } onClick={openDialog} - title="About prediction" + tooltip="About prediction" /> } /> diff --git a/src/component/modal/CopyClipboardModal.tsx b/src/component/modal/CopyClipboardModal.tsx index 967454b30..5a499d308 100644 --- a/src/component/modal/CopyClipboardModal.tsx +++ b/src/component/modal/CopyClipboardModal.tsx @@ -51,7 +51,7 @@ function CopyClipboardModal({ - +
{`Peak Shape Edition ( ${valuePPM} PPM)`} onClose?.()} className="close-bt" /> diff --git a/src/component/modal/PredictSpectraModal.tsx b/src/component/modal/PredictSpectraModal.tsx index 594e83476..89b382c38 100644 --- a/src/component/modal/PredictSpectraModal.tsx +++ b/src/component/modal/PredictSpectraModal.tsx @@ -141,7 +141,7 @@ export function PredictSpectraModal({ } - title="Predict spectra" + tooltip="Predict spectra" onClick={openDialog} /> diff --git a/src/component/modal/aboutUs/AboutUsModal.tsx b/src/component/modal/aboutUs/AboutUsModal.tsx index 7056a341a..f37c32c86 100644 --- a/src/component/modal/aboutUs/AboutUsModal.tsx +++ b/src/component/modal/aboutUs/AboutUsModal.tsx @@ -78,7 +78,7 @@ function AboutUsModal() {
} - title="Add a new J coupling" + tooltip="Add a new J coupling" intent="success" onClick={() => addHandler(jCouplings)} /> } - title="Delete all J couplings" + tooltip="Delete all J couplings" intent="danger" onClick={deleteAllHandler} /> diff --git a/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx b/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx index df924bf5a..289bf68d1 100644 --- a/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx +++ b/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx @@ -240,13 +240,13 @@ export function SignalPeaksTable(props: SignalPeaksTableProps) { } - title="Add a new peak" + tooltip="Add a new peak" intent="success" onClick={() => addHandler(peaks)} /> } - title="Delete all peaks" + tooltip="Delete all peaks" intent="danger" onClick={deleteAllHandler} /> diff --git a/src/component/modal/editZone/EditZoneModal.tsx b/src/component/modal/editZone/EditZoneModal.tsx index c52fc3932..e43b9cf20 100644 --- a/src/component/modal/editZone/EditZoneModal.tsx +++ b/src/component/modal/editZone/EditZoneModal.tsx @@ -146,9 +146,9 @@ function EditZoneModal({ {`Zone and Signal edition`} formRef.current.submitForm()} - title="Save and exit" + tooltip="Save and exit" /> - + diff --git a/src/component/modal/setting/GeneralSettings.tsx b/src/component/modal/setting/GeneralSettings.tsx index e58fc615d..98afd24ca 100644 --- a/src/component/modal/setting/GeneralSettings.tsx +++ b/src/component/modal/setting/GeneralSettings.tsx @@ -270,7 +270,7 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) { } /> diff --git a/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx b/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx index d806012a4..ad2951e95 100644 --- a/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx +++ b/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx @@ -34,13 +34,13 @@ function AutomaticAssignment() { }, { icon: , - title: 'Automatic assignment', + tooltip: 'Automatic assignment', onClick: getAssignments, disabled: !enabled, }, { icon: , - title: 'Reset assignment', + tooltip: 'Reset assignment', onClick: restAssignments, }, ]} diff --git a/src/component/panels/IntegralsPanel/IntegralPanel.tsx b/src/component/panels/IntegralsPanel/IntegralPanel.tsx index a515fed45..6f64d1914 100644 --- a/src/component/panels/IntegralsPanel/IntegralPanel.tsx +++ b/src/component/panels/IntegralsPanel/IntegralPanel.tsx @@ -154,13 +154,13 @@ function IntegralPanelInner({ }, { icon: , - title: 'Fixed integration values', + tooltip: 'Fixed integration values', onClick: toggleConstantSumHandler, active: integrals?.options?.isSumConstant || false, }, { icon: , - title: `${booleanToString(!showIntegralsValues)} integrals values`, + tooltip: `${booleanToString(!showIntegralsValues)} integrals values`, onClick: handleShowIntegralsValues, active: showIntegralsValues, }, diff --git a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx index d21a799e5..ec7c8510e 100644 --- a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx +++ b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx @@ -118,14 +118,14 @@ function MatrixGenerationPanel() { leftButtons={[ { icon: , - title: 'Export spectra as a matrix', + tooltip: 'Export spectra as a matrix', onClick: handleExportAsMatrix, }, ]} rightButtons={[ { onClick: () => formRef.current?.submitForm(), - title: 'Signal processing', + tooltip: 'Signal processing', id: 'save-button', intent: 'success', icon: , diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx index 0cea8fd93..503bc7c24 100644 --- a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx +++ b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx @@ -231,17 +231,17 @@ export default function MoleculePanelHeader({ options={MOL_EXPORT_MENU} onClick={exportHandler} disabled={!hasMolecules} - title="Export As" + tooltip="Export As" icon={} /> } onClick={handlePasteMolfileAction} /> } onClick={onOpenMoleculeEditor} /> @@ -251,7 +251,7 @@ export default function MoleculePanelHeader({ {renderSource === 'moleculePanel' && ( <> } onClick={handleDelete} disabled={!hasMolecules} @@ -263,14 +263,14 @@ export default function MoleculePanelHeader({ )} } onClick={floatMoleculeHandler} active={moleculesView?.[moleculeKey]?.floating.visible || false} disabled={!hasMolecules} /> #

} onClick={showAtomNumbersHandler} active={moleculesView?.[moleculeKey]?.showAtomNumber || false} @@ -285,7 +285,7 @@ export default function MoleculePanelHeader({

)} {onClickPreferences && ( - + )} , - title: `${booleanToString(!showPeaks)} peaks`, + tooltip: `${booleanToString(!showPeaks)} peaks`, onClick: () => toggleViewProperty('showPeaks'), active: showPeaks, }, { disabled, icon: , - title: `${displayingMode === 'spread' ? 'Single' : 'Spread'} mode`, + tooltip: `${displayingMode === 'spread' ? 'Single' : 'Spread'} mode`, onClick: toggleDisplayingMode, active: displayingMode === 'spread', }, @@ -158,20 +158,20 @@ function PeaksPanelInner({ { disabled, icon: , - title: `${booleanToString(!showPeaksShapes)} peaks shapes`, + tooltip: `${booleanToString(!showPeaksShapes)} peaks shapes`, onClick: () => toggleViewProperty('showPeaksShapes'), active: showPeaksShapes, }, { disabled, icon: , - title: `${booleanToString(!showPeaksSum)} peaks sum`, + tooltip: `${booleanToString(!showPeaksSum)} peaks sum`, onClick: () => toggleViewProperty('showPeaksSum'), active: showPeaksSum, }, { icon: , - title: 'Optimize peaks', + tooltip: 'Optimize peaks', onClick: optimizePeaksHandler, }, ); diff --git a/src/component/panels/RangesPanel/RangesHeader.tsx b/src/component/panels/RangesPanel/RangesHeader.tsx index 248410337..a78adddae 100644 --- a/src/component/panels/RangesPanel/RangesHeader.tsx +++ b/src/component/panels/RangesPanel/RangesHeader.tsx @@ -180,7 +180,7 @@ function RangesHeader({ { disabled: !hasRanges, icon: , - title: 'Preview publication string', + tooltip: 'Preview publication string', onClick: saveAsHTMLHandler, }, { @@ -195,41 +195,41 @@ function RangesHeader({ }, { icon: , - title: 'Fixed integration sum', + tooltip: 'Fixed integration sum', onClick: changeSumConstantFlagHandler, active: ranges?.options?.isSumConstant, }, { disabled: !hasRanges, icon: , - title: 'Remove all assignments', + tooltip: 'Remove all assignments', onClick: handleOnRemoveAssignments, }, { disabled: !hasRanges, icon: , - title: `${booleanToString(!showMultiplicityTrees)} multiplicity trees in spectrum`, + tooltip: `${booleanToString(!showMultiplicityTrees)} multiplicity trees in spectrum`, onClick: handleSetShowMultiplicityTrees, active: showMultiplicityTrees, }, { disabled: !hasRanges, icon: , - title: `${booleanToString(!showJGraph)} J Graph`, + tooltip: `${booleanToString(!showJGraph)} J Graph`, onClick: handleShowJGraph, active: showJGraph, }, { disabled: !hasRanges, icon: , - title: `${booleanToString(!showIntegrals)} integrals`, + tooltip: `${booleanToString(!showIntegrals)} integrals`, onClick: handleShowIntegrals, active: showIntegrals, }, { disabled: !hasRanges, icon: , - title: `${booleanToString(!showIntegralsValues)} integrals values`, + tooltip: `${booleanToString(!showIntegralsValues)} integrals values`, onClick: handleShowIntegralsValues, active: showIntegralsValues, }, @@ -238,21 +238,21 @@ function RangesHeader({ id: 'ranges-toggle-peaks', disabled: !hasRanges, icon: , - title: `${booleanToString(!showPeaks)} peaks`, + tooltip: `${booleanToString(!showPeaks)} peaks`, onClick: () => toggleViewProperty('showPeaks'), active: showPeaks, }, { disabled: !hasRanges, icon: , - title: `${displayingMode === 'spread' ? 'Single' : 'Spread'} mode`, + tooltip: `${displayingMode === 'spread' ? 'Single' : 'Spread'} mode`, onClick: toggleDisplayingMode, active: displayingMode === 'spread', }, { disabled: !hasRanges, icon: , - title: `${booleanToString(!showAssignmentsLabels)} assignments labels`, + tooltip: `${booleanToString(!showAssignmentsLabels)} assignments labels`, onClick: handleShowAssignmentsLabel, active: showAssignmentsLabels, }, diff --git a/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx b/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx index f97cb1212..c6a8b73b3 100644 --- a/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx +++ b/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx @@ -136,13 +136,13 @@ function SpectraPanelHeaderInner({ { disabled: !hasActiveSpectra, icon: , - title: 'Hide selected spectra', + tooltip: 'Hide selected spectra', onClick: hideAllSpectraHandler, }, { disabled: !hasActiveSpectra, icon: , - title: 'Show selected spectra', + tooltip: 'Show selected spectra', onClick: showAllSpectraHandler, }, ]; @@ -150,7 +150,7 @@ function SpectraPanelHeaderInner({ if (displayerMode === '2D' && activeSpectrum?.info.isFt) { leftButtons.push({ icon: , - title: 'Add missing projection', + tooltip: 'Add missing projection', onClick: addMissingProjectionHandler, }); } @@ -159,12 +159,12 @@ function SpectraPanelHeaderInner({ leftButtons.push( { icon: , - title: 'Reset scale', + tooltip: 'Reset scale', onClick: resetScaleHandler, }, { icon: , - title: 'Same top', + tooltip: 'Same top', onClick: setSameTopHandler, }, ); @@ -176,12 +176,12 @@ function SpectraPanelHeaderInner({ }, { icon: , - title: 'Default spectra recoloring', + tooltip: 'Default spectra recoloring', onClick: defaultReColorSpectraHandler, }, { icon: , - title: 'Distinct spectra recoloring', + tooltip: 'Distinct spectra recoloring', onClick: distinctReColorSpectraHandler, }, ]); diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx index 247398f62..e08c41925 100644 --- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx +++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx @@ -188,7 +188,7 @@ export default function EditLinkModal({ return (
- +

{`${link.experimentType.toUpperCase()} signal at ${getLinkLabel()}`}

{tabsContainer} diff --git a/src/component/panels/SummaryPanel/SummaryPanel.tsx b/src/component/panels/SummaryPanel/SummaryPanel.tsx index e57da869a..8cb73ab70 100644 --- a/src/component/panels/SummaryPanel/SummaryPanel.tsx +++ b/src/component/panels/SummaryPanel/SummaryPanel.tsx @@ -472,12 +472,12 @@ function SummaryPanel() { leftButtons={[ { icon: , - title: `Set molecular formula (${correlationsData?.options?.mf || ''})`, + tooltip: `Set molecular formula (${correlationsData?.options?.mf || ''})`, onClick: () => openDialog('molecularFormula'), }, { icon: , - title: 'Set shift tolerance', + tooltip: 'Set shift tolerance', onClick: () => openDialog('shiftToleranceModal'), }, ]} diff --git a/src/component/panels/ZonesPanel/ZonesPanel.tsx b/src/component/panels/ZonesPanel/ZonesPanel.tsx index 26a0cac5d..2f196b316 100644 --- a/src/component/panels/ZonesPanel/ZonesPanel.tsx +++ b/src/component/panels/ZonesPanel/ZonesPanel.tsx @@ -185,24 +185,24 @@ function ZonesPanelInner({ { disabled: !zones.values || zones.values.length === 0, icon: , - title: 'Remove all assignments', + tooltip: 'Remove all assignments', onClick: handleOnRemoveAssignments, }, { icon: z, - title: 'Show/Hide zones', + tooltip: 'Show/Hide zones', active: showZones, onClick: handleSetShowZones, }, { icon: s, - title: 'Show/Hide signals', + tooltip: 'Show/Hide signals', active: showSignals, onClick: handleSetShowSignals, }, { icon: p, - title: 'Show/Hide peaks', + tooltip: 'Show/Hide peaks', active: showPeaks, onClick: handleSetShowPeaks, }, diff --git a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx index 4bb91e5e5..4b8051bff 100644 --- a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx +++ b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx @@ -89,7 +89,7 @@ export function DatabaseSearchOptions({ }} > } active={showSimilarityTree} onClick={handleShowSimilarityTree} @@ -122,12 +122,12 @@ export function DatabaseSearchOptions({ - +
} active={selectedTool === options.databaseRangesSelection.id} onClick={enableFilterHandler} @@ -146,7 +146,7 @@ export function DatabaseSearchOptions({ canClear /> : } intent="success" active={!!idCode} diff --git a/src/component/panels/header/DefaultPanelHeader.tsx b/src/component/panels/header/DefaultPanelHeader.tsx index 0af0c9f0c..454404102 100644 --- a/src/component/panels/header/DefaultPanelHeader.tsx +++ b/src/component/panels/header/DefaultPanelHeader.tsx @@ -95,7 +95,7 @@ function DefaultPanelHeader(props: DefaultPanelHeaderProps) { } intent="danger" disabled={!total || disableDelete} @@ -106,7 +106,7 @@ function DefaultPanelHeader(props: DefaultPanelHeaderProps) { } /> @@ -119,7 +119,7 @@ function DefaultPanelHeader(props: DefaultPanelHeaderProps) { {mapToolbarButtons(rightButtons)} {onSettingClick && ( - + )} ); @@ -131,7 +131,7 @@ function mapToolbarButtons(buttons: ToolbarItemProps[]) { // eslint-disable-next-line react/no-array-index-key {props.component} ) : ( - + ), ); } diff --git a/src/component/panels/header/PreferencesHeader.tsx b/src/component/panels/header/PreferencesHeader.tsx index 903d261b6..8117bd253 100644 --- a/src/component/panels/header/PreferencesHeader.tsx +++ b/src/component/panels/header/PreferencesHeader.tsx @@ -15,8 +15,8 @@ function PreferencesHeader({ onClose, onSave }: PreferencesHeaderProps) { borderBottom: '0.55px solid rgb(240 240 240)', }} > - - + +
); } diff --git a/src/component/panels/header/SpectraAutomaticPickingButton.tsx b/src/component/panels/header/SpectraAutomaticPickingButton.tsx index ffdcf32f8..d46ba78e5 100644 --- a/src/component/panels/header/SpectraAutomaticPickingButton.tsx +++ b/src/component/panels/header/SpectraAutomaticPickingButton.tsx @@ -36,7 +36,7 @@ export function SpectraAutomaticPickingButton() { return ( } - title="Automatic ranges/zones picking for all spectra" + tooltip="Automatic ranges/zones picking for all spectra" onClick={automaticPickingHandler} /> ); diff --git a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx index 460c93049..96fac2e9e 100644 --- a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx +++ b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx @@ -97,7 +97,7 @@ function MultipleSpectraAnalysisPanelInner({ let lefButtons: ToolbarItemProps[] = [ { icon: , - title: 'Copy to clipboard', + tooltip: 'Copy to clipboard', onClick: copyToClipboardHandler, }, ]; @@ -106,19 +106,19 @@ function MultipleSpectraAnalysisPanelInner({ lefButtons = lefButtons.concat([ { icon: , - title: 'Spectra calibration', + tooltip: 'Spectra calibration', onClick: handleSpectraCalibration, active: calibration, }, { icon: , - title: 'Y spectra tracker', + tooltip: 'Y spectra tracker', onClick: showTrackerHandler, active: showLegend, }, { icon: , - title: `${booleanToString(!showAnalysisChart)} analysis chart`, + tooltip: `${booleanToString(!showAnalysisChart)} analysis chart`, onClick: toggleAnalysisChart, active: showAnalysisChart, }, diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index dae75d920..17665716e 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -351,7 +351,7 @@ export default function ToolBar() { handleChange(id))} - title={title} + tooltip={title} id={id} active={selectedTool === id} icon={icon} diff --git a/test-e2e/NmriumPage/index.ts b/test-e2e/NmriumPage/index.ts index 858906c3c..853064bf8 100644 --- a/test-e2e/NmriumPage/index.ts +++ b/test-e2e/NmriumPage/index.ts @@ -47,7 +47,7 @@ export default class NmriumPage { await this.page.click(`_react=ToolbarItem[id="${id}"] >> nth=0`); } public async clickToolByTitle(title: string) { - await this.page.click(`_react=ToolbarItem[title="${title}"] >> nth=0`); + await this.page.click(`_react=ToolbarItem[tooltip="${title}"] >> nth=0`); } public getToolbarLocatorByTitle( @@ -56,7 +56,7 @@ export default class NmriumPage { ) { const { prefixSelectors = [], active, caseSensitive = false } = options; const selectors: string[] = [ - `_react=ToolbarItem[title="${title}" ${caseSensitive ? '' : 'i'}]`, + `_react=ToolbarItem[tooltip="${title}" ${caseSensitive ? '' : 'i'}]`, ]; const parentsSelectors: string[] = ['']; for (const s of prefixSelectors.reverse()) { diff --git a/test-e2e/panels/ranges.test.ts b/test-e2e/panels/ranges.test.ts index 79acd631b..67e8f5883 100644 --- a/test-e2e/panels/ranges.test.ts +++ b/test-e2e/panels/ranges.test.ts @@ -254,7 +254,7 @@ test('Range state', async ({ page }) => { //show peaks await nmrium.page.click( - `_react=RangesPanel >> _react=ToolbarItem[title="Show peaks" i] >> nth=0`, + `_react=RangesPanel >> _react=ToolbarItem[tooltip="Show peaks" i] >> nth=0`, ); //show integrals diff --git a/test-e2e/panels/structures.test.ts b/test-e2e/panels/structures.test.ts index 1c1beddde..87eb45e87 100644 --- a/test-e2e/panels/structures.test.ts +++ b/test-e2e/panels/structures.test.ts @@ -284,7 +284,7 @@ test('molecules 1H spectrum', async ({ page, browserName }) => { await test.step('Check molecules in integrals', async () => { await nmrium.clickPanel('Integrals'); await nmrium.page.click( - '_react=IntegralPanel >> _react=ToolbarItem[title*="Change integration" i]', + '_react=IntegralPanel >> _react=ToolbarItem[tooltip*="Change integration" i]', ); await expect( nmrium.page.locator('div[role="dialog"] >> #molSVG0'), @@ -333,7 +333,7 @@ test('molecules 1H spectrum', async ({ page, browserName }) => { await test.step('Check molecules in ranges', async () => { await nmrium.clickPanel('Ranges'); await nmrium.page.click( - '_react=ToolbarItem[title *= "Change ranges sum" i]', + '_react=ToolbarItem[tooltip *= "Change ranges sum" i]', ); await nmrium.page .locator('div[role="dialog"]') @@ -444,7 +444,9 @@ test('molecules 1H spectrum', async ({ page, browserName }) => { }); await test.step('Delete the copy', async () => { // Delete molecule. - await nmrium.page.click('_react=ToolbarItem[title="Delete molecule" i]'); + await nmrium.page.click( + '_react=ToolbarItem[tooltip="Delete molecule" i]', + ); // Check deleted molecule. await expect(nmrium.page.locator('text=C6H6 - 78.11')).toHaveCount(2); // Check floated molecule. @@ -630,7 +632,7 @@ test('check callbacks count on changing structures', async ({ page }) => { async function clickExportMenuOption(nmrium: NmriumPage, selector: string) { await nmrium.page.click( - '_react=MoleculePanelHeader >> _react=ToolbarItem[title="export as" i]', + '_react=MoleculePanelHeader >> _react=ToolbarItem[tooltip="export as" i]', ); await nmrium.page.click(selector); } From 453952d32466317a616c9e884efb58a12a9c7459 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 15:21:06 +0200 Subject: [PATCH 02/15] refactor: custom tooltip for zoom,zoom out and peak picking tool --- src/component/elements/CustomToolTip.tsx | 191 +++++++++++++++++++++++ src/component/toolbar/ToolBar.tsx | 86 ++++++---- 2 files changed, 248 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 000000000..66937f175 --- /dev/null +++ b/src/component/elements/CustomToolTip.tsx @@ -0,0 +1,191 @@ +/** @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', + }, +}; + +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) && ( +

+ {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 ( +
    + {items.map(({ shortcuts = [], title }) => ( +
  • +
    + {title} + +
    +
    • + ))} +
+ ); +} diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 17665716e..593673355 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} From 679ca1d31f59d2048c5c4059629756253158f9f1 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 16:41:14 +0200 Subject: [PATCH 03/15] refactor: integral tool tip --- src/component/toolbar/ToolBar.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 593673355..d95e43d6f 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -228,7 +228,14 @@ export default function ToolBar() { }, { id: 'integral', - tooltip: `${options.integral.label} (Press i)`, + tooltip: ( + + ), icon: , }, { From 7dd7de37d772a29ee08436d9aa09c4780b8ea5ed Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 16:51:51 +0200 Subject: [PATCH 04/15] refactor: zone tool tip --- src/component/toolbar/ToolBar.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index d95e43d6f..209fe6033 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -240,7 +240,14 @@ export default function ToolBar() { }, { id: 'zonePicking', - tooltip: `${options.zonePicking.label} (Press r)`, + tooltip: ( + + ), icon: , }, { From 6349a3521aaab143b3b9b9b0932192762e983ba2 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 16:55:45 +0200 Subject: [PATCH 05/15] refactor: slicing tool tip --- src/component/toolbar/ToolBar.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 209fe6033..aeaf5bc1f 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -232,7 +232,7 @@ export default function ToolBar() { ), @@ -244,7 +244,7 @@ export default function ToolBar() { ), @@ -252,7 +252,13 @@ export default function ToolBar() { }, { id: 'slicing', - tooltip: options.slicing.label, + tooltip: ( + + ), icon: , }, { From efd4a3aba2ad56ad17dd1d3b272527546ccadcae Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 16:59:37 +0200 Subject: [PATCH 06/15] refactor: ranges tool tip --- src/component/toolbar/ToolBar.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index aeaf5bc1f..708909207 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -263,7 +263,14 @@ export default function ToolBar() { }, { id: 'rangePicking', - tooltip: `${options.rangePicking.label} (Press r)`, + tooltip: ( + + ), icon: , }, { From 43f6291253b63df1ddb0636cf38d992b6b53f8f1 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 17:15:39 +0200 Subject: [PATCH 07/15] refactor: apodization,zero filling, and phase correction tools tips --- src/component/toolbar/ToolBar.tsx | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 708909207..305144c25 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -282,22 +282,44 @@ export default function ToolBar() { }, { id: 'apodization', - tooltip: `${options.apodization.label} (Press a)`, + tooltip: ( + + ), icon: , }, { id: 'zeroFilling', - tooltip: `${options.zeroFilling.label} (Press z)`, + tooltip: ( + + ), icon: , }, { id: 'phaseCorrection', - tooltip: `${options.phaseCorrection.label} (Press a)`, + tooltip: ( + + ), icon: , }, { id: 'phaseCorrectionTwoDimensions', - tooltip: `${options.phaseCorrectionTwoDimensions.label} (Press a)`, + tooltip: ( + + ), icon: , }, { From f917673474d11d051bbc78fc31cde6979179d550 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 17:25:15 +0200 Subject: [PATCH 08/15] chore: set tooltip width to 250 --- src/component/elements/CustomToolTip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/elements/CustomToolTip.tsx b/src/component/elements/CustomToolTip.tsx index 66937f175..57c662909 100644 --- a/src/component/elements/CustomToolTip.tsx +++ b/src/component/elements/CustomToolTip.tsx @@ -69,7 +69,7 @@ export function CustomToolTip(props: ToolTipItem) { return (
From bbddccc9bc5405ae779c6c3df6e2b216ebe485b5 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 17:25:56 +0200 Subject: [PATCH 09/15] refactor: FFT tool tip --- src/component/toolbar/ToolBar.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 305144c25..85f8c3d29 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -336,7 +336,14 @@ export default function ToolBar() { }, { id: 'fft', - tooltip: `${options.fft.label} (Press t)`, + tooltip: ( + + ), onClick: handleOnFFTFilter, icon: , }, From 48d292bfaba9ca6079a8d075783a47f655ed6778 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 17:33:06 +0200 Subject: [PATCH 10/15] refactor: stack mode tool tip --- src/component/toolbar/ToolBar.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 85f8c3d29..d89967370 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -375,7 +375,13 @@ export default function ToolBar() { }, { id: 'spectraStackAlignments', - tooltip: `${options.spectraStackAlignments.label} (Press s)`, + tooltip: ( + + ), icon: verticalAlign === 'stack' ? ( From a64cdc01cd7f16be8d39c932260487a879f5b8b6 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Thu, 4 Apr 2024 17:37:28 +0200 Subject: [PATCH 11/15] style: fix the tool tip title overflow --- src/component/elements/CustomToolTip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/elements/CustomToolTip.tsx b/src/component/elements/CustomToolTip.tsx index 57c662909..3f16facf4 100644 --- a/src/component/elements/CustomToolTip.tsx +++ b/src/component/elements/CustomToolTip.tsx @@ -18,7 +18,7 @@ const styles: Record< }, title: { fontSize: '0.9rem', - minWidth: '50%', + flex: 1, padding: '5px 0', textAlign: 'left', color: 'white', From 98ffb858136c1d9e5938ac2f1e32a3e9c53ac8e6 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 5 Apr 2024 09:36:32 +0200 Subject: [PATCH 12/15] refactor: custom tool tips --- src/component/elements/CustomToolTip.tsx | 2 +- src/component/toolbar/ToolBar.tsx | 208 +++++++++++------------ 2 files changed, 104 insertions(+), 106 deletions(-) diff --git a/src/component/elements/CustomToolTip.tsx b/src/component/elements/CustomToolTip.tsx index 3f16facf4..44d3e2328 100644 --- a/src/component/elements/CustomToolTip.tsx +++ b/src/component/elements/CustomToolTip.tsx @@ -49,7 +49,7 @@ const styles: Record< }, }; -interface ToolTipItem { +export interface ToolTipItem { title: string; shortcuts?: string[]; subTitles?: ToolTipItem[]; diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index d89967370..7e472fd5b 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -29,7 +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 { CustomToolTip, ToolTipItem } from '../elements/CustomToolTip'; import { ToolbarPopoverMenuItem, ToolbarPopoverItem, @@ -52,17 +52,19 @@ import { MetaImportationModal } from '../modal/metaImportation/MetaImportationMo import { options } from './ToolTypes'; import { EXPORT_MENU, IMPORT_MENU } from './toolbarMenu'; -interface BaseToolItem extends Pick { +interface BaseToolItem extends Pick { id: keyof NMRiumToolBarPreferences; checkOptions?: CheckOptions; condition?: boolean; } interface ToolItem extends BaseToolItem { onClick?: () => void; + tooltip: string | ToolTipItem; } interface PopoverToolItem extends BaseToolItem { onClick: (data?: any) => void; menuItems: ToolbarPopoverMenuItem[]; + tooltip: string | ToolTipItem; } function isPopoverToolItem( @@ -185,92 +187,84 @@ export default function ToolBar() { const toolItems: Array = [ { id: 'zoom', - tooltip: ( - - ), + tooltip: { + title: options.zoom.label, + subTitles: [ + { title: 'Vertical', shortcuts: ['Scroll wheel'] }, + { title: 'Horizontal', shortcuts: ['Shift', 'Scroll wheel'] }, + { title: 'Pan', shortcuts: ['Right mouse'] }, + ], + }, icon: , }, { id: 'zoomOut', - tooltip: ( - - ), + tooltip: { + title: 'Zoom out', + subTitles: [ + { title: 'Horizontal', shortcuts: ['f'] }, + { title: 'Horizontal and Vertical', shortcuts: ['f', 'f'] }, + ], + description: + 'You can zoom out by double click on the left mouse button and full zoom out by press key "f" or press key "f" twice to fit the spectra in the window.', + link: 'https://docs.nmrium.org/help/zoom-and-scale', + }, onClick: handleFullZoomOut, icon: , }, { id: 'peakPicking', - tooltip: ( - - ), + tooltip: { + title: options.peakPicking.label, + shortcuts: ['p'], + description: + 'You can detect peaks manually or automatically in the spectrum.', + link: 'https://docs.nmrium.org/20_1d-spectra/peaks/peaks', + }, icon: , }, { id: 'integral', - tooltip: ( - - ), + tooltip: { + title: options.integral.label, + shortcuts: ['i'], + description: + 'To calculate the integration, hold Shift and left-click, then drag over the signal range.', + link: 'https://docs.nmrium.org/help/integrations', + }, icon: , }, { id: 'zonePicking', - tooltip: ( - - ), + tooltip: { + title: options.zonePicking.label, + shortcuts: ['r'], + description: + 'You can detect zones manually by selecting, holding Shift,left-click, dragging, and then releasing. Alternatively, detect zones automatically.', + link: 'https://docs.nmrium.org/30_2d-spectra/zones/zones', + }, icon: , }, { id: 'slicing', - tooltip: ( - - ), + tooltip: { + title: options.slicing.label, + description: + 'You can display the shift on the x-axis and the y-axis for each point of a 2D spectrum.', + link: 'https://docs.nmrium.org/30_2d-spectra/slicing/slicing', + }, icon: , }, { id: 'rangePicking', - tooltip: ( - - ), + tooltip: { + title: options.rangePicking.label, + shortcuts: ['r'], + description: + 'You can detect ranges manually by selecting, holding Shift,left-click, dragging, and then releasing. Alternatively, detect ranges automatically.', + link: 'https://docs.nmrium.org/20_1d-spectra/ranges/ranges', + }, icon: , }, { @@ -282,44 +276,40 @@ export default function ToolBar() { }, { id: 'apodization', - tooltip: ( - - ), + tooltip: { + title: options.apodization.label, + shortcuts: ['a'], + }, icon: , }, { id: 'zeroFilling', - tooltip: ( - - ), + tooltip: { + title: options.zeroFilling.label, + shortcuts: ['z'], + description: + 'To improve spectrum quality by increasing the number of points per ppm, by default, the number of points is twice as many points as in the original FID.', + link: 'https://docs.nmrium.org/20_1d-spectra/preprocessing/preprocessing#zero-filling', + }, icon: , }, { id: 'phaseCorrection', - tooltip: ( - - ), + tooltip: { + title: options.phaseCorrection.label, + shortcuts: ['a'], + description: 'To phase the spectrum after the FFT.', + link: 'https://docs.nmrium.org/20_1d-spectra/phase/phase', + }, icon: , }, { id: 'phaseCorrectionTwoDimensions', - tooltip: ( - - ), + tooltip: { + title: options.phaseCorrectionTwoDimensions.label, + shortcuts: ['a'], + description: 'To phase the spectrum after the FFT.', + }, icon: , }, { @@ -336,14 +326,12 @@ export default function ToolBar() { }, { id: 'fft', - tooltip: ( - - ), + tooltip: { + title: options.fft.label, + shortcuts: ['t'], + description: 'To process the FID to FT spectrum.', + link: 'https://docs.nmrium.org/20_1d-spectra/ft/ft/', + }, onClick: handleOnFFTFilter, icon: , }, @@ -375,13 +363,11 @@ export default function ToolBar() { }, { id: 'spectraStackAlignments', - tooltip: ( - - ), + tooltip: { + title: options.spectraStackAlignments.label, + shortcuts: ['s'], + description: 'To display the spectra in a stack mode.', + }, icon: verticalAlign === 'stack' ? ( @@ -438,7 +424,13 @@ export default function ToolBar() { + ) + } id={id} active={selectedTool === id} icon={icon} @@ -453,7 +445,13 @@ export default function ToolBar() { handleChange(id))} - tooltip={tooltip} + tooltip={ + typeof tooltip === 'string' ? ( + tooltip + ) : ( + + ) + } tooltipProps={{ minimal: typeof tooltip !== 'string', }} From 9335a39290a2b7c2375e136a07aeee1eeb8884f4 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 5 Apr 2024 09:52:09 +0200 Subject: [PATCH 13/15] refactor: the rest of the tools tips --- src/component/toolbar/ToolBar.tsx | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index 7e472fd5b..ccb779b00 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -314,12 +314,21 @@ export default function ToolBar() { }, { id: 'baselineCorrection', - tooltip: `${options.baselineCorrection.label} (Press b)`, + tooltip: { + title: options.baselineCorrection.label, + shortcuts: ['b'], + description: + 'To process the spectrum to be a straight line at zero absorbance.', + link: 'https://docs.nmrium.org/20_1d-spectra/baseline/baseline', + }, icon: , }, { id: 'exclusionZones', - tooltip: `${options.exclusionZones.label} (Press e)`, + tooltip: { + title: options.exclusionZones.label, + shortcuts: ['e'], + }, icon: , checkOptions: { checkSpectrumType: false }, condition: ftCounter > 0, @@ -379,13 +388,23 @@ export default function ToolBar() { }, { id: 'realImaginary', - tooltip: isRealSpectrumShown ? 'Display real ' : 'Display imaginary', + tooltip: { + title: `Display ${isRealSpectrumShown ? 'real' : 'imaginary'}`, + description: + 'To switch between imaginary and real part of the spectrum.', + link: 'https://docs.nmrium.org/20_1d-spectra/views/views', + }, icon: , onClick: changeSpectrumViewHandler, }, { id: 'spectraCenterAlignments', - tooltip: `Baseline ${verticalAlign === 'bottom' ? 'center' : 'bottom'} (Press c)`, + tooltip: { + title: `Baseline ${verticalAlign === 'bottom' ? 'center' : 'bottom'}`, + shortcuts: ['c'], + description: + 'To align the spectra in the centre or at the bottom of the displayer.', + }, icon: verticalAlign === 'bottom' ? ( From 03aa250dc56fedf077bb772c22feaaaa3a159234 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 5 Apr 2024 09:55:47 +0200 Subject: [PATCH 14/15] refactor: hide the arrow in the main toolbar tips --- src/component/toolbar/ToolBar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx index ccb779b00..965de19c6 100644 --- a/src/component/toolbar/ToolBar.tsx +++ b/src/component/toolbar/ToolBar.tsx @@ -450,6 +450,9 @@ export default function ToolBar() { ) } + tooltipProps={{ + minimal: true, + }} id={id} active={selectedTool === id} icon={icon} @@ -472,7 +475,7 @@ export default function ToolBar() { ) } tooltipProps={{ - minimal: typeof tooltip !== 'string', + minimal: true, }} id={id} active={selectedTool === id} From b6f37f0a0d8dadebbc0c8c829ac3e0b86da09cc4 Mon Sep 17 00:00:00 2001 From: hamed musallam Date: Fri, 5 Apr 2024 18:59:40 +0200 Subject: [PATCH 15/15] style: shortcut font size --- src/component/elements/CustomToolTip.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/component/elements/CustomToolTip.tsx b/src/component/elements/CustomToolTip.tsx index 44d3e2328..e6c3ff026 100644 --- a/src/component/elements/CustomToolTip.tsx +++ b/src/component/elements/CustomToolTip.tsx @@ -179,10 +179,7 @@ function SubTitles({ items }: { items: ToolTipItem[] }) {
  • {title} - +
    • ))}