EDSC-4346: Make the entire map to be visible when I select data

static/src/js/App.jsx

@@ -66,7 +66,6 @@ const Admin = lazy(() => import('./routes/Admin/Admin'))
 const ContactInfo = lazy(() => import('./routes/ContactInfo/ContactInfo'))
 const Downloads = lazy(() => import('./routes/Downloads/Downloads'))
 const EarthdataDownloadRedirect = lazy(() => import('./routes/EarthdataDownloadRedirect/EarthdataDownloadRedirect'))
-const EdscMapContainer = lazy(() => import('./containers/MapContainer/MapContainer'))
 const Preferences = lazy(() => import('./routes/Preferences/Preferences'))
 const Project = lazy(() => import('./routes/Project/Project'))
 const Subscriptions = lazy(() => import('./routes/Subscriptions/Subscriptions'))
@@ -218,9 +217,6 @@ class App extends Component {
                             <>
                               <SearchTour />
                               <Search />
-                              <Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--white spinner--small" />}>
-                                <EdscMapContainer />
-                              </Suspense>
                             </>
                           )
                         }

static/src/js/__tests__/App.test.jsx

@@ -2,11 +2,7 @@ import React from 'react'
 import nock from 'nock'
 import { Helmet } from 'react-helmet'
 
-import {
-  render,
-  waitFor,
-  screen
-} from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 
 import * as AppConfig from '../../../../sharedUtils/config'
 import App from '../App'
@@ -285,13 +281,4 @@ describe('App component', () => {
     expect(canonical).toBeDefined()
     expect(canonical.href).toBe('https://search.earthdata.nasa.gov/search')
   })
-
-  // https://stackoverflow.com/questions/66667827/react-testing-library-to-cover-the-lazy-load/66690463
-  test('renders loaded lazy components', async () => {
-    setup()
-
-    await waitFor(() => {
-      expect(screen.getByTestId('mocked-map-container')).toBeInTheDocument()
-    })
-  })
 })

static/src/js/components/Panels/Panels.jsx

@@ -242,6 +242,22 @@ export class Panels extends PureComponent {
 
     event.preventDefault()
     event.stopPropagation()
+
+    // Get the main panel's (project-collections) width
+    const mainPanelEl = document.querySelector('.project-collections')
+    const mainPanelWidth = mainPanelEl ? mainPanelEl.clientWidth : 0
+
+    // Determine the collapsible panel width:
+    // When open, use this.width; when collapsed, assume a width of 0
+    const collapsiblePanelWidth = !show ? this.width : 0
+
+    // Calculate the total offset to be applied to the map
+    const totalOffset = mainPanelWidth + collapsiblePanelWidth
+
+    this.updateMapOffset(totalOffset)
+
+    // Update the CSS variable so the map shifts accordingly
+    document.documentElement.style.setProperty('--map-offset', `${totalOffset}px`)
   }
 
   onMouseDown(event) {
@@ -428,6 +444,14 @@ export class Panels extends PureComponent {
     }
   }
 
+  updateMapOffset(totalOffset) {
+    // First update the CSS variable
+    document.documentElement.style.setProperty('--map-offset', `${totalOffset}px`)
+
+    // Then dispatch the event
+    window.dispatchEvent(new CustomEvent('mapOffsetChanged'))
+  }
+
   disableHandleClickEvent() {
     this.handleClickIsValid = false
   }
@@ -446,6 +470,18 @@ export class Panels extends PureComponent {
   updatePanelWidth(width) {
     this.width = width
     this.container.style.width = `${width}px`
+
+    // Get the width of the main panel (project-collections)
+    const mainPanelEl = document.querySelector('.project-collections')
+    const mainPanelWidth = mainPanelEl ? mainPanelEl.clientWidth : 0
+
+    // Calculate the total offset: main panel + collapsible panel
+    const totalOffset = mainPanelWidth + width
+
+    // Update the CSS variable used by the map
+    document.documentElement.style.setProperty('--map-offset', `${totalOffset}px`)
+
+    this.updateMapOffset(totalOffset)
     this.updateResponsiveClassNames()
   }
 

static/src/js/components/Panels/__tests__/Panels.test.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import {
+  render,
+  screen,
+  fireEvent
+} from '@testing-library/react'
 
 import Panels from '../Panels'
 import { PanelSection } from '../PanelSection'
@@ -468,4 +472,176 @@ describe('Panels component', () => {
       expect(screen.getByTestId('panels-section')).not.toHaveClass('panels--is-open')
     })
   })
+
+  describe('Panels handle click map offset update', () => {
+    let mainPanelEl
+
+    beforeEach(() => {
+      mainPanelEl = document.createElement('div')
+      mainPanelEl.className = 'project-collections'
+      Object.defineProperty(mainPanelEl, 'clientWidth', {
+        configurable: true,
+        value: 500
+      })
+
+      document.body.appendChild(mainPanelEl)
+    })
+
+    afterEach(() => {
+      document.body.removeChild(mainPanelEl)
+    })
+
+    test('clicking handle when panel is open sets map offset correctly (panel closes)', () => {
+      setup(render, { show: true })
+
+      const dispatchSpy = jest.spyOn(window, 'dispatchEvent')
+
+      const handle = screen.getByTestId('panels__handle')
+      fireEvent.click(handle)
+
+      expect(document.documentElement.style.getPropertyValue('--map-offset')).toBe('500px')
+      expect(dispatchSpy).toHaveBeenCalledWith(expect.any(CustomEvent))
+
+      dispatchSpy.mockRestore()
+    })
+
+    test('clicking handle when panel is closed sets map offset correctly (panel opens)', () => {
+      setup(render, { show: false })
+
+      const dispatchSpy = jest.spyOn(window, 'dispatchEvent')
+      const handle = screen.getByTestId('panels__handle')
+      fireEvent.click(handle)
+
+      expect(document.documentElement.style.getPropertyValue('--map-offset')).toBe('1100px')
+      expect(dispatchSpy).toHaveBeenCalledWith(expect.any(CustomEvent))
+
+      dispatchSpy.mockRestore()
+    })
+  })
+
+  describe('updatePanelWidth', () => {
+    let mainPanelEl
+    let panelsRef
+
+    beforeEach(() => {
+      // Create and setup the main panel element
+      mainPanelEl = document.createElement('div')
+      mainPanelEl.className = 'project-collections'
+      Object.defineProperty(mainPanelEl, 'clientWidth', {
+        configurable: true,
+        value: 500
+      })
+
+      document.body.appendChild(mainPanelEl)
+    })
+
+    afterEach(() => {
+      mainPanelEl?.remove()
+    })
+
+    test('correctly updates panel width and map offset', () => {
+      // Create a ref to capture the Panels component instance
+      let panelsInstance
+      const TestWrapper = () => {
+        panelsRef = (ref) => {
+          panelsInstance = ref
+        }
+
+        return (
+          <Panels
+            ref={panelsRef}
+            show
+            activePanel="0.0.0"
+            draggable
+          >
+            <PanelSection>
+              <PanelGroup>
+                <PanelItem>Content</PanelItem>
+              </PanelGroup>
+            </PanelSection>
+          </Panels>
+        )
+      }
+
+      render(<TestWrapper />)
+
+      // Spy on the updateMapOffset method
+      const dispatchSpy = jest.spyOn(window, 'dispatchEvent')
+
+      // Call updatePanelWidth with a new width
+      const newWidth = 800
+      panelsInstance.updatePanelWidth(newWidth)
+
+      // Check if the panel width was updated correctly
+      expect(screen.getByTestId('panels-section')).toHaveStyle(`width: ${newWidth}px`)
+
+      // Check if the map offset was calculated and set correctly
+      const expectedOffset = 500 + newWidth // MainPanelWidth + newWidth
+      expect(document.documentElement.style.getPropertyValue('--map-offset'))
+        .toBe(`${expectedOffset}px`)
+
+      // Verify that the custom event was dispatched
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        expect.any(CustomEvent)
+      )
+
+      // Verify the event details
+      const dispatchedEvent = dispatchSpy.mock.calls[0][0]
+      expect(dispatchedEvent.type).toBe('mapOffsetChanged')
+
+      dispatchSpy.mockRestore()
+    })
+
+    test('handles missing main panel element', () => {
+      // Create a ref to capture the Panels component instance
+      let panelsInstance
+      const TestWrapper = () => {
+        panelsRef = (ref) => {
+          panelsInstance = ref
+        }
+
+        return (
+          <Panels
+            ref={panelsRef}
+            show
+            activePanel="0.0.0"
+            draggable
+          >
+            <PanelSection>
+              <PanelGroup>
+                <PanelItem>Content</PanelItem>
+              </PanelGroup>
+            </PanelSection>
+          </Panels>
+        )
+      }
+
+      render(<TestWrapper />)
+
+      // Remove the main panel element to test the fallback
+      mainPanelEl?.remove()
+
+      // Spy on the updateMapOffset method
+      const dispatchSpy = jest.spyOn(window, 'dispatchEvent')
+
+      // Call updatePanelWidth with a new width
+      const newWidth = 800
+      panelsInstance.updatePanelWidth(newWidth)
+
+      // Check if the panel width was updated correctly
+      expect(screen.getByTestId('panels-section')).toHaveStyle(`width: ${newWidth}px`)
+
+      // Check if the map offset was calculated correctly with 0 for mainPanelWidth
+      const expectedOffset = newWidth // 0 + newWidth
+      expect(document.documentElement.style.getPropertyValue('--map-offset'))
+        .toBe(`${expectedOffset}px`)
+
+      // Verify that the custom event was still dispatched
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        expect.any(CustomEvent)
+      )
+
+      dispatchSpy.mockRestore()
+    })
+  })
 })

static/src/js/components/Sidebar/Sidebar.jsx

@@ -5,19 +5,19 @@ import SimpleBar from 'simplebar-react'
 
 import './Sidebar.scss'
 
-const Sidebar = ({
+const Sidebar = React.forwardRef(({
   children,
   panels,
   visible,
   headerChildren
-}) => {
+}, ref) => {
   const className = classNames({
     sidebar: true,
     'sidebar--hidden': !visible
   })
 
   return (
-    <section className={className}>
+    <section className={className} ref={ref}>
       <div className="sidebar__inner">
         { headerChildren }
         <SimpleBar
@@ -34,7 +34,7 @@ const Sidebar = ({
       {panels && panels}
     </section>
   )
-}
+})
 
 Sidebar.defaultProps = {
   panels: null,
@@ -48,4 +48,6 @@ Sidebar.propTypes = {
   headerChildren: PropTypes.node
 }
 
+Sidebar.displayName = 'Sidebar'
+
 export default Sidebar

static/src/js/containers/MapContainer/MapContainer.scss

@@ -2,11 +2,11 @@
 
 .map {
   position: absolute;
-  left: 0;
+  left: var(--map-offset, 0);
   bottom: 0;
   top: 0;
   right: 0;
-  width: 100%;
+  width: calc(100% - var(--map-offset, 0));
   align-items: center;
   justify-content: center;
   flex-basis: auto;
@@ -19,4 +19,4 @@
   .is-panels-dragging & {
     pointer-events: none;
   }
-}
+}

static/src/js/containers/MapContainer/MapEvents.jsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { useMap, useMapEvents } from 'react-leaflet'
 
@@ -25,6 +25,18 @@ const MapEvents = (props) => {
     }
   })
 
+  useEffect(() => {
+    const handleMapOffsetChange = () => {
+      map.invalidateSize()
+    }
+
+    window.addEventListener('mapOffsetChanged', handleMapOffsetChange)
+
+    return () => {
+      window.removeEventListener('mapOffsetChanged', handleMapOffsetChange)
+    }
+  }, [map])
+
   const handleOverlayChange = (event) => {
     const enabled = event.type === 'overlayadd'
     switch (event.name) {