Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: use react-science PanelHeader #3283

Merged
merged 4 commits into from
Nov 14, 2024
Merged

refactor: use react-science PanelHeader #3283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4baf6ad
refactor: use react-science PanelHeader
wadjih-bencheikh18 Nov 1, 2024
ae34cc5
test: update tests
wadjih-bencheikh18 Nov 2, 2024
4e846d1
refactor: remove unused styles
wadjih-bencheikh18 Nov 4, 2024
01f54f7
test: copy/past should work for Firefox and Chrome
hamed-musallam Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions src/component/elements/CounterLabel.tsx
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions src/component/elements/PreferencesButton.tsx
View file
Open in desktop

This file was deleted.

28 changes: 8 additions & 20 deletions src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
FaRegTrashAlt,
} from 'react-icons/fa';
import { IoOpenOutline } from 'react-icons/io5';
import { Toolbar } from 'react-science/ui';
import { PanelHeader, Toolbar } from 'react-science/ui';

import type {
MoleculesView,
Expand All @@ -24,22 +24,13 @@ import { useAssignmentData } from '../../assignment/AssignmentsContext.js';
import { useDispatch } from '../../context/DispatchContext.js';
import { useGlobal } from '../../context/GlobalContext.js';
import { useToaster } from '../../context/ToasterContext.js';
import { PreferencesButton } from '../../elements/PreferencesButton.js';
import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.js';
import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
import AboutPredictionModal from '../../modal/AboutPredictionModal.js';
import PredictSpectraModal from '../../modal/PredictSpectraModal.js';
import { copyPNGToClipboard, exportAsSVG } from '../../utility/export.js';
import PanelHeader from '../header/PanelHeader.js';

const styles: Record<'counter' | 'atomLabel', CSSProperties> = {
counter: {
margin: 0,
textAlign: 'right',
lineHeight: '22px',
padding: '0 5px',
whiteSpace: 'nowrap',
},
const styles: Record<'atomLabel', CSSProperties> = {
atomLabel: {
width: '14px',
height: '14px',
Expand Down Expand Up @@ -233,7 +224,11 @@ export default function MoleculePanelHeader({
const hasMolecules = molecules && molecules.length > 0;

return (
<PanelHeader>
<PanelHeader
onClickSettings={onClickPreferences}
current={molecules && molecules.length > 0 ? currentIndex + 1 : undefined}
total={molecules && molecules.length > 0 ? molecules.length : undefined}
>
<Toolbar>
{renderSource === 'predictionPanel' && <AboutPredictionModal />}
{renderSource === 'moleculePanel' && (
Expand All @@ -244,6 +239,7 @@ export default function MoleculePanelHeader({
disabled={!hasMolecules}
tooltip="Export As"
icon={<FaFileExport />}
id="molecule-export-as"
/>

<Toolbar.Item
Expand Down Expand Up @@ -290,14 +286,6 @@ export default function MoleculePanelHeader({
</Toolbar>

<div style={{ flex: 1 }}>{children}</div>
{molecules && molecules.length > 0 && (
<p style={styles.counter}>
wadjih-bencheikh18 marked this conversation as resolved.
Show resolved Hide resolved
{`${+(currentIndex + 1)} / ${molecules.length}`}
</p>
)}
{onClickPreferences && (
<PreferencesButton tooltip="Preferences" onClick={onClickPreferences} />
)}

<ClipboardFallbackModal
mode={shouldFallback}
Expand Down
77 changes: 33 additions & 44 deletions src/component/panels/databasePanel/DatabaseSearchOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,15 @@ import { FaICursor, FaRegTrashAlt } from 'react-icons/fa';
import { IoSearchOutline } from 'react-icons/io5';
import { TbBinaryTree } from 'react-icons/tb';
import type { ToolbarItemProps } from 'react-science/ui';
import { Toolbar } from 'react-science/ui';
import { PanelHeader, Toolbar } from 'react-science/ui';

import { useChartData } from '../../context/ChartContext.js';
import { useDispatch } from '../../context/DispatchContext.js';
import { CounterLabel } from '../../elements/CounterLabel.js';
import Input from '../../elements/Input.js';
import { PreferencesButton } from '../../elements/PreferencesButton.js';
import Select from '../../elements/Select.js';
import { ToolBarButton } from '../../elements/ToolBarButton.js';
import useToolsFunctions from '../../hooks/useToolsFunctions.js';
import { options } from '../../toolbar/ToolTypes.js';
import { formatCounterLabel } from '../header/DefaultPanelHeader.js';
import PanelHeader from '../header/PanelHeader.js';

import type {
Databases,
Expand All @@ -31,7 +27,7 @@ interface DatabaseSearchOptionsProps {
idCode?: string;
total: number;
onKeywordsChange: (k: Partial<DatabaseSearchKeywords>) => void;
onSettingClick: ToolbarItemProps['onClick'];
onSettingClick: () => void;
onStructureClick: ToolbarItemProps['onClick'];
onDatabaseChange: (databaseKey: string) => void;
onRemoveAll: () => void;
Expand Down Expand Up @@ -85,51 +81,44 @@ export function DatabaseSearchOptions(props: DatabaseSearchOptionsProps) {
}

return (
<PanelHeader style={{ flexDirection: 'column', alignItems: 'normal' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
paddingBottom: '2px',
}}
<>
<PanelHeader
onClickSettings={() => onSettingClick()}
current={total || 0}
total={result.data.length}
>
<ToolBarButton
tooltip={`${showSimilarityTree ? 'Hide' : 'Show'} similarity tree`}
icon={<TbBinaryTree />}
active={showSimilarityTree}
onClick={handleShowSimilarityTree}
/>

<Select
style={{ flex: 6, marginLeft: '5px' }}
items={databases}
itemTextField="label"
itemValueField="key"
onChange={onDatabaseChange}
placeholder="Select database"
defaultValue={defaultDatabase}
/>
<Select
style={{ flex: 4, margin: '0px 5px' }}
items={result.solvents}
placeholder="Solvent"
onChange={handleSearch}
value={keywords.solvent}
/>
<div
style={{
display: 'flex',
alignItems: 'center',
flex: 2,
justifyContent: 'flex-end',
justifyContent: 'space-between',
paddingBottom: '2px',
}}
>
<CounterLabel
value={formatCounterLabel(total || 0, result.data.length)}
<ToolBarButton
tooltip={`${showSimilarityTree ? 'Hide' : 'Show'} similarity tree`}
icon={<TbBinaryTree />}
active={showSimilarityTree}
onClick={handleShowSimilarityTree}
/>

<Select
style={{ flex: 6, marginLeft: '5px' }}
items={databases}
itemTextField="label"
itemValueField="key"
onChange={onDatabaseChange}
placeholder="Select database"
defaultValue={defaultDatabase}
/>
<Select
style={{ flex: 4, margin: '0px 5px' }}
items={result.solvents}
placeholder="Solvent"
onChange={handleSearch}
value={keywords.solvent}
/>
<PreferencesButton tooltip="Preferences" onClick={onSettingClick} />
</div>
</div>
</PanelHeader>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<ToolBarButton
tooltip="Filter by select ranges"
Expand Down Expand Up @@ -167,6 +156,6 @@ export function DatabaseSearchOptions(props: DatabaseSearchOptionsProps) {
/>
</Toolbar>
</div>
</PanelHeader>
</>
);
}
37 changes: 7 additions & 30 deletions src/component/panels/header/DefaultPanelHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@ import type { CSSProperties, ReactNode } from 'react';
import { Fragment, useState } from 'react';
import { FaFilter, FaRegTrashAlt } from 'react-icons/fa';
import type { ToolbarItemProps as BaseToolbarItemProps } from 'react-science/ui';
import { Toolbar } from 'react-science/ui';

import { CounterLabel } from '../../elements/CounterLabel.js';
import { PreferencesButton } from '../../elements/PreferencesButton.js';

import PanelHeader from './PanelHeader.js';
import { PanelHeader, Toolbar } from 'react-science/ui';

const styles: Record<'leftContainer', CSSProperties> = {
leftContainer: {
Expand Down Expand Up @@ -46,23 +41,6 @@ interface DefaultPanelHeaderProps {
hideCounter?: boolean;
}

export function formatCounterLabel(counter?: number, total?: number) {
if (
counter !== undefined &&
total !== undefined &&
counter >= 0 &&
total >= 0 &&
counter !== total
) {
return `[ ${counter}/${total} ]`;
}

if (total !== undefined) {
return `[ ${total} ]`;
}
return '';
}

function DefaultPanelHeader(props: DefaultPanelHeaderProps) {
const {
total,
Expand All @@ -89,7 +67,12 @@ function DefaultPanelHeader(props: DefaultPanelHeaderProps) {
}

return (
<PanelHeader {...{ style, className }}>
<PanelHeader
{...{ style, className }}
onClickSettings={onSettingClick}
current={hideCounter || total === counter ? undefined : counter}
total={hideCounter ? undefined : total}
>
<div style={styles.leftContainer}>
<Toolbar>
{onDelete && (
Expand Down Expand Up @@ -118,12 +101,6 @@ function DefaultPanelHeader(props: DefaultPanelHeaderProps) {
</div>

<Toolbar>{mapToolbarButtons(rightButtons)}</Toolbar>
{!hideCounter && (
<CounterLabel value={formatCounterLabel(counter, total)} />
)}
{onSettingClick && (
<PreferencesButton tooltip="Preferences" onClick={onSettingClick} />
)}
</PanelHeader>
);
}
Expand Down
19 changes: 0 additions & 19 deletions src/component/panels/header/PanelHeader.tsx
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions test-e2e/panels/settings.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ test('process 1d FID 13c spectrum', async ({ page }) => {
const nmrium = await NmriumPage.create(page);
await test.step('Spectra panel settings', async () => {
await nmrium.page.click(
'_react=AccordionItem[title="Spectra"] >> _react=PreferencesButton >> nth=0',
'_react=AccordionItem[title="Spectra"] >> _react=PanelHeader >> button >> nth=-1',
);
await nmrium.page.click(
'_react=AccordionItem[title="Spectra"] >> _react=ToolbarItem[id="save-button"] >> nth=0',
Expand All @@ -16,7 +16,7 @@ test('process 1d FID 13c spectrum', async ({ page }) => {
await test.step('Peaks panel settings', async () => {
await nmrium.clickPanel('Peaks');
await nmrium.page.click(
'_react=AccordionItem[title="Peaks"] >> _react=PreferencesButton >> nth=0',
'_react=AccordionItem[title="Peaks"] >> _react=PanelHeader >> button >> nth=-1',
);
await nmrium.page.click(
'_react=AccordionItem[title="Peaks"] >> _react=ToolbarItem[id="save-button"] >> nth=0',
Expand All @@ -26,7 +26,7 @@ test('process 1d FID 13c spectrum', async ({ page }) => {
await test.step('Integrals panel settings', async () => {
await nmrium.clickPanel('Integrals');
await nmrium.page.click(
'_react=AccordionItem[title="Integrals"] >> _react=PreferencesButton >> nth=0',
'_react=AccordionItem[title="Integrals"] >> _react=PanelHeader >> button >> nth=-1',
);
await nmrium.page.click(
'_react=AccordionItem[title="Integrals"] >> _react=ToolbarItem[id="save-button"] >> nth=0',
Expand All @@ -36,7 +36,7 @@ test('process 1d FID 13c spectrum', async ({ page }) => {
await test.step('Ranges panel settings', async () => {
await nmrium.clickPanel('Ranges / Multiplet analysis');
await nmrium.page.click(
'_react=AccordionItem[title="Ranges / Multiplet analysis"] >> _react=PreferencesButton >> nth=0',
'_react=AccordionItem[title="Ranges / Multiplet analysis"] >> _react=PanelHeader >> button >> nth=-1',
);
await nmrium.page.click(
'_react=AccordionItem[title="Ranges / Multiplet analysis"] >> _react=ToolbarItem[id="save-button"] >> nth=0',
Expand Down
Loading
Loading