diff --git a/package-lock.json b/package-lock.json index 973f138dc..50aa517cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,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", @@ -9127,9 +9127,9 @@ } }, "node_modules/nmr-load-save": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/nmr-load-save/-/nmr-load-save-2.3.0.tgz", - "integrity": "sha512-MqO65p8YhOOoYcAgnWd5+GqMhPO2s2oEE7WteM3o7NqZZ4DxusVp5oNLGXDSnT2kb9Qz7acpver+O6YAYYBe/Q==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/nmr-load-save/-/nmr-load-save-2.4.0.tgz", + "integrity": "sha512-JN2uKu5VHjvZpzwUWtkdj41Xon8Top0XD/OeNRzmRiKxTA+Yrm2U1poSqTdEfnS0LiHvuOP6Jg0rC+0t4U0lNQ==", "license": "MIT", "dependencies": { "@lukeed/uuid": "^2.0.1", diff --git a/package.json b/package.json index 1e415e6f8..d86b079b9 100644 --- a/package.json +++ b/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", diff --git a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx index e43280989..78cee19e6 100644 --- a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx +++ b/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(); + const { register, control, setValue } = useFormContext(); + + 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> = useMemo( () => [ @@ -86,32 +131,43 @@ function DisplayTabContent() { accessor: (_, index) => index + 1, }, { - index: 1, + index: 2, Header: 'Feature', accessor: 'label', style: { width: '60%' }, }, - { - index: 2, - Header: 'Visible', - style: { textAlign: 'center' }, - Cell: ({ row }) => ( - - ), - }, { index: 3, - Header: 'Active', + Header: 'Status', style: { textAlign: 'center' }, Cell: ({ row }) => ( - { + 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 ( + + fill + items={PANEL_STATUS} + itemTextKey="label" + itemValueKey="value" + selectedItemValue={value} + onItemSelect={(item) => + onChange(row.original.name, item.value) + } + /> + ); + }} /> ), }, @@ -122,24 +178,36 @@ function DisplayTabContent() { Cell: ({ row }) => ( ), }, ], - [register], + [control, onChange, register], ); return (
- - columns={COLUMNS} - data={LIST} - rowStyle={{ - hover: { backgroundColor: '#f7f7f7' }, - active: { backgroundColor: '#f5f5f5' }, - }} - /> + + + + + columns={COLUMNS} + data={LIST} + rowStyle={{ + hover: { backgroundColor: '#f7f7f7' }, + active: { backgroundColor: '#f5f5f5' }, + }} + /> +
); } diff --git a/src/component/panels/PanelsBar.tsx b/src/component/panels/PanelsBar.tsx index e24ff8ae1..cf2180bbf 100644 --- a/src/component/panels/PanelsBar.tsx +++ b/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 ( diff --git a/src/component/workspaces/workspaceDefaultProperties.ts b/src/component/workspaces/workspaceDefaultProperties.ts index e381afda1..302e0c439 100644 --- a/src/component/workspaces/workspaceDefaultProperties.ts +++ b/src/component/workspaces/workspaceDefaultProperties.ts @@ -13,6 +13,7 @@ export const workspaceDefaultProperties: Required = { hideHelp: false, hideMaximize: false, hideWorkspaces: false, + hidePanelsBar: false, }, panels: { diff --git a/test-e2e/NmriumPage/index.ts b/test-e2e/NmriumPage/index.ts index 04bb04409..5296c1783 100644 --- a/test-e2e/NmriumPage/index.ts +++ b/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(); + } } diff --git a/test-e2e/core/setting.test.ts b/test-e2e/core/setting.test.ts index f8670fc1f..6a8b20949 100644 --- a/test-e2e/core/setting.test.ts +++ b/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'); diff --git a/test-e2e/panels/autoassignment.test.ts b/test-e2e/panels/autoassignment.test.ts index b3820f2d2..82d556095 100644 --- a/test-e2e/panels/autoassignment.test.ts +++ b/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'); });