refactor: improve panel status in general settings

package.json

@@ -88,7 +88,7 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.5",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^2.3.0",
+    "nmr-load-save": "^2.4.0",
     "nmr-processing": "^14.0.5",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",

src/component/modal/setting/settings-tabs/DisplayTabContent.tsx

@@ -1,82 +1,127 @@
 import { Checkbox } from '@blueprintjs/core';
 import type { NMRiumPanelPreferences } from 'nmr-load-save';
-import { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useCallback, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import ReactTable from '../../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
+import { Select2 } from '../../../elements/Select2.js';
 import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import Label from '../../../elements/Label.js';
+import { GroupPane } from '../../../elements/GroupPane.js';
 
+const basePath = 'display.panels';
 interface ListItem {
   label: string;
-  name: `panels.${keyof NMRiumPanelPreferences}`;
+  name: keyof NMRiumPanelPreferences;
   hideOpenOption?: boolean;
 }
+
+type PanelStatus = 'hidden' | 'available' | 'active';
+interface PanelStatusItem {
+  label: string;
+  value: PanelStatus;
+}
+
+const PANEL_STATUS: PanelStatusItem[] = [
+  {
+    label: 'Hidden',
+    value: 'hidden',
+  },
+  {
+    label: 'Available',
+    value: 'available',
+  },
+  {
+    label: 'Active',
+    value: 'active',
+  },
+];
 const LIST: ListItem[] = [
   {
     label: 'Spectra selection panel',
-    name: 'panels.spectraPanel',
+    name: 'spectraPanel',
   },
   {
     label: 'Spectra information panel',
-    name: 'panels.informationPanel',
+    name: 'informationPanel',
   },
   {
     label: 'Peaks and peak picking',
-    name: 'panels.peaksPanel',
+    name: 'peaksPanel',
   },
   {
     label: 'Integration and integrals',
-    name: 'panels.integralsPanel',
+    name: 'integralsPanel',
   },
   {
     label: '1D ranges peak picking',
-    name: 'panels.rangesPanel',
+    name: 'rangesPanel',
   },
   {
     label: 'Chemical structures panel',
-    name: 'panels.structuresPanel',
+    name: 'structuresPanel',
   },
   {
     label: 'Processings panel',
-    name: 'panels.processingsPanel',
+    name: 'processingsPanel',
   },
   {
     label: '2D zones peak picking',
-    name: 'panels.zonesPanel',
+    name: 'zonesPanel',
   },
   {
     label: 'Assignment summary panel',
-    name: 'panels.summaryPanel',
+    name: 'summaryPanel',
   },
   {
     label: 'Multiple spectra analysis panel',
-    name: 'panels.multipleSpectraAnalysisPanel',
+    name: 'multipleSpectraAnalysisPanel',
   },
   {
     label: 'Databases panel',
-    name: 'panels.databasePanel',
+    name: 'databasePanel',
   },
   {
     label: 'Prediction panel',
-    name: 'panels.predictionPanel',
+    name: 'predictionPanel',
   },
   {
     label: 'Automatic assignment panel',
-    name: 'panels.automaticAssignmentPanel',
+    name: 'automaticAssignmentPanel',
   },
   {
     label: 'Matrix generation Panel',
-    name: 'panels.matrixGenerationPanel',
+    name: 'matrixGenerationPanel',
   },
   {
     label: 'Simulation panel',
-    name: 'panels.simulationPanel',
+    name: 'simulationPanel',
   },
 ];
 
 function DisplayTabContent() {
-  const { register } = useFormContext<WorkspaceWithSource>();
+  const { register, control, setValue } = useFormContext<WorkspaceWithSource>();
+
+  const onChange = useCallback(
+    (panelName: keyof NMRiumPanelPreferences, status: PanelStatus) => {
+      let visible = false;
+      let display = false;
+
+      if (status === 'available') {
+        visible = true;
+      }
+
+      if (status === 'active') {
+        visible = true;
+        display = true;
+      }
+
+      setValue(`${basePath}.${panelName}.display`, display);
+      setValue(`${basePath}.${panelName}.visible`, visible);
+    },
+    [setValue],
+  );
 
   const COLUMNS: Array<CustomColumn<ListItem>> = useMemo(
     () => [
@@ -86,32 +131,43 @@
         accessor: (_, index) => index + 1,
       },
       {
-        index: 1,
+        index: 2,
         Header: 'Feature',
         accessor: 'label',
         style: { width: '60%' },
       },
-      {
-        index: 2,
-        Header: 'Visible',
-        style: { textAlign: 'center' },
-        Cell: ({ row }) => (
-          <Checkbox
-            style={{ margin: 0 }}
-            {...register(`display.${row.original.name}.visible`)}
-            defaultChecked={false}
-          />
-        ),
-      },
       {
         index: 3,
-        Header: 'Active',
+        Header: 'Status',
         style: { textAlign: 'center' },
         Cell: ({ row }) => (
-          <Checkbox
-            style={{ margin: 0 }}
-            {...register(`display.${row.original.name}.display`)}
-            defaultChecked={false}
+          <Controller
+            control={control}
+            name={`${basePath}.${row.original.name}`}
+            render={({ field }) => {
+              const { value: state } = field;
+              const { visible = false, display = false } = state || {};
+              let value: PanelStatus = 'hidden';
+
+              if (visible && display) {
+                value = 'active';
+              } else if (visible) {
+                value = 'available';
+              }
+
+              return (
+                <Select2<PanelStatusItem>
+                  fill
+                  items={PANEL_STATUS}
+                  itemTextKey="label"
+                  itemValueKey="value"
+                  selectedItemValue={value}
+                  onItemSelect={(item) =>
+                    onChange(row.original.name, item.value)
+                  }
+                />
+              );
+            }}
           />
         ),
       },
@@ -122,24 +178,36 @@
         Cell: ({ row }) => (
           <Checkbox
             style={{ margin: 0 }}
-            {...register(`display.${row.original.name}.open`)}
+            {...register(`${basePath}.${row.original.name}.open`)}
           />
         ),
       },
     ],
-    [register],
+    [control, onChange, register],
   );
 
   return (
     <div style={{ width: '100%', overflow: 'hidden' }}>
-      <ReactTable<ListItem>
-        columns={COLUMNS}
-        data={LIST}
-        rowStyle={{
-          hover: { backgroundColor: '#f7f7f7' },
-          active: { backgroundColor: '#f5f5f5' },
-        }}
-      />
+      <Label
+        title="Hide panels bar "
+        style={{ wrapper: { padding: '10px 0' } }}
+      >
+        <Checkbox
+          style={{ margin: 0 }}
+          {...register('display.general.hidePanelsBar')}
+        />
+      </Label>
+
+      <GroupPane text="Panels settings">
+        <ReactTable<ListItem>
+          columns={COLUMNS}
+          data={LIST}
+          rowStyle={{
+            hover: { backgroundColor: '#f7f7f7' },
+            active: { backgroundColor: '#f5f5f5' },
+          }}
+        />
+      </GroupPane>
     </div>
   );
 }

src/component/panels/PanelsBar.tsx

@@ -4,6 +4,7 @@ import type { NMRiumPanelPreferences } from 'nmr-load-save';
 import { ActivityBarItem, Toolbar } from 'react-science/ui';
 import useResizeObserver from 'use-resize-observer';
 
+import { usePreferences } from '../context/PreferencesContext.js';
 import type { ToolbarPopoverMenuItem } from '../elements/ToolbarPopoverItem.js';
 import { ToolbarPopoverItem } from '../elements/ToolbarPopoverItem.js';
 
@@ -42,6 +43,11 @@ function useHiddenItemsMenu(
 }
 
 export function PanelsBar({ itemHeight = 44 }) {
+  const { current } = usePreferences();
+
+  const {
+    display: { general = {} },
+  } = current;
   const {
     ref,
     height,
@@ -58,7 +64,7 @@ export function PanelsBar({ itemHeight = 44 }) {
 
   const togglePanel = useTogglePanel();
 
-  if (items.length === 0) return null;
+  if (items.length === 0 || general?.hidePanelsBar) return null;
 
   return (
     <PanelsBarContainer vertical large minimal ref={ref}>

src/component/workspaces/workspaceDefaultProperties.ts

@@ -13,6 +13,7 @@ export const workspaceDefaultProperties: Required<WorkspacePreferences> = {
       hideHelp: false,
       hideMaximize: false,
       hideWorkspaces: false,
+      hidePanelsBar: false,
     },
 
     panels: {

test-e2e/NmriumPage/index.ts

@@ -217,4 +217,15 @@ export default class NmriumPage {
     });
     await alert.locator('button').click();
   }
+
+  async changePanelStatus(
+    panelTitle: string,
+    status: 'hidden' | 'active' | 'available',
+  ) {
+    const selectLocator = this.page.locator(
+      `td:has-text("${panelTitle}")  + td`,
+    );
+    await selectLocator.click();
+    await this.page.getByRole('option', { name: status }).click();
+  }
 }

test-e2e/core/setting.test.ts

@@ -21,11 +21,8 @@ test('should Change the visibility of the panels', async ({ page }) => {
     //click on the display tab
     await nmrium.page.getByRole('tablist').locator('text=Panels').click();
 
-    //change  the checkbox value to true
-    await nmrium.page.locator('td:has-text("Databases panel")  + td').click();
-    await nmrium.page
-      .locator('td:has-text("Databases panel")  + td + td')
-      .click();
+    //change panel status to active (displays the panel in the accordion panels and the right bar )
+    await nmrium.changePanelStatus('Databases panel', 'active');
 
     await nmrium.saveWorkspaceModal('test');
 

test-e2e/panels/autoassignment.test.ts

@@ -11,15 +11,10 @@ test('automatic assignment panel', async ({ page }) => {
   });
   await test.step('activate automatic assignment panel', async () => {
     await nmrium.page.click('_react=ToolbarItem[id="general-settings"]');
-    await nmrium.page.click('div[role="dialog"] >> text=Panels');
-
-    //change the checkbox value for 'visible' and 'display' to true
-    await nmrium.page
-      .locator('td:has-text("Automatic assignment panel")  + td')
-      .click();
-    await nmrium.page
-      .locator('td:has-text("Automatic assignment panel")  + td + td')
-      .click();
+    await nmrium.page.getByRole('tablist').locator('text=Panels').click();
+
+    //change panel status to active (displays the panel in the accordion panels and the right bar )
+    await nmrium.changePanelStatus('Automatic assignment panel', 'active');
 
     await nmrium.saveWorkspaceModal('test');
   });