refactor: use react-science PanelHeader (#3283)

* refactor: use react-science PanelHeader * test: update tests * refactor: remove unused styles * test: copy/past should work for Firefox and Chrome --------- Co-authored-by: hamed musallam <[email protected]>
cheminfo · Nov 14, 2024 · 209ed95 · 209ed95
1 parent 2d68a0b
commit 209ed95
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 164 deletions.
diff --git a/src/component/elements/CounterLabel.tsx b/src/component/elements/CounterLabel.tsx
diff --git a/src/component/elements/PreferencesButton.tsx b/src/component/elements/PreferencesButton.tsx
diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
@@ -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,
@@ -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',
@@ -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' && (
@@ -244,6 +239,7 @@ export default function MoleculePanelHeader({
               disabled={!hasMolecules}
               tooltip="Export As"
               icon={<FaFileExport />}
+              id="molecule-export-as"
             />
 
             <Toolbar.Item
@@ -290,14 +286,6 @@ export default function MoleculePanelHeader({
       </Toolbar>
 
       <div style={{ flex: 1 }}>{children}</div>
-      {molecules && molecules.length > 0 && (
-        <p style={styles.counter}>
-          {`${+(currentIndex + 1)} / ${molecules.length}`}
-        </p>
-      )}
-      {onClickPreferences && (
-        <PreferencesButton tooltip="Preferences" onClick={onClickPreferences} />
-      )}
 
       <ClipboardFallbackModal
         mode={shouldFallback}

diff --git a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
@@ -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,
@@ -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;
@@ -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"
@@ -167,6 +156,6 @@ export function DatabaseSearchOptions(props: DatabaseSearchOptionsProps) {
           />
         </Toolbar>
       </div>
-    </PanelHeader>
+    </>
   );
 }
diff --git a/src/component/panels/header/DefaultPanelHeader.tsx b/src/component/panels/header/DefaultPanelHeader.tsx
@@ -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: {
@@ -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,
@@ -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 && (
@@ -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>
   );
 }

diff --git a/src/component/panels/header/PanelHeader.tsx b/src/component/panels/header/PanelHeader.tsx
diff --git a/test-e2e/panels/settings.test.ts b/test-e2e/panels/settings.test.ts
@@ -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',
@@ -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',
@@ -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',
@@ -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',