{
+ const panelOptions = getPanelPreferences(item);
+ return panelOptions.display;
+ });
+ const hasDisplayedPanels = displayedPanels.length > 0;
+
+ if (items?.length === 0 || !hasDisplayedPanels) {
+ return
{children}
;
+ }
+
+ const closed: number | boolean = general?.hidePanelOnLoad
+ ? true
+ : verticalSplitterCloseThreshold;
+
return (
{children}
diff --git a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
index 96f39de6e..e43280989 100644
--- a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
@@ -93,6 +93,18 @@ function DisplayTabContent() {
},
{
index: 2,
+ Header: 'Visible',
+ style: { textAlign: 'center' },
+ Cell: ({ row }) => (
+
+ ),
+ },
+ {
+ index: 3,
Header: 'Active',
style: { textAlign: 'center' },
Cell: ({ row }) => (
@@ -104,7 +116,7 @@ function DisplayTabContent() {
),
},
{
- index: 3,
+ index: 4,
Header: 'Open on load',
style: { textAlign: 'center' },
Cell: ({ row }) => (
diff --git a/src/component/panels/Panels.tsx b/src/component/panels/Panels.tsx
index 3c4d6df71..5abc77afb 100644
--- a/src/component/panels/Panels.tsx
+++ b/src/component/panels/Panels.tsx
@@ -1,203 +1,74 @@
-import lodashGet from 'lodash/get.js';
-import type {
- NMRiumPanelPreferences,
- PanelPreferencesType,
-} from 'nmr-load-save';
-import type { CSSProperties, ReactElement } from 'react';
-import { memo, useCallback } from 'react';
+import type { NMRiumPanelPreferences } from 'nmr-load-save';
+import { createContext, memo, useContext, useMemo, useState } from 'react';
import { FaRegEdit } from 'react-icons/fa';
-import type { AccordionItemProps, ToolbarItemProps } from 'react-science/ui';
+import type { ToolbarItemProps } from 'react-science/ui';
import { Accordion, Toolbar } from 'react-science/ui';
-import { useChartData } from '../context/ChartContext.js';
-import { usePreferences } from '../context/PreferencesContext.js';
import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
-import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.js';
import { useDialogToggle } from '../hooks/useDialogToggle.js';
-import type { DisplayerMode } from '../reducer/Reducer.js';
-import AutomaticAssignment from './AutomaticAssignment/AutomaticAssignment.js';
-import IntegralPanel from './IntegralsPanel/IntegralPanel.js';
-import { MatrixGenerationPanel } from './MatrixGenerationPanel/MatrixGenerationPanel.js';
-import MoleculePanel from './MoleculesPanel/MoleculePanel.js';
-import PeaksPanel from './PeaksPanel/PeaksPanel.js';
-import RangesPanel from './RangesPanel/RangesPanel.js';
-import SpectrumListPanel from './SpectraPanel/SpectrumListPanel.js';
-import SummaryPanel from './SummaryPanel/SummaryPanel.js';
-import ZonesPanel from './ZonesPanel/ZonesPanel.js';
-import DatabasePanel from './databasePanel/DatabasePanel.js';
-import FilterPanel from './filtersPanel/FilterPanel.js';
+import type { AccordionItem } from './accordionItems.js';
+import { useAccordionItems } from './hooks/useAccordionItems.js';
+import { useGetPanelOptions } from './hooks/useGetPanelOptions.js';
+import { useTogglePanel } from './hooks/useTogglePanel.js';
import { InformationEditionModal } from './informationPanel/InformationEditionModal.js';
-import { InformationPanel } from './informationPanel/InformationPanel.js';
-import MultipleSpectraAnalysisPanel from './multipleAnalysisPanel/MultipleSpectraAnalysisPanel.js';
-import PredictionPane from './predictionPanel/PredictionPanel.js';
-import SpectrumSimulation from './spectrumSimulation/SpectrumSimulation.js';
-interface AccordionItem
- extends Omit {
- id?: keyof NMRiumPanelPreferences;
- component: ReactElement;
- style?: CSSProperties;
- hidePreferenceKey: string;
- mode: DisplayerMode | null;
- isExperimental?: boolean;
+type PanelOpenState = Partial>;
+interface PanelStateContext {
+ setPanelOpenState: (id: keyof NMRiumPanelPreferences, value: boolean) => void;
+ panelOpenState: PanelOpenState;
}
-const accordionItems: AccordionItem[] = [
- {
- title: 'Spectra',
- component: ,
- hidePreferenceKey: 'spectraPanel',
- mode: null,
- },
- {
- id: 'informationPanel',
- title: 'Information',
- component: ,
- style: { overflow: 'hidden' },
- hidePreferenceKey: 'informationPanel',
- mode: null,
- },
- {
- title: 'Peaks',
- component: ,
- hidePreferenceKey: 'peaksPanel',
- mode: '1D',
- },
- {
- title: 'Processings',
- component: ,
- hidePreferenceKey: 'processingsPanel',
- mode: null,
- },
- {
- title: 'Integrals',
- component: ,
- hidePreferenceKey: 'integralsPanel',
- mode: '1D',
- },
- {
- title: 'Ranges / Multiplet analysis',
- component: ,
- hidePreferenceKey: 'rangesPanel',
- mode: '1D',
- },
- {
- title: 'Multiple spectra analysis',
- component: ,
- hidePreferenceKey: 'multipleSpectraAnalysisPanel',
- mode: null,
- },
- {
- title: 'Matrix generation',
- component: ,
- hidePreferenceKey: 'matrixGenerationPanel',
- mode: '1D',
- },
- {
- title: 'Zones',
- component: ,
- hidePreferenceKey: 'zonesPanel',
- mode: '2D',
- },
- {
- title: 'Summary',
- component: ,
- hidePreferenceKey: 'summaryPanel',
- mode: null,
- },
- {
- title: 'Chemical structures',
- component: ,
- hidePreferenceKey: 'structuresPanel',
- mode: null,
- },
- {
- title: 'Databases',
- component: ,
- hidePreferenceKey: 'databasePanel',
- mode: null,
- },
- {
- title: 'Automatic assignment',
- component: ,
- hidePreferenceKey: 'automaticAssignmentPanel',
- mode: null,
- },
- {
- title: 'Prediction',
- component: ,
- hidePreferenceKey: 'predictionPanel',
- mode: null,
- },
- {
- title: 'Spectrum simulation',
- component: ,
- hidePreferenceKey: 'simulationPanel',
- mode: '1D',
- },
-];
+const AccordionContext = createContext(null);
-export const TOOLS_PANELS_ACCORDION: Record = {
- null: 'Spectra',
- peakPicking: 'Peaks',
- integral: 'Integrals',
- rangePicking: 'Ranges / Multiplet analysis',
- zonePicking: 'Zones',
- multipleSpectraAnalysis: 'Multiple Spectra Analysis',
-};
+export function usePanelOpenState() {
+ const context = useContext(AccordionContext);
-function usePanelPreferences(): (item: AccordionItem) => PanelPreferencesType {
- const preferences = usePreferences();
+ if (!context) {
+ throw new Error('Panel open context must be used within PanelOpenProvider');
+ }
- return useCallback(
- (item: AccordionItem) => {
- const defaultValue: PanelPreferencesType = {
- display: false,
- open: false,
- };
+ return context;
+}
- if (item?.isExperimental && !item.hidePreferenceKey) {
- return {
- display: true,
- open: false,
- };
- }
+export function PanelOpenProviderProvider({ children }) {
+ const [panelOpenState, toggleAccordionItem] = useState({});
+
+ const state = useMemo(() => {
+ function setPanelOpenState(
+ id: keyof NMRiumPanelPreferences,
+ value: boolean,
+ ) {
+ toggleAccordionItem((prev) => ({
+ ...prev,
+ [id]: value,
+ }));
+ }
+ return { setPanelOpenState, panelOpenState };
+ }, [panelOpenState]);
- return lodashGet(
- preferences.current,
- `display.panels.${item.hidePreferenceKey}`,
- defaultValue,
- );
- },
- [preferences],
+ return (
+
+ {children}
+
);
}
-function PanelsInner({ displayerMode: displayedMode }) {
- const getPanelPreferences = usePanelPreferences();
- const isExperimental = useCheckExperimentalFeature();
+function PanelsInner() {
+ const getPanelPreferences = useGetPanelOptions();
+ const { panelOpenState } = usePanelOpenState();
const { dialog, openDialog, closeDialog } = useDialogToggle({
informationModal: false,
});
- const check = useCallback(
- (item) => {
- const panelOptions = getPanelPreferences(item);
-
- return (
- (panelOptions?.display &&
- item.isExperimental === undefined &&
- (item.mode == null || item.mode === displayedMode)) ||
- (item.isExperimental && isExperimental)
- );
- },
- [displayedMode, getPanelPreferences, isExperimental],
- );
-
+ const items = useAccordionItems();
function isOpened(item: AccordionItem) {
const panelOptions = getPanelPreferences(item);
- return panelOptions?.display && panelOptions?.open;
+ return panelOptions?.open;
+ }
+ function isVisible(item: AccordionItem) {
+ const panelOptions = getPanelPreferences(item);
+ return panelOptions?.display;
}
return (
@@ -207,56 +78,65 @@ function PanelsInner({ displayerMode: displayedMode }) {
onCloseDialog={closeDialog}
/>
- {accordionItems.map((item) => {
- const { title, component, id } = item;
- let toolbar;
-
- if (id === 'informationPanel') {
- toolbar = (
- {
- event.stopPropagation();
- openDialog('informationModal');
- }}
- />
- );
- }
- return (
- check(item) && (
+ {items
+ .filter((item) => isVisible(item))
+ .map((item) => {
+ const { title, component, id } = item;
+ return (
{
+ event.stopPropagation();
+ openDialog('informationModal');
+ }}
+ />
+ }
>
{component}
- )
- );
- })}
+ );
+ })}