From 155e0018c2fd8b87eee70c207051de9df55f0ada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pedro=20H=2E=20K=C3=B6hler?= <pedrokohlerbh@gmail.com>
Date: Tue, 29 Oct 2024 17:17:01 -0300
Subject: [PATCH] feat: remove unused white space (#247)

---
 src/components/SlideItem.tsx   |  2 +-
 src/components/SlideViewer.tsx | 61 ++++++++++++++++++++--------------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/components/SlideItem.tsx b/src/components/SlideItem.tsx
index 9f72038e..ccfced2a 100644
--- a/src/components/SlideItem.tsx
+++ b/src/components/SlideItem.tsx
@@ -102,7 +102,7 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
           attributes={attributes}
           selectable
         >
-          <div style={{ height: '100px' }} ref={this.overviewViewportRef} />
+          {(this.overviewViewportRef.current != null) && <div style={{ height: '100px' }} ref={this.overviewViewportRef} />}
         </Description>
       </Menu.Item>
     )
diff --git a/src/components/SlideViewer.tsx b/src/components/SlideViewer.tsx
index b434c946..5955e113 100644
--- a/src/components/SlideViewer.tsx
+++ b/src/components/SlideViewer.tsx
@@ -3670,21 +3670,25 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
           >
             <Space align='start' direction='vertical'>
               <InputNumber
-                placeholder={(
+                placeholder={
                   '[' +
                   `${this.state.validXCoordinateRange[0]}` +
                   ', ' +
                   `${this.state.validXCoordinateRange[1]}` +
                   ']'
-                )}
+                }
                 prefix='X Coordinate [mm]'
                 onChange={this.handleXCoordinateSelection}
                 onPressEnter={this.handleXCoordinateSelection}
                 controls={false}
                 addonAfter={
                   this.state.isSelectedXCoordinateValid
-                    ? <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-                    : <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                    ? (
+                      <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                      )
+                    : (
+                      <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                      )
                 }
               />
               <InputNumber
@@ -3701,8 +3705,12 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
                 controls={false}
                 addonAfter={
                   this.state.isSelectedYCoordinateValid
-                    ? <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-                    : <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                    ? (
+                      <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                      )
+                    : (
+                      <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                      )
                 }
               />
               <InputNumber
@@ -3713,8 +3721,12 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
                 controls={false}
                 addonAfter={
                   this.state.isSelectedMagnificationValid
-                    ? <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-                    : <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                    ? (
+                      <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                      )
+                    : (
+                      <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                      )
                 }
               />
             </Space>
@@ -3749,24 +3761,23 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
             forceSubMenuRender
             onOpenChange={() => {
               // Give menu item time to render before updating viewer size
-              setTimeout(
-                () => {
-                  if (this.labelViewer != null) {
-                    this.labelViewer.resize()
-                  }
-                },
-                100
-              )
+              setTimeout(() => {
+                if (this.labelViewer != null) {
+                  this.labelViewer.resize()
+                }
+              }, 100)
             }}
           >
-            <Menu.SubMenu key='label' title='Slide label'>
-              <Menu.Item style={{ height: '100%' }} key='image'>
-                <div
-                  style={{ height: '220px' }}
-                  ref={this.labelViewportRef}
-                />
-              </Menu.Item>
-            </Menu.SubMenu>
+            {this.labelViewportRef.current != null && (
+              <Menu.SubMenu key='label' title='Slide label'>
+                <Menu.Item style={{ height: '100%' }} key='image'>
+                  <div
+                    style={{ height: '220px' }}
+                    ref={this.labelViewportRef}
+                  />
+                </Menu.Item>
+              </Menu.SubMenu>
+            )}
             {specimenMenu}
             {equipmentMenu}
             {opticalPathMenu}
@@ -3798,7 +3809,7 @@ class SlideViewer extends React.Component<SlideViewerProps, SlideViewerState> {
           </Menu>
         </Layout.Sider>
         {this.state.isHoveredRoiTooltipVisible &&
-        (this.state.hoveredRoiAttributes.length > 0)
+        this.state.hoveredRoiAttributes.length > 0
           ? (
             <HoveredRoiTooltip
               xPosition={this.state.hoveredRoiTooltipX}