From 74b5962db3ea4be72d48a5f6e33642f190bfb1f1 Mon Sep 17 00:00:00 2001
From: hamed-musallam <35760236+hamed-musallam@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:26:14 +0100
Subject: [PATCH] refactor: viewer nodes (#3326)

* refactor: viewer node tree

* test: fix expected integral size
---
 src/component/main/InnerNMRiumContents.tsx    | 30 +++++--------------
 ...aneWrapper.tsx => NMRiumViewerWrapper.tsx} | 18 +++++++++--
 test-e2e/panels/integral.test.ts              |  2 +-
 3 files changed, 24 insertions(+), 26 deletions(-)
 rename src/component/main/{SplitPaneWrapper.tsx => NMRiumViewerWrapper.tsx} (69%)

diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
index 1dd10397a..90f796789 100644
--- a/src/component/main/InnerNMRiumContents.tsx
+++ b/src/component/main/InnerNMRiumContents.tsx
@@ -14,26 +14,17 @@ 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 { PanelOpenProviderProvider, Panels } from '../panels/Panels.js';
+import { PanelOpenProviderProvider } from '../panels/Panels.js';
 import { PanelsBar } from '../panels/PanelsBar.js';
 import ToolBar from '../toolbar/ToolBar.js';
 
 import { useNMRiumRefAPI } from './NMRiumRefAPI.js';
 import { NMRiumViewer } from './NMRiumViewer.js';
-import { SplitPaneWrapper } from './SplitPaneWrapper.js';
+import { NMRiumViewerWrapper } from './NMRiumViewerWrapper.js';
 import { StateError } from './StateError.js';
 
 import type { NMRiumProps, NMRiumRefAPI } from './index.js';
 
-const viewerContainerStyle = css`
-  border: 0.55px #e6e6e6 solid;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  height: 100%;
-  margin-left: -1px;
-`;
-
 const containerStyles = css`
   background-color: white;
   width: 100%;
@@ -151,19 +142,14 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
                   height: '100%',
                 }}
               >
+                <KeysListenerTracker mainDivRef={mainDivRef} />
+
                 <PanelOpenProviderProvider>
                   <ToolBar />
-                  <SplitPaneWrapper>
-                    <div css={viewerContainerStyle}>
-                      <KeysListenerTracker mainDivRef={mainDivRef} />
-
-                      <NMRiumViewer
-                        emptyText={emptyText}
-                        viewerRef={viewerRef}
-                      />
-                    </div>
-                    <Panels />
-                  </SplitPaneWrapper>
+                  <NMRiumViewerWrapper
+                    viewerRef={viewerRef}
+                    emptyText={emptyText}
+                  />
                   <PanelsBar />
                 </PanelOpenProviderProvider>
                 <div
diff --git a/src/component/main/SplitPaneWrapper.tsx b/src/component/main/NMRiumViewerWrapper.tsx
similarity index 69%
rename from src/component/main/SplitPaneWrapper.tsx
rename to src/component/main/NMRiumViewerWrapper.tsx
index 5efb63842..210dc6dee 100644
--- a/src/component/main/SplitPaneWrapper.tsx
+++ b/src/component/main/NMRiumViewerWrapper.tsx
@@ -1,11 +1,22 @@
+import type { RefObject } from 'react';
 import type { SplitPaneSize } from 'react-science/ui';
 import { SplitPane } from 'react-science/ui';
 
 import { usePreferences } from '../context/PreferencesContext.js';
+import { Panels } from '../panels/Panels.js';
 import { useAccordionItems } from '../panels/hooks/useAccordionItems.js';
 import { useGetPanelOptions } from '../panels/hooks/useGetPanelOptions.js';
 
-export function SplitPaneWrapper({ children }) {
+import type { NMRiumProps } from './NMRium.js';
+import { NMRiumViewer } from './NMRiumViewer.js';
+
+interface NMRiumViewerWrapperProps {
+  viewerRef: RefObject<HTMLDivElement>;
+  emptyText: NMRiumProps['emptyText'];
+}
+
+export function NMRiumViewerWrapper(props: NMRiumViewerWrapperProps) {
+  const { emptyText, viewerRef } = props;
   const { current, dispatch } = usePreferences();
   const getPanelPreferences = useGetPanelOptions();
 
@@ -31,7 +42,7 @@ export function SplitPaneWrapper({ children }) {
   const hasDisplayedPanels = displayedPanels.length > 0;
 
   if (items?.length === 0 || !hasDisplayedPanels) {
-    return <div style={{ width: '100%', height: '100%' }}>{children}</div>;
+    return <NMRiumViewer emptyText={emptyText} viewerRef={viewerRef} />;
   }
 
   const closed: number | boolean = general?.hidePanelOnLoad
@@ -46,7 +57,8 @@ export function SplitPaneWrapper({ children }) {
       closed={closed}
       onResize={resizeHandler}
     >
-      {children}
+      <NMRiumViewer emptyText={emptyText} viewerRef={viewerRef} />
+      <Panels />
     </SplitPane>
   );
 }
diff --git a/test-e2e/panels/integral.test.ts b/test-e2e/panels/integral.test.ts
index 9f57dfc4d..b8be763a3 100644
--- a/test-e2e/panels/integral.test.ts
+++ b/test-e2e/panels/integral.test.ts
@@ -57,7 +57,7 @@ async function resizeIntegral(nmrium: NmriumPage) {
     '_react=IntegralsSeries >> _react=Integration >> nth=0 >> rect >> nth=0',
   );
   const { width } = (await container.boundingBox()) as BoundingBox;
-  expect(width).toBe(41);
+  expect(width).toBe(40);
 }
 
 async function deleteIntegral(nmrium: NmriumPage) {