feat: implement right-side panels bar (#3318)

* feat: improve panels * refactor: panels bar * test: adjust range * refactor: split provider * chore: update react-science * refactor: panels options and components * test: change the value of visible and display to true to display the database panel * feat: panel context to handle default open panel when toggling * chore: fix types * refactor: remove split state * chore: update nmr-load-save
cheminfo · Jan 9, 2025 · a4be76f · a4be76f
1 parent ce057f9
commit a4be76f
Showing 30 changed files with 653 additions and 308 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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.2.0",
+    "nmr-load-save": "^2.3.0",
     "nmr-processing": "^14.0.5",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",

diff --git a/src/component/hooks/useToolsFunctions.ts b/src/component/hooks/useToolsFunctions.ts
@@ -7,7 +7,7 @@ import { useChartData } from '../context/ChartContext.js';
 import { useDispatch } from '../context/DispatchContext.js';
 import { usePreferences } from '../context/PreferencesContext.js';
 import { useToaster } from '../context/ToasterContext.js';
-import { TOOLS_PANELS_ACCORDION } from '../panels/Panels.js';
+import { TOOLS_PANELS_ACCORDION } from '../panels/accordionItems.js';
 import { options } from '../toolbar/ToolTypes.js';
 
 export default function useToolsFunctions() {

diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
@@ -14,7 +14,8 @@ import { ExportManagerController } from '../elements/export/ExportManager.js';
 import { PrintContent } from '../elements/print/PrintContent.js';
 import { Header } from '../header/Header.js';
 import DropZone from '../loader/DropZone.js';
-import Panels from '../panels/Panels.js';
+import { PanelOpenProviderProvider, Panels } from '../panels/Panels.js';
+import { PanelsBar } from '../panels/PanelsBar.js';
 import ToolBar from '../toolbar/ToolBar.js';
 
 import { useNMRiumRefAPI } from './NMRiumRefAPI.js';
@@ -150,15 +151,21 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
                   height: '100%',
                 }}
               >
-                <ToolBar />
-                <SplitPaneWrapper>
-                  <div css={viewerContainerStyle}>
-                    <KeysListenerTracker mainDivRef={mainDivRef} />
-
-                    <NMRiumViewer emptyText={emptyText} viewerRef={viewerRef} />
-                  </div>
-                  <Panels />
-                </SplitPaneWrapper>
+                <PanelOpenProviderProvider>
+                  <ToolBar />
+                  <SplitPaneWrapper>
+                    <div css={viewerContainerStyle}>
+                      <KeysListenerTracker mainDivRef={mainDivRef} />
+
+                      <NMRiumViewer
+                        emptyText={emptyText}
+                        viewerRef={viewerRef}
+                      />
+                    </div>
+                    <Panels />
+                  </SplitPaneWrapper>
+                  <PanelsBar />
+                </PanelOpenProviderProvider>
                 <div
                   ref={elementsWrapperRef}
                   key={String(isFullScreen)}

diff --git a/src/component/main/SplitPaneWrapper.tsx b/src/component/main/SplitPaneWrapper.tsx
@@ -2,13 +2,18 @@ import type { SplitPaneSize } from 'react-science/ui';
 import { SplitPane } from 'react-science/ui';
 
 import { usePreferences } from '../context/PreferencesContext.js';
+import { useAccordionItems } from '../panels/hooks/useAccordionItems.js';
+import { useGetPanelOptions } from '../panels/hooks/useGetPanelOptions.js';
 
 export function SplitPaneWrapper({ children }) {
   const { current, dispatch } = usePreferences();
+  const getPanelPreferences = useGetPanelOptions();
+
   const {
     general: { verticalSplitterPosition, verticalSplitterCloseThreshold },
     display: { general = {} },
   } = current;
+  const items = useAccordionItems();
 
   function resizeHandler(value: SplitPaneSize) {
     dispatch({
@@ -19,12 +24,26 @@ export function SplitPaneWrapper({ children }) {
     });
   }
 
+  const displayedPanels = items.filter((item) => {
+    const panelOptions = getPanelPreferences(item);
+    return panelOptions.display;
+  });
+  const hasDisplayedPanels = displayedPanels.length > 0;
+
+  if (items?.length === 0 || !hasDisplayedPanels) {
+    return <div style={{ width: '100%', height: '100%' }}>{children}</div>;
+  }
+
+  const closed: number | boolean = general?.hidePanelOnLoad
+    ? true
+    : verticalSplitterCloseThreshold;
+
   return (
     <SplitPane
       size={verticalSplitterPosition}
       direction="horizontal"
       controlledSide="end"
-      closed={general?.hidePanelOnLoad ? true : verticalSplitterCloseThreshold}
+      closed={closed}
       onResize={resizeHandler}
     >
       {children}

diff --git 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 }) => (
+          <Checkbox
+            style={{ margin: 0 }}
+            {...register(`display.${row.original.name}.visible`)}
+            defaultChecked={false}
+          />
+        ),
+      },
+      {
+        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 }) => (