From 3c46798ad1fa98a06fa3f895eeac110258d02a0f Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Sun, 2 Feb 2025 21:11:00 -0500
Subject: [PATCH 01/24] EDSC-4346 Creating MapLayoutContainer

---
 static/src/js/App.jsx                         |   4 -
 .../MapLayoutContainer/MapLayoutContainer.jsx | 108 ++++++++++++++++++
 static/src/js/routes/Search/Search.jsx        |  23 +++-
 3 files changed, 130 insertions(+), 5 deletions(-)
 create mode 100644 static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx

diff --git a/static/src/js/App.jsx b/static/src/js/App.jsx
index 336a4ed444..fb11091ac7 100644
--- a/static/src/js/App.jsx
+++ b/static/src/js/App.jsx
@@ -67,7 +67,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 Subscriptions = lazy(() => import('./routes/Subscriptions/Subscriptions'))
 
@@ -216,9 +215,6 @@ class App extends Component {
                             <>
                               <SearchTour />
                               <Search />
-                              <Suspense fallback={<Spinner type="dots" className="root__spinner spinner spinner--dots spinner--white spinner--small" />}>
-                                <EdscMapContainer />
-                              </Suspense>
                             </>
                           )
                         }
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
new file mode 100644
index 0000000000..9db57391f2
--- /dev/null
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
@@ -0,0 +1,108 @@
+import React, {
+  useEffect,
+  useRef,
+  useState
+} from 'react'
+import PropTypes from 'prop-types'
+
+const MapLayoutContainer = ({ children }) => {
+  const [mapOffset, setMapOffset] = useState(0)
+  const searchPanelRef = useRef(null)
+
+  useEffect(() => {
+    const updateMapOffset = () => {
+      if (searchPanelRef.current) {
+        const sidebarEl = document.querySelector('.sidebar')
+        const panelEl = document.querySelector('.panels')
+        const panelsSection = document.querySelector('.panels')
+
+        let totalOffset = 0
+
+        // Only add panel width if panels are open
+        if (sidebarEl) totalOffset += sidebarEl.getBoundingClientRect().width
+        if (panelEl && panelsSection?.classList.contains('panels--is-open')) {
+          totalOffset += panelEl.getBoundingClientRect().width
+        }
+
+        setMapOffset(totalOffset)
+      }
+    }
+
+    // Initial calculation
+    updateMapOffset()
+
+    // Create mutation observer to watch for class changes on panels
+    const mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          updateMapOffset()
+        }
+      })
+    })
+
+    // Watch both body (for drag state) and panels section (for open/closed state)
+    mutationObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+
+    const panelsSection = document.querySelector('.panels')
+    if (panelsSection) {
+      mutationObserver.observe(panelsSection, {
+        attributes: true,
+        attributeFilter: ['class']
+      })
+    }
+
+    // Set up resize observer to handle panel size changes
+    const resizeObserver = new ResizeObserver(updateMapOffset)
+
+    // Observe both sidebar and panels for size changes
+    const sidebarEl = document.querySelector('.sidebar')
+    const panelEl = document.querySelector('.panels')
+
+    if (sidebarEl) resizeObserver.observe(sidebarEl)
+    if (panelEl) resizeObserver.observe(panelEl)
+
+    // Handle window resize events
+    window.addEventListener('resize', updateMapOffset)
+
+    return () => {
+      mutationObserver.disconnect()
+      resizeObserver.disconnect()
+      window.removeEventListener('resize', updateMapOffset)
+    }
+  }, [])
+
+  // Split children into Search and Map components
+  const [searchPanel, mapComponent] = React.Children.toArray(children)
+
+  return (
+    <div className="relative w-full h-full">
+      <div ref={searchPanelRef}>
+        {searchPanel}
+      </div>
+      <div
+        style={
+          {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: `${mapOffset}px`,
+            right: 0,
+            overflow: 'hidden',
+            transition: 'left 0.1s ease-out'
+          }
+        }
+      >
+        {mapComponent}
+      </div>
+    </div>
+  )
+}
+
+MapLayoutContainer.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default MapLayoutContainer
diff --git a/static/src/js/routes/Search/Search.jsx b/static/src/js/routes/Search/Search.jsx
index 2f9c63f848..423d9c35e9 100644
--- a/static/src/js/routes/Search/Search.jsx
+++ b/static/src/js/routes/Search/Search.jsx
@@ -29,6 +29,7 @@ import AdvancedSearchModalContainer
   from '../../containers/AdvancedSearchModalContainer/AdvancedSearchModalContainer'
 import FacetsContainer from '../../containers/FacetsContainer/FacetsContainer'
 import FacetsModalContainer from '../../containers/FacetsModalContainer/FacetsModalContainer'
+import MapLayoutContainer from '../../containers/MapLayoutContainer/MapLayoutContainer'
 import PortalBrowserModalContainer
   from '../../containers/PortalBrowserModalContainer/PortalBrowserModalContainer'
 import PortalFeatureContainer from '../../containers/PortalFeatureContainer/PortalFeatureContainer'
@@ -42,6 +43,7 @@ import SidebarContainer from '../../containers/SidebarContainer/SidebarContainer
 import SidebarSection from '../../components/Sidebar/SidebarSection'
 import SidebarFiltersItem from '../../components/Sidebar/SidebarFiltersItem'
 import SidebarFiltersList from '../../components/Sidebar/SidebarFiltersList'
+import Spinner from '../../components/Spinner/Spinner'
 import EDSCIcon from '../../components/EDSCIcon/EDSCIcon'
 
 import actions from '../../actions'
@@ -49,6 +51,7 @@ import advancedSearchFields from '../../data/advancedSearchFields'
 import Button from '../../components/Button/Button'
 
 const CollectionDetailsHighlightsContainer = lazy(() => import('../../containers/CollectionDetailsHighlightsContainer/CollectionDetailsHighlightsContainer'))
+const EdscMapContainer = lazy(() => import('../../containers/MapContainer/MapContainer'))
 const GranuleResultsHighlightsContainer = lazy(() => import('../../containers/GranuleResultsHighlightsContainer/GranuleResultsHighlightsContainer'))
 const GranuleFiltersContainer = lazy(() => import('../../containers/GranuleFiltersContainer/GranuleFiltersContainer'))
 
@@ -134,7 +137,7 @@ export const Search = ({
     </SidebarSection>
   )
 
-  return (
+  const searchComponent = (
     <div className="route-wrapper route-wrapper--search search">
       <SidebarContainer
         headerChildren={(
@@ -254,6 +257,24 @@ export const Search = ({
       </div>
     </div>
   )
+
+  return (
+    <MapLayoutContainer>
+      {searchComponent}
+      <Suspense
+        fallback={
+          (
+            <Spinner
+              type="dots"
+              className="root__spinner spinner spinner--dots spinner--white spinner--small"
+            />
+          )
+        }
+      >
+        <EdscMapContainer />
+      </Suspense>
+    </MapLayoutContainer>
+  )
 }
 
 Search.propTypes = {

From 0f02498b33041656e0d5dd02121110f7bc9dc18d Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Sun, 2 Feb 2025 22:26:20 -0500
Subject: [PATCH 02/24] EDSC-4346 Refactoring

---
 .../containers/MapContainer/MapContainer.scss |  5 +-
 .../MapLayoutContainer/MapLayoutContainer.jsx | 94 +++++++++++--------
 .../SidebarContainer/SidebarContainer.jsx     |  4 +-
 static/src/js/routes/Search/Search.jsx        | 19 ++--
 4 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/static/src/js/containers/MapContainer/MapContainer.scss b/static/src/js/containers/MapContainer/MapContainer.scss
index 2541fe3b68..6512b83cb8 100644
--- a/static/src/js/containers/MapContainer/MapContainer.scss
+++ b/static/src/js/containers/MapContainer/MapContainer.scss
@@ -1,10 +1,9 @@
 .map {
   position: absolute;
-  left: 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;
@@ -17,4 +16,4 @@
   .is-panels-dragging & {
     pointer-events: none;
   }
-}
+}
\ No newline at end of file
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
index 9db57391f2..1ee97da857 100644
--- a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
@@ -1,37 +1,35 @@
-import React, {
-  useEffect,
-  useRef,
-  useState
-} from 'react'
+// MapLayoutContainer.jsx
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
-const MapLayoutContainer = ({ children }) => {
-  const [mapOffset, setMapOffset] = useState(0)
-  const searchPanelRef = useRef(null)
+const MapLayoutContainer = ({ children, panelsRef, routeType }) => {
+  const containerRef = useRef(null)
 
   useEffect(() => {
     const updateMapOffset = () => {
-      if (searchPanelRef.current) {
+      if (containerRef.current) {
         const sidebarEl = document.querySelector('.sidebar')
         const panelEl = document.querySelector('.panels')
         const panelsSection = document.querySelector('.panels')
 
         let totalOffset = 0
 
-        // Only add panel width if panels are open
+        // Add sidebar width if available
         if (sidebarEl) totalOffset += sidebarEl.getBoundingClientRect().width
+        // Add panels width if panels are open
         if (panelEl && panelsSection?.classList.contains('panels--is-open')) {
           totalOffset += panelEl.getBoundingClientRect().width
         }
 
-        setMapOffset(totalOffset)
+        // Update the CSS variable on the container
+        containerRef.current.style.setProperty('--map-offset', `${totalOffset}px`)
       }
     }
 
     // Initial calculation
     updateMapOffset()
 
-    // Create mutation observer to watch for class changes on panels
+    // Observe DOM mutations and resize events
     const mutationObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === 'class') {
@@ -40,7 +38,6 @@ const MapLayoutContainer = ({ children }) => {
       })
     })
 
-    // Watch both body (for drag state) and panels section (for open/closed state)
     mutationObserver.observe(document.body, {
       attributes: true,
       attributeFilter: ['class']
@@ -54,17 +51,12 @@ const MapLayoutContainer = ({ children }) => {
       })
     }
 
-    // Set up resize observer to handle panel size changes
     const resizeObserver = new ResizeObserver(updateMapOffset)
-
-    // Observe both sidebar and panels for size changes
     const sidebarEl = document.querySelector('.sidebar')
     const panelEl = document.querySelector('.panels')
-
     if (sidebarEl) resizeObserver.observe(sidebarEl)
     if (panelEl) resizeObserver.observe(panelEl)
 
-    // Handle window resize events
     window.addEventListener('resize', updateMapOffset)
 
     return () => {
@@ -74,35 +66,57 @@ const MapLayoutContainer = ({ children }) => {
     }
   }, [])
 
-  // Split children into Search and Map components
-  const [searchPanel, mapComponent] = React.Children.toArray(children)
+  // Convert children to an array for processing
+  const childrenArray = React.Children.toArray(children)
+
+  // Process children to clone the SidebarContainer with the panelsRef.
+  const processedChildren = childrenArray.map((child) => {
+    // Ensure the child is a valid React element
+    if (React.isValidElement(child)) {
+      // If this element itself is the SidebarContainer, clone it with the ref
+      if (child.type.displayName === 'SidebarContainer') {
+        return React.cloneElement(child, { ref: panelsRef })
+      }
+
+      // Otherwise, if the element has children, process them recursively
+      if (child.props && child.props.children) {
+        const updatedChild = React.cloneElement(child, {
+          children: React.Children.map(child.props.children, (subChild) => {
+            if (React.isValidElement(subChild) && subChild.type.displayName === 'SidebarContainer') {
+              return React.cloneElement(subChild, { ref: panelsRef })
+            }
+
+            return subChild
+          })
+        })
+
+        return updatedChild
+      }
+    }
+
+    return child
+  })
+
+  const [sidePanel, mapComponent] = processedChildren
 
   return (
-    <div className="relative w-full h-full">
-      <div ref={searchPanelRef}>
-        {searchPanel}
-      </div>
-      <div
-        style={
-          {
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: `${mapOffset}px`,
-            right: 0,
-            overflow: 'hidden',
-            transition: 'left 0.1s ease-out'
-          }
-        }
-      >
-        {mapComponent}
-      </div>
+    <div className="relative w-full h-full" ref={containerRef}>
+      {sidePanel}
+      {mapComponent}
     </div>
   )
 }
 
 MapLayoutContainer.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  // PanelsRef is a ref that will be attached to the sidebar component
+  panelsRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any })
+  ]).isRequired,
+  // RouteType can be 'search' or 'project' (if you need to change behavior based on the route)
+  routeType: PropTypes.oneOf(['search', 'project']).isRequired
 }
 
 export default MapLayoutContainer
diff --git a/static/src/js/containers/SidebarContainer/SidebarContainer.jsx b/static/src/js/containers/SidebarContainer/SidebarContainer.jsx
index 6503071e41..8b9bdb3130 100644
--- a/static/src/js/containers/SidebarContainer/SidebarContainer.jsx
+++ b/static/src/js/containers/SidebarContainer/SidebarContainer.jsx
@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { withRouter } from 'react-router-dom'
-
 import { isPath } from '../../util/isPath'
 import { locationPropType } from '../../util/propTypes/location'
-
 import Sidebar from '../../components/Sidebar/Sidebar'
 
 export const SidebarContainer = ({
@@ -46,4 +44,6 @@ SidebarContainer.propTypes = {
   headerChildren: PropTypes.node
 }
 
+SidebarContainer.displayName = 'SidebarContainer'
+
 export default withRouter(SidebarContainer)
diff --git a/static/src/js/routes/Search/Search.jsx b/static/src/js/routes/Search/Search.jsx
index 423d9c35e9..e7c0eb5a73 100644
--- a/static/src/js/routes/Search/Search.jsx
+++ b/static/src/js/routes/Search/Search.jsx
@@ -1,5 +1,6 @@
 import React, {
   useState,
+  useRef,
   lazy,
   Suspense
 } from 'react'
@@ -15,29 +16,23 @@ import {
   OverlayTrigger,
   Tooltip
 } from 'react-bootstrap'
-
 import {
   FaSitemap,
   FaQuestionCircle,
   FaFilter,
   FaMap
 } from 'react-icons/fa'
-
 import { AlertInformation } from '@edsc/earthdata-react-icons/horizon-design-system/earthdata/ui'
 
-import AdvancedSearchModalContainer
-  from '../../containers/AdvancedSearchModalContainer/AdvancedSearchModalContainer'
+import AdvancedSearchModalContainer from '../../containers/AdvancedSearchModalContainer/AdvancedSearchModalContainer'
 import FacetsContainer from '../../containers/FacetsContainer/FacetsContainer'
 import FacetsModalContainer from '../../containers/FacetsModalContainer/FacetsModalContainer'
 import MapLayoutContainer from '../../containers/MapLayoutContainer/MapLayoutContainer'
-import PortalBrowserModalContainer
-  from '../../containers/PortalBrowserModalContainer/PortalBrowserModalContainer'
+import PortalBrowserModalContainer from '../../containers/PortalBrowserModalContainer/PortalBrowserModalContainer'
 import PortalFeatureContainer from '../../containers/PortalFeatureContainer/PortalFeatureContainer'
-import RelatedUrlsModalContainer
-  from '../../containers/RelatedUrlsModalContainer/RelatedUrlsModalContainer'
+import RelatedUrlsModalContainer from '../../containers/RelatedUrlsModalContainer/RelatedUrlsModalContainer'
 import SearchPanelsContainer from '../../containers/SearchPanelsContainer/SearchPanelsContainer'
-import SearchSidebarHeaderContainer
-  from '../../containers/SearchSidebarHeaderContainer/SearchSidebarHeaderContainer'
+import SearchSidebarHeaderContainer from '../../containers/SearchSidebarHeaderContainer/SearchSidebarHeaderContainer'
 import SidebarContainer from '../../containers/SidebarContainer/SidebarContainer'
 
 import SidebarSection from '../../components/Sidebar/SidebarSection'
@@ -86,6 +81,8 @@ export const Search = ({
 }) => {
   const { path } = match
   const [granuleFiltersNeedsReset, setGranuleFiltersNeedReset] = useState(false)
+  // Create a ref for the sidebar panels
+  const SearchPanelsRef = useRef(null)
 
   const {
     hasGranulesOrCwic = false,
@@ -259,7 +256,7 @@ export const Search = ({
   )
 
   return (
-    <MapLayoutContainer>
+    <MapLayoutContainer panelsRef={SearchPanelsRef} routeType="search">
       {searchComponent}
       <Suspense
         fallback={

From 09ac0cd79c55be68bd2057b4f4e47cc9ac0693e6 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Mon, 3 Feb 2025 14:48:45 -0500
Subject: [PATCH 03/24] EDSC-4346 Fixing Projects endpoint map resizing

---
 static/src/js/components/Panels/Panels.jsx    | 25 +++++++++++++++++++
 static/src/js/components/Sidebar/Sidebar.jsx  | 10 +++++---
 .../containers/MapContainer/MapContainer.scss |  1 +
 .../SidebarContainer/SidebarContainer.jsx     |  7 +++---
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/static/src/js/components/Panels/Panels.jsx b/static/src/js/components/Panels/Panels.jsx
index e9a9e24b65..cbf458263d 100644
--- a/static/src/js/components/Panels/Panels.jsx
+++ b/static/src/js/components/Panels/Panels.jsx
@@ -242,6 +242,20 @@ 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
+
+    // Update the CSS variable so the map shifts accordingly
+    document.documentElement.style.setProperty('--map-offset', `${totalOffset}px`)
   }
 
   onMouseDown(event) {
@@ -446,6 +460,17 @@ 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.updateResponsiveClassNames()
   }
 
diff --git a/static/src/js/components/Sidebar/Sidebar.jsx b/static/src/js/components/Sidebar/Sidebar.jsx
index 548195e66a..6b87f0dd49 100644
--- a/static/src/js/components/Sidebar/Sidebar.jsx
+++ b/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
diff --git a/static/src/js/containers/MapContainer/MapContainer.scss b/static/src/js/containers/MapContainer/MapContainer.scss
index 6512b83cb8..18bf1e0bfc 100644
--- a/static/src/js/containers/MapContainer/MapContainer.scss
+++ b/static/src/js/containers/MapContainer/MapContainer.scss
@@ -1,5 +1,6 @@
 .map {
   position: absolute;
+  left: var(--map-offset, 0);
   bottom: 0;
   top: 0;
   right: 0;
diff --git a/static/src/js/containers/SidebarContainer/SidebarContainer.jsx b/static/src/js/containers/SidebarContainer/SidebarContainer.jsx
index 8b9bdb3130..ccb82903d3 100644
--- a/static/src/js/containers/SidebarContainer/SidebarContainer.jsx
+++ b/static/src/js/containers/SidebarContainer/SidebarContainer.jsx
@@ -5,12 +5,12 @@ import { isPath } from '../../util/isPath'
 import { locationPropType } from '../../util/propTypes/location'
 import Sidebar from '../../components/Sidebar/Sidebar'
 
-export const SidebarContainer = ({
+export const SidebarContainer = React.forwardRef(({
   children,
   location,
   panels,
   headerChildren
-}) => {
+}, ref) => {
   const sidebarVisible = isPath(location.pathname, [
     '/search',
     '/search/granules',
@@ -23,6 +23,7 @@ export const SidebarContainer = ({
 
   return (
     <Sidebar
+      ref={ref}
       panels={panels}
       visible={sidebarVisible}
       headerChildren={headerChildren}
@@ -30,7 +31,7 @@ export const SidebarContainer = ({
       {children}
     </Sidebar>
   )
-}
+})
 
 SidebarContainer.defaultProps = {
   panels: null,

From faf53c8fc0211e5667f6bc206da3f548f7d174e2 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Tue, 4 Feb 2025 16:09:29 -0500
Subject: [PATCH 04/24] EDSC-4346 Fixing map tile rendering

---
 static/src/js/components/Panels/Panels.jsx        | 11 +++++++++++
 .../src/js/containers/MapContainer/MapEvents.jsx  | 15 ++++++++++++++-
 .../MapLayoutContainer/MapLayoutContainer.jsx     |  9 +++++----
 static/src/js/routes/Search/Search.jsx            |  2 +-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/static/src/js/components/Panels/Panels.jsx b/static/src/js/components/Panels/Panels.jsx
index cbf458263d..5583375465 100644
--- a/static/src/js/components/Panels/Panels.jsx
+++ b/static/src/js/components/Panels/Panels.jsx
@@ -254,6 +254,8 @@ export class Panels extends PureComponent {
     // 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`)
   }
@@ -442,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
   }
@@ -471,6 +481,7 @@ export class Panels extends PureComponent {
     // Update the CSS variable used by the map
     document.documentElement.style.setProperty('--map-offset', `${totalOffset}px`)
 
+    this.updateMapOffset(totalOffset)
     this.updateResponsiveClassNames()
   }
 
diff --git a/static/src/js/containers/MapContainer/MapEvents.jsx b/static/src/js/containers/MapContainer/MapEvents.jsx
index b74a62c2d2..a13bb11939 100644
--- a/static/src/js/containers/MapContainer/MapEvents.jsx
+++ b/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,19 @@ const MapEvents = (props) => {
     }
   })
 
+  useEffect(() => {
+    // Handle map offset changes
+    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) {
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
index 1ee97da857..2240b748f0 100644
--- a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
-const MapLayoutContainer = ({ children, panelsRef, routeType }) => {
+const MapLayoutContainer = ({ children, panelsRef }) => {
   const containerRef = useRef(null)
 
   useEffect(() => {
@@ -23,6 +23,9 @@ const MapLayoutContainer = ({ children, panelsRef, routeType }) => {
 
         // Update the CSS variable on the container
         containerRef.current.style.setProperty('--map-offset', `${totalOffset}px`)
+
+        // Dispatch the event
+        window.dispatchEvent(new CustomEvent('mapOffsetChanged'))
       }
     }
 
@@ -114,9 +117,7 @@ MapLayoutContainer.propTypes = {
     PropTypes.func,
     // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any })
-  ]).isRequired,
-  // RouteType can be 'search' or 'project' (if you need to change behavior based on the route)
-  routeType: PropTypes.oneOf(['search', 'project']).isRequired
+  ]).isRequired
 }
 
 export default MapLayoutContainer
diff --git a/static/src/js/routes/Search/Search.jsx b/static/src/js/routes/Search/Search.jsx
index e7c0eb5a73..aac31f30d5 100644
--- a/static/src/js/routes/Search/Search.jsx
+++ b/static/src/js/routes/Search/Search.jsx
@@ -256,7 +256,7 @@ export const Search = ({
   )
 
   return (
-    <MapLayoutContainer panelsRef={SearchPanelsRef} routeType="search">
+    <MapLayoutContainer panelsRef={SearchPanelsRef}>
       {searchComponent}
       <Suspense
         fallback={

From 753965a4e01d467db2d8f93263b273a06e48237f Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Fri, 7 Feb 2025 14:54:10 -0500
Subject: [PATCH 05/24] EDSC-4346 Test updates

---
 static/src/js/__tests__/App.test.jsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/static/src/js/__tests__/App.test.jsx b/static/src/js/__tests__/App.test.jsx
index 5bc9c203d6..51d615721d 100644
--- a/static/src/js/__tests__/App.test.jsx
+++ b/static/src/js/__tests__/App.test.jsx
@@ -285,13 +285,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()
-    })
-  })
 })

From 50d94f54b1f48fe75380e4034a104f325c0b5030 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Fri, 7 Feb 2025 15:05:57 -0500
Subject: [PATCH 06/24] EDSC-4346 Removing unused vars

---
 static/src/js/__tests__/App.test.jsx             |  6 +-----
 .../src/js/containers/MapContainer/MapEvents.jsx |  1 -
 .../MapLayoutContainer/MapLayoutContainer.jsx    | 16 ++--------------
 3 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/static/src/js/__tests__/App.test.jsx b/static/src/js/__tests__/App.test.jsx
index 51d615721d..1ff71081d6 100644
--- a/static/src/js/__tests__/App.test.jsx
+++ b/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'
diff --git a/static/src/js/containers/MapContainer/MapEvents.jsx b/static/src/js/containers/MapContainer/MapEvents.jsx
index a13bb11939..bcc6de9356 100644
--- a/static/src/js/containers/MapContainer/MapEvents.jsx
+++ b/static/src/js/containers/MapContainer/MapEvents.jsx
@@ -26,7 +26,6 @@ const MapEvents = (props) => {
   })
 
   useEffect(() => {
-    // Handle map offset changes
     const handleMapOffsetChange = () => {
       map.invalidateSize()
     }
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
index 2240b748f0..b3f8e5c808 100644
--- a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
@@ -1,4 +1,3 @@
-// MapLayoutContainer.jsx
 import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
@@ -14,22 +13,18 @@ const MapLayoutContainer = ({ children, panelsRef }) => {
 
         let totalOffset = 0
 
-        // Add sidebar width if available
         if (sidebarEl) totalOffset += sidebarEl.getBoundingClientRect().width
+
         // Add panels width if panels are open
         if (panelEl && panelsSection?.classList.contains('panels--is-open')) {
           totalOffset += panelEl.getBoundingClientRect().width
         }
 
-        // Update the CSS variable on the container
         containerRef.current.style.setProperty('--map-offset', `${totalOffset}px`)
-
-        // Dispatch the event
         window.dispatchEvent(new CustomEvent('mapOffsetChanged'))
       }
     }
 
-    // Initial calculation
     updateMapOffset()
 
     // Observe DOM mutations and resize events
@@ -69,19 +64,14 @@ const MapLayoutContainer = ({ children, panelsRef }) => {
     }
   }, [])
 
-  // Convert children to an array for processing
   const childrenArray = React.Children.toArray(children)
 
-  // Process children to clone the SidebarContainer with the panelsRef.
   const processedChildren = childrenArray.map((child) => {
-    // Ensure the child is a valid React element
     if (React.isValidElement(child)) {
-      // If this element itself is the SidebarContainer, clone it with the ref
       if (child.type.displayName === 'SidebarContainer') {
         return React.cloneElement(child, { ref: panelsRef })
       }
 
-      // Otherwise, if the element has children, process them recursively
       if (child.props && child.props.children) {
         const updatedChild = React.cloneElement(child, {
           children: React.Children.map(child.props.children, (subChild) => {
@@ -112,11 +102,9 @@ const MapLayoutContainer = ({ children, panelsRef }) => {
 
 MapLayoutContainer.propTypes = {
   children: PropTypes.node.isRequired,
-  // PanelsRef is a ref that will be attached to the sidebar component
   panelsRef: PropTypes.oneOfType([
     PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any })
+    PropTypes.shape({ current: PropTypes.instanceOf(HTMLDivElement) })
   ]).isRequired
 }
 

From 99ade41e918825f76a368f3b26edd965059c619e Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Mon, 10 Feb 2025 10:52:12 -0500
Subject: [PATCH 07/24] EDSC-4346 Adding test coverage

---
 .../Panels/__tests__/Panels.test.jsx          | 52 +++++++++++++-
 .../MapContainer/__tests__/MapEvents.test.js  | 71 +++++++++++++++++++
 .../MapLayoutContainer/MapLayoutContainer.jsx |  3 +-
 .../MapLayoutContainer.scss                   |  3 +
 4 files changed, 127 insertions(+), 2 deletions(-)
 create mode 100644 static/src/js/containers/MapContainer/__tests__/MapEvents.test.js
 create mode 100644 static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss

diff --git a/static/src/js/components/Panels/__tests__/Panels.test.jsx b/static/src/js/components/Panels/__tests__/Panels.test.jsx
index e93f2f9f5e..62020623de 100644
--- a/static/src/js/components/Panels/__tests__/Panels.test.jsx
+++ b/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,50 @@ 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()
+    })
+  })
 })
diff --git a/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js b/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js
new file mode 100644
index 0000000000..797efaa082
--- /dev/null
+++ b/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js
@@ -0,0 +1,71 @@
+// MapEvents.test.js
+import React from 'react'
+import { render, cleanup } from '@testing-library/react'
+import { useMap } from 'react-leaflet'
+import MapEvents from '../MapEvents'
+
+jest.mock('react-leaflet', () => ({
+  useMap: jest.fn(),
+  useMapEvents: jest.fn().mockImplementation(() => {})
+}))
+
+describe('MapEvents component', () => {
+  let fakeMap
+
+  beforeEach(() => {
+    const controlContainer = document.createElement('div')
+    const layersControlDiv = document.createElement('div')
+
+    layersControlDiv.classList.add('leaflet-control-layers-list')
+    controlContainer.appendChild(layersControlDiv)
+
+    fakeMap = {
+      invalidateSize: jest.fn(),
+      getCenter: () => ({
+        lat: 0,
+        lng: 0
+      }),
+      getZoom: () => 1,
+
+      _controlContainer: controlContainer
+    }
+
+    useMap.mockReturnValue(fakeMap)
+  })
+
+  afterEach(() => {
+    cleanup()
+    jest.clearAllMocks()
+  })
+
+  test('calls map.invalidateSize on "mapOffsetChanged" event', () => {
+    render(
+      <MapEvents
+        overlays={{}}
+        onChangeMap={() => {}}
+        onMetricsMap={() => {}}
+      />
+    )
+
+    window.dispatchEvent(new Event('mapOffsetChanged'))
+
+    expect(fakeMap.invalidateSize).toHaveBeenCalled()
+  })
+
+  test('removes the "mapOffsetChanged" event listener on unmount', () => {
+    const { unmount } = render(
+      <MapEvents
+        overlays={{}}
+        onChangeMap={() => {}}
+        onMetricsMap={() => {}}
+      />
+    )
+
+    unmount()
+
+    fakeMap.invalidateSize.mockClear()
+    window.dispatchEvent(new Event('mapOffsetChanged'))
+
+    expect(fakeMap.invalidateSize).not.toHaveBeenCalled()
+  })
+})
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
index b3f8e5c808..b2097a778f 100644
--- a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
+import './MapLayoutContainer.scss'
 
 const MapLayoutContainer = ({ children, panelsRef }) => {
   const containerRef = useRef(null)
@@ -93,7 +94,7 @@ const MapLayoutContainer = ({ children, panelsRef }) => {
   const [sidePanel, mapComponent] = processedChildren
 
   return (
-    <div className="relative w-full h-full" ref={containerRef}>
+    <div className="map-layout-container" ref={containerRef}>
       {sidePanel}
       {mapComponent}
     </div>
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss
new file mode 100644
index 0000000000..407e71c049
--- /dev/null
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss
@@ -0,0 +1,3 @@
+.map-layout-container {
+    height: 100%;
+}
\ No newline at end of file

From 7f26e84180ae002f421a3ceb01bd067fdfa14a12 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Mon, 10 Feb 2025 15:49:18 -0500
Subject: [PATCH 08/24] EDSC-4346 Test coverage Panels.jsx

---
 .../Panels/__tests__/Panels.test.jsx          | 131 ++++++++++++++++++
 1 file changed, 131 insertions(+)

diff --git a/static/src/js/components/Panels/__tests__/Panels.test.jsx b/static/src/js/components/Panels/__tests__/Panels.test.jsx
index 62020623de..68c320746e 100644
--- a/static/src/js/components/Panels/__tests__/Panels.test.jsx
+++ b/static/src/js/components/Panels/__tests__/Panels.test.jsx
@@ -518,4 +518,135 @@ describe('Panels component', () => {
       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(() => {
+      // Clean up after each test
+      if (mainPanelEl && mainPanelEl.parentNode) {
+        document.body.removeChild(mainPanelEl)
+      }
+    })
+
+    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
+      if (mainPanelEl && mainPanelEl.parentNode) {
+        document.body.removeChild(mainPanelEl)
+      }
+
+      // 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()
+    })
+  })
 })

From 5e302828bd56f04e4f3912338a73df47f047bd4a Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Mon, 10 Feb 2025 16:01:34 -0500
Subject: [PATCH 09/24] EDSC-4346 Creating test file

---
 .../__tests__/MapLayoutContaner.test.js       | 187 ++++++++++++++++++
 1 file changed, 187 insertions(+)
 create mode 100644 static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js

diff --git a/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js b/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js
new file mode 100644
index 0000000000..ca031a770f
--- /dev/null
+++ b/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js
@@ -0,0 +1,187 @@
+// eslint-disable-next-line max-classes-per-file
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import {
+  render,
+  cleanup,
+  waitFor
+} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import MapLayoutContainer from '../MapLayoutContainer'
+
+describe('MapLayoutContainer', () => {
+  let mutationObserverInstances = []
+  let resizeObserverInstances = []
+
+  beforeEach(() => {
+    const sidebar = document.createElement('div')
+    sidebar.className = 'sidebar'
+    sidebar.getBoundingClientRect = () => ({
+      width: 100,
+      height: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    })
+
+    document.body.appendChild(sidebar)
+
+    const panels = document.createElement('div')
+    panels.className = 'panels panels--is-open'
+    panels.getBoundingClientRect = () => ({
+      width: 200,
+      height: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    })
+
+    document.body.appendChild(panels)
+
+    mutationObserverInstances = []
+    resizeObserverInstances = []
+
+    global.MutationObserver = class {
+      constructor(callback) {
+        this.callback = callback
+        this.disconnect = jest.fn()
+        mutationObserverInstances.push(this)
+      }
+
+      observe() {
+        /* No-op */
+      }
+    }
+
+    // Mock ResizeObserver
+    global.ResizeObserver = class {
+      constructor(callback) {
+        this.callback = callback
+        this.disconnect = jest.fn()
+        resizeObserverInstances.push(this)
+      }
+
+      observe() {
+        /* No-op */
+      }
+    }
+  })
+
+  afterEach(() => {
+    cleanup()
+
+    document.body.innerHTML = ''
+    jest.restoreAllMocks()
+  })
+
+  test('updates map offset when a mutation with attribute "class" is observed', async () => {
+    const panelsRef = React.createRef()
+    const { container } = render(
+      <MapLayoutContainer panelsRef={panelsRef}>
+        <div>Side Panel</div>
+        <div>Map Component</div>
+      </MapLayoutContainer>
+    )
+
+    const containerDiv = container.querySelector('.map-layout-container')
+    expect(containerDiv).toHaveStyle('--map-offset: 300px')
+
+    const sidebarEl = document.querySelector('.sidebar')
+    sidebarEl.getBoundingClientRect = () => ({
+      width: 150,
+      height: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    })
+
+    mutationObserverInstances.forEach((observer) => {
+      observer.callback([{ attributeName: 'class' }])
+    })
+
+    await waitFor(() => {
+      expect(containerDiv).toHaveStyle('--map-offset: 350px')
+    })
+  })
+
+  test('cleans up observers and event listeners on unmount', () => {
+    const panelsRef = React.createRef()
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
+
+    const { unmount } = render(
+      <MapLayoutContainer panelsRef={panelsRef}>
+        <div>Side Panel</div>
+        <div>Map Component</div>
+      </MapLayoutContainer>
+    )
+
+    unmount()
+
+    mutationObserverInstances.forEach((observer) => {
+      expect(observer.disconnect).toHaveBeenCalled()
+    })
+
+    resizeObserverInstances.forEach((observer) => {
+      expect(observer.disconnect).toHaveBeenCalled()
+    })
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+  })
+
+  test('clones direct SidebarContainer child with panelsRef', () => {
+    const panelsRef = React.createRef()
+
+    const SidebarContainer = forwardRef((props, ref) => <div ref={ref}>Sidebar</div>)
+    SidebarContainer.displayName = 'SidebarContainer'
+
+    const { getByText } = render(
+      <MapLayoutContainer panelsRef={panelsRef}>
+        <SidebarContainer />
+        <div>Map Component</div>
+      </MapLayoutContainer>
+    )
+
+    const sidebarElement = getByText('Sidebar')
+    expect(panelsRef.current).toBe(sidebarElement)
+  })
+
+  test('clones nested SidebarContainer child with panelsRef', () => {
+    const panelsRef = React.createRef()
+    const SidebarContainer = forwardRef((props, ref) => <div ref={ref}>Nested Sidebar</div>)
+    SidebarContainer.displayName = 'SidebarContainer'
+
+    const ParentComponent = ({ children }) => <div>{children}</div>
+    ParentComponent.propTypes = {
+      children: PropTypes.node.isRequired
+    }
+
+    const { getByText } = render(
+      <MapLayoutContainer panelsRef={panelsRef}>
+        <ParentComponent>
+          <SidebarContainer />
+        </ParentComponent>
+        <div>Map Component</div>
+      </MapLayoutContainer>
+    )
+
+    const nestedSidebar = getByText('Nested Sidebar')
+    expect(panelsRef.current).toBe(nestedSidebar)
+  })
+
+  test('returns child unmodified if not a SidebarContainer', () => {
+    const panelsRef = React.createRef()
+    const NonSidebar = () => <div>Non Sidebar</div>
+
+    const { getByText } = render(
+      <MapLayoutContainer panelsRef={panelsRef}>
+        <NonSidebar />
+        <div>Map Component</div>
+      </MapLayoutContainer>
+    )
+
+    expect(getByText('Non Sidebar')).toBeTruthy()
+  })
+})

From b56d28639d507228c675d16d7ab7e06c424ea903 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Mon, 10 Feb 2025 16:08:31 -0500
Subject: [PATCH 10/24] EDSC-4346 eslint fix

---
 .../src/js/components/Panels/__tests__/Panels.test.jsx   | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/static/src/js/components/Panels/__tests__/Panels.test.jsx b/static/src/js/components/Panels/__tests__/Panels.test.jsx
index 68c320746e..d110110ded 100644
--- a/static/src/js/components/Panels/__tests__/Panels.test.jsx
+++ b/static/src/js/components/Panels/__tests__/Panels.test.jsx
@@ -536,10 +536,7 @@ describe('Panels component', () => {
     })
 
     afterEach(() => {
-      // Clean up after each test
-      if (mainPanelEl && mainPanelEl.parentNode) {
-        document.body.removeChild(mainPanelEl)
-      }
+      mainPanelEl?.remove()
     })
 
     test('correctly updates panel width and map offset', () => {
@@ -622,9 +619,7 @@ describe('Panels component', () => {
       render(<TestWrapper />)
 
       // Remove the main panel element to test the fallback
-      if (mainPanelEl && mainPanelEl.parentNode) {
-        document.body.removeChild(mainPanelEl)
-      }
+      mainPanelEl?.remove()
 
       // Spy on the updateMapOffset method
       const dispatchSpy = jest.spyOn(window, 'dispatchEvent')

From 8d7f9a7e91a444eecd271d612f204148702d7ad9 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Tue, 11 Feb 2025 21:21:55 -0500
Subject: [PATCH 11/24] EDSC-4346 Updating tour.spec.js

---
 tests/e2e/tour/tour.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/tour/tour.spec.js b/tests/e2e/tour/tour.spec.js
index ea02dbe384..04df5c8db9 100644
--- a/tests/e2e/tour/tour.spec.js
+++ b/tests/e2e/tour/tour.spec.js
@@ -411,7 +411,7 @@ test.describe('When not logged in', () => {
     expectWithinMargin(spotlightRect, {
       left: 900,
       top: 22,
-      width: 510,
+      width: 20,
       height: 844
     }, 10, 9)
 

From c35051febb2d57fa78f52f6cf62999c8a888a757 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Tue, 11 Feb 2025 22:14:25 -0500
Subject: [PATCH 12/24] EDSC-4346 Updating search and map interactions
 playwright tests

---
 .../granules/granules_views_map_interactions.spec.js   | 10 +++++-----
 tests/e2e/paths/search/search.spec.js                  |  8 ++++++++
 tests/support/setupTests.js                            |  4 ++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/tests/e2e/paths/search/granules/granules_views_map_interactions.spec.js b/tests/e2e/paths/search/granules/granules_views_map_interactions.spec.js
index 10a7bc58f5..a8a6f47e5f 100644
--- a/tests/e2e/paths/search/granules/granules_views_map_interactions.spec.js
+++ b/tests/e2e/paths/search/granules/granules_views_map_interactions.spec.js
@@ -15,7 +15,7 @@ import cmrGranulesBody from './__mocks__/cmr_granules/granules.body.json'
 import cmrGranulesHeaders from './__mocks__/cmr_granules/granules.headers.json'
 import granuleGraphQlBody from './__mocks__/cmr_granules/granule_graphql.body.json'
 
-const granuleName = 'VJ102IMG_NRT.A2024299.1448.021.2024299184114.nc'
+const granuleName = 'VJ102IMG_NRT.A2024299.1442.021.2024299184450.nc'
 
 test.describe('When clicking on a granule on the map', () => {
   test.beforeEach(async ({ page, context }) => {
@@ -81,8 +81,8 @@ test.describe('When clicking on a granule on the map', () => {
       await page.locator('.map').click({
         force: true,
         position: {
-          x: 1200,
-          y: 150
+          x: 25,
+          y: 25
         }
       })
     })
@@ -130,8 +130,8 @@ test.describe('When clicking on a granule on the map', () => {
       await page.locator('.map').click({
         force: true,
         position: {
-          x: 1200,
-          y: 150
+          x: 25,
+          y: 25
         }
       })
     })
diff --git a/tests/e2e/paths/search/search.spec.js b/tests/e2e/paths/search/search.spec.js
index 2a2e94c766..f8cb70a49d 100644
--- a/tests/e2e/paths/search/search.spec.js
+++ b/tests/e2e/paths/search/search.spec.js
@@ -298,6 +298,8 @@ test.describe('Path /search', () => {
 
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
+        await page.getByTestId('panels__handle').click()
+
         // Test leaflet has drawn the shape
         await expect(await page.locator('g path').first()).toBeVisible()
         await expect(await page.locator('g path').all()).toHaveLength(1)
@@ -337,6 +339,8 @@ test.describe('Path /search', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue('2.22154,62.18209')
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue('100000')
 
+        await page.getByTestId('panels__handle').click()
+
         // Test leaflet has drawn the shape
         await expect(await page.locator('g path').first()).toBeVisible()
         await expect(await page.locator('g path').all()).toHaveLength(1)
@@ -376,6 +380,8 @@ test.describe('Path /search', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue('0.99949,5.02679')
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue('26.17555,32.8678')
 
+        await page.getByTestId('panels__handle').click()
+
         // Test leaflet has drawn the shape
         await expect(await page.locator('g path').first()).toBeVisible()
         await expect(await page.locator('g path').all()).toHaveLength(1)
@@ -451,6 +457,8 @@ test.describe('Path /search', () => {
         await expect(page.getByTestId('spatial-display_shapefile-name')).toHaveText('test.geojson')
         await expect(page.getByTestId('filter-stack-item__hint')).toHaveText('1 shape selected')
 
+        await page.getByTestId('panels__handle').click()
+
         // Test leaflet has drawn the shape
         await expect(await page.locator('g path').first()).toBeVisible()
         await expect(await page.locator('g path').all()).toHaveLength(2)
diff --git a/tests/support/setupTests.js b/tests/support/setupTests.js
index ae3ade5dcd..99d7c1e65e 100644
--- a/tests/support/setupTests.js
+++ b/tests/support/setupTests.js
@@ -25,8 +25,8 @@ export const setupTests = async ({
   }, dontShowTour.toString())
 
   // Prevent loading of images and map tiles to speed up tests
-  await page.route('**/*.{png,jpg,jpeg}', (route) => route.abort())
-  await page.route('**/scale/**', (route) => route.abort())
+  // await page.route('**/*.{png,jpg,jpeg}', (route) => route.abort())
+  // await page.route('**/scale/**', (route) => route.abort())
 
   // Mock requests to the status app
   await page.route(/status\.earthdata\.nasa\.gov/, (route) => route.fulfill({

From 373e16c8255a523abddfac177bfb68f977e265c5 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Tue, 11 Feb 2025 22:32:36 -0500
Subject: [PATCH 13/24] EDSC-4346 Updating map_granules.spec

---
 tests/e2e/map/map_granules.spec.js | 18 ++++++++++++++++++
 tests/support/setupTests.js        |  4 ++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/map/map_granules.spec.js b/tests/e2e/map/map_granules.spec.js
index a85386828e..6b1bc859bd 100644
--- a/tests/e2e/map/map_granules.spec.js
+++ b/tests/e2e/map/map_granules.spec.js
@@ -104,6 +104,9 @@ test.describe('Map: Granule interactions', () => {
 
       test.describe('When hovering over a granule', () => {
         test('highlights the granule in the granule results list', async ({ page }) => {
+          await page.getByTestId('panels__handle').click()
+          await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
           await page.locator('g path.leaflet-interactive').hover({
             force: true,
             position: {
@@ -129,6 +132,9 @@ test.describe('Map: Granule interactions', () => {
             })
           })
 
+          await page.getByTestId('panels__handle').click()
+          await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
           await page.locator('g path.leaflet-interactive').click({
             force: true,
             position: {
@@ -136,18 +142,27 @@ test.describe('Map: Granule interactions', () => {
               y: 20
             }
           })
+
+          // Wait for any animations to complete
+          await page.waitForTimeout(1000)
         })
 
         test('shows the granule and a label on the map and updates the url', async ({ page }) => {
           await expect(await page.locator('g path').all()).toHaveLength(5)
           await expect(page.locator('.granule-spatial-label-temporal')).toHaveText('2021-05-31 15:30:522021-05-31 15:31:22')
 
+          // Now expand panel to check URL
+          await page.getByTestId('panels__handle').click()
+          await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+
           // Updates the URL with the selected granule
           await expect(page).toHaveURL(/\/search\/granules.*g=G2061166811-ASF/)
         })
 
         test.describe('when returning to the collections results list', () => {
           test('removes the granule label from the map', async ({ page }) => {
+            await page.getByTestId('panels__handle').click()
+            await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
             await page.getByTestId('panel-group_granule-results')
               .getByTestId('breadcrumb-button')
               .click()
@@ -292,6 +307,9 @@ test.describe('Map: Granule interactions', () => {
           page.getByTestId('filter-stack__spatial').locator('.filter-stack-item__error')
         ).toHaveText('This collection does not support polygon search. Your polygon has been converted to a bounding box.')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-collapsed/)
+
         await expect(await page.locator('g path').first()).toBeVisible()
         await expect(await page.locator('g path').all()).toHaveLength(2)
       })
diff --git a/tests/support/setupTests.js b/tests/support/setupTests.js
index 99d7c1e65e..ae3ade5dcd 100644
--- a/tests/support/setupTests.js
+++ b/tests/support/setupTests.js
@@ -25,8 +25,8 @@ export const setupTests = async ({
   }, dontShowTour.toString())
 
   // Prevent loading of images and map tiles to speed up tests
-  // await page.route('**/*.{png,jpg,jpeg}', (route) => route.abort())
-  // await page.route('**/scale/**', (route) => route.abort())
+  await page.route('**/*.{png,jpg,jpeg}', (route) => route.abort())
+  await page.route('**/scale/**', (route) => route.abort())
 
   // Mock requests to the status app
   await page.route(/status\.earthdata\.nasa\.gov/, (route) => route.fulfill({

From 43dec59ed997da8cdf2347d126147ce9c00c18f4 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Tue, 11 Feb 2025 22:38:34 -0500
Subject: [PATCH 14/24] EDSC-4346 updating map_shapefile.spec.js

---
 tests/e2e/map/map_shapefile.spec.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/tests/e2e/map/map_shapefile.spec.js b/tests/e2e/map/map_shapefile.spec.js
index 39d6017760..5c0092f19f 100644
--- a/tests/e2e/map/map_shapefile.spec.js
+++ b/tests/e2e/map/map_shapefile.spec.js
@@ -55,6 +55,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'simple.geojson')
 
@@ -107,6 +110,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'multiple_shapes.geojson')
 
@@ -167,6 +173,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'multiple_shapes.geojson')
 
@@ -227,6 +236,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'multiple_shapes.geojson')
 
@@ -287,6 +299,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'multiple_shapes.geojson')
 
@@ -348,6 +363,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'too_many_points.geojson')
 
@@ -392,6 +410,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'arctic.geojson')
 
@@ -444,6 +465,9 @@ test.describe('Map: Shapefile interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+
         // Upload the shapefile
         await uploadShapefile(page, 'antarctic.geojson')
 

From 254c157597162de8a2b4e3174cd9c65464f6a28a Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 14:58:55 -0500
Subject: [PATCH 15/24] EDSC-4346 Updating map_spatial.spec.js

---
 tests/e2e/map/map_spatial.spec.js | 202 ++++++++++++++++++++++++------
 1 file changed, 167 insertions(+), 35 deletions(-)

diff --git a/tests/e2e/map/map_spatial.spec.js b/tests/e2e/map/map_spatial.spec.js
index d30e88eb7f..17a3793e0f 100644
--- a/tests/e2e/map/map_spatial.spec.js
+++ b/tests/e2e/map/map_spatial.spec.js
@@ -50,12 +50,16 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the point spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Point' }).click()
 
         // Add the point to the map
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?sp\[0\]=42\.\d+%2C-7\.\d+/)
@@ -63,6 +67,10 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-7\.\d+,42\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -90,8 +98,12 @@ test.describe('Map: Spatial interactions', () => {
         // Select the point spatial type
         await page.getByRole('link', { name: 'Draw a coordinate on the map to select a spatial extent' }).click()
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Add the point to the map
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?sp\[0\]=42\.\d+%2C-7\.\d+/)
@@ -99,6 +111,10 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-7\.\d+,42\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -170,11 +186,15 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the point spatial type
         await page.getByRole('link', { name: 'Draw a coordinate on the map to select a spatial extent' }).click()
 
         // Add the point to the map
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?sp\[0\]=42\.\d+%2C-7\.\d+/)
@@ -182,17 +202,25 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-7\.\d+,42\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Edit the point
         await page.getByRole('link', { name: 'Edit Layers' }).click()
 
         // Drag point to new location
         await page.getByRole('button', { name: 'Marker' }).hover()
         await page.mouse.down()
-        await page.mouse.move(1000, 600)
+        await page.mouse.move(1160, 600)
         await page.mouse.up()
 
         // Save the point
@@ -204,6 +232,10 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-24\.\d+,42\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 3 of 3 matching collections')).toBeVisible()
@@ -230,14 +262,18 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the circle spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Circle' }).click()
 
         // Add the circle to the map
-        await page.mouse.move(1000, 500)
+        await page.mouse.move(1160, 500)
         await page.mouse.down()
-        await page.mouse.move(1000, 510)
+        await page.mouse.move(1160, 510)
         await page.mouse.up()
 
         // Updates the URL
@@ -247,6 +283,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-7\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -271,13 +311,17 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the circle spatial type
         await page.getByRole('link', { name: 'Draw a circle on the map to select a spatial extent' }).click()
 
         // Add the point to the map
-        await page.mouse.move(1000, 500)
+        await page.mouse.move(1160, 500)
         await page.mouse.down()
-        await page.mouse.move(1000, 510)
+        await page.mouse.move(1160, 510)
         await page.mouse.up()
 
         // Updates the URL
@@ -287,6 +331,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-7\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -311,6 +359,10 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the circle spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Circle' }).click()
@@ -329,6 +381,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue('4.5297,42.1875')
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue('156444')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -361,13 +417,17 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the circle spatial type
         await page.getByRole('link', { name: 'Draw a circle on the map to select a spatial extent' }).click()
 
         // Add the point to the map
-        await page.mouse.move(1000, 500)
+        await page.mouse.move(1160, 500)
         await page.mouse.down()
-        await page.mouse.move(1000, 510)
+        await page.mouse.move(1160, 510)
         await page.mouse.up()
 
         // Updates the URL
@@ -377,17 +437,25 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-7\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Edit the circle
         await page.getByRole('link', { name: 'Edit Layers' }).click()
 
         // Drag circle to new location
-        await page.mouse.move(1000, 500)
+        await page.mouse.move(1160, 500)
         await page.mouse.down()
-        await page.mouse.move(1000, 550)
+        await page.mouse.move(1160, 550)
         await page.mouse.up()
 
         // Save the circle
@@ -400,6 +468,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-14\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 3 of 3 matching collections')).toBeVisible()
@@ -427,13 +499,17 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the bounding box spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Rectangle' }).click()
 
         // Add the bounding box to the map
-        await page.mouse.click(1000, 500)
-        await page.mouse.click(1100, 600)
+        await page.mouse.click(1160, 500)
+        await page.mouse.click(1260, 600)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?sb\[0\]=42\.\d+%2C-21\.\d+%2C56\.\d+%2C-7\.\d+/)
@@ -442,6 +518,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/-7\.\d+,56\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -467,12 +547,16 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the bounding box spatial type
         await page.locator('.leaflet-draw-draw-rectangle').click()
 
         // Add the bounding box to the map
-        await page.mouse.click(1000, 500)
-        await page.mouse.click(1100, 600)
+        await page.mouse.click(1160, 500)
+        await page.mouse.click(1260, 600)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?sb\[0\]=42\.\d+%2C-21\.\d+%2C56\.\d+%2C-7\.\d+/)
@@ -481,6 +565,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/-7\.\d+,56\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -518,7 +606,7 @@ test.describe('Map: Spatial interactions', () => {
         await page.keyboard.up('Enter')
 
         // Updates the URL
-        await expect(page).toHaveURL('search?sb[0]=42.1875%2C-9.53964%2C56.25%2C4.5297&lat=-2.50497&long=49.21875&zoom=4')
+        await expect(page).toHaveURL('search?sb[0]=42.1875%2C-9.53964%2C56.25%2C4.5297&lat=-2.50497&long=49.21875&zoom=1')
 
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue('-9.53964,42.1875')
@@ -558,13 +646,17 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the bounding box spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Rectangle' }).click()
 
         // Add the bounding box to the map
-        await page.mouse.click(1000, 500)
-        await page.mouse.click(1100, 600)
+        await page.mouse.click(1160, 500)
+        await page.mouse.click(1260, 600)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?sb\[0\]=42\.\d+%2C-21\.\d+%2C56\.\d+%2C-7\.\d+/)
@@ -573,17 +665,25 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/-7\.\d+,56\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Edit the bounding box
         await page.getByRole('link', { name: 'Edit Layers' }).click()
 
         // Drag bounding box to new location
-        await page.mouse.move(1000, 500)
+        await page.mouse.move(1160, 500)
         await page.mouse.down()
-        await page.mouse.move(1000, 400)
+        await page.mouse.move(1160, 400)
         await page.mouse.up()
 
         // Save the bounding box
@@ -596,6 +696,10 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/6\.\d+,56\.\d+/)
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 3 of 3 matching collections')).toBeVisible()
@@ -623,21 +727,25 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the polygon spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Polygon' }).click()
 
         // Add the polygon to the map
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1100, 600)
+        await page.mouse.click(1260, 600)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1000, 600)
+        await page.mouse.click(1160, 600)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         // Updates the URL
         // eslint-disable-next-line max-len
@@ -676,20 +784,24 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the polygon spatial type
         await page.locator('.leaflet-draw-draw-polygon').click()
 
         // Add the polygon to the map
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1100, 600)
+        await page.mouse.click(1260, 600)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1000, 600)
+        await page.mouse.click(1160, 600)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         // Updates the URL
         // eslint-disable-next-line max-len
@@ -703,6 +815,10 @@ test.describe('Map: Spatial interactions', () => {
 
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
@@ -737,21 +853,25 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Select the polygon spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
         await page.getByRole('button', { name: 'Polygon' }).click()
 
         // Add the polygon to the map
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1100, 600)
+        await page.mouse.click(1260, 600)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1000, 600)
+        await page.mouse.click(1160, 600)
 
         await page.waitForTimeout(200)
-        await page.mouse.click(1000, 500)
+        await page.mouse.click(1160, 500)
 
         // Updates the URL
         await expect(page).toHaveURL(/search\?polygon\[0\]=42\.\d+%2C-7\.\d+%2C42\.\d+%2C-21\.\d+%2C56\.\d+%2C-21\.\d+%2C42\.\d+%2C-7\.\d+/)
@@ -764,17 +884,25 @@ test.describe('Map: Spatial interactions', () => {
 
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Edit the polygon
         await page.getByRole('link', { name: 'Edit Layers' }).click()
 
         // Drag polygon to new location
-        await page.mouse.move(1100, 600)
+        await page.mouse.move(1260, 600)
         await page.mouse.down()
-        await page.mouse.move(1150, 650)
+        await page.mouse.move(1310, 650)
         await page.mouse.up()
 
         // Save the polygon
@@ -786,6 +914,10 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
+        await page.getByTestId('panels__handle').click()
+        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+        await page.waitForTimeout(1000)
+
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 3 of 3 matching collections')).toBeVisible()

From 5e6460488d886352f610334df41ff21594281129 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 15:46:02 -0500
Subject: [PATCH 16/24] EDSC-4346 Updating map_spatial.spec.js

---
 tests/e2e/map/map_spatial.spec.js | 144 ++++++++++--------------------
 1 file changed, 45 insertions(+), 99 deletions(-)

diff --git a/tests/e2e/map/map_spatial.spec.js b/tests/e2e/map/map_spatial.spec.js
index 17a3793e0f..1485180cc2 100644
--- a/tests/e2e/map/map_spatial.spec.js
+++ b/tests/e2e/map/map_spatial.spec.js
@@ -16,6 +16,18 @@ import pointBodyEdited from './__mocks__/point_collections_edited.body.json'
 import polygonBody from './__mocks__/polygon_collections.body.json'
 import polygonBodyEdited from './__mocks__/polygon_collections_edited.body.json'
 
+const collapsePanel = async (page) => {
+  await page.getByTestId('panels__handle').click()
+  await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+  await page.waitForTimeout(250)
+}
+
+const expandPanel = async (page) => {
+  await page.getByTestId('panels__handle').click()
+  await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
+  await page.waitForTimeout(250)
+}
+
 test.describe('Map: Spatial interactions', () => {
   test.beforeEach(async ({ page, context, browserName }) => {
     await setupTests({
@@ -50,9 +62,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the point spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -67,9 +77,7 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-7\.\d+,42\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -98,9 +106,7 @@ test.describe('Map: Spatial interactions', () => {
         // Select the point spatial type
         await page.getByRole('link', { name: 'Draw a coordinate on the map to select a spatial extent' }).click()
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Add the point to the map
         await page.mouse.click(1160, 500)
@@ -111,9 +117,7 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-7\.\d+,42\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -186,9 +190,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the point spatial type
         await page.getByRole('link', { name: 'Draw a coordinate on the map to select a spatial extent' }).click()
@@ -202,17 +204,13 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-7\.\d+,42\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Edit the point
         await page.getByRole('link', { name: 'Edit Layers' }).click()
@@ -232,9 +230,7 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_point')).toHaveValue(/-24\.\d+,42\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -262,9 +258,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the circle spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -283,9 +277,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-7\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -311,9 +303,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the circle spatial type
         await page.getByRole('link', { name: 'Draw a circle on the map to select a spatial extent' }).click()
@@ -331,9 +321,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-7\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -359,9 +347,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the circle spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -381,9 +367,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue('4.5297,42.1875')
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue('156444')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -417,9 +401,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the circle spatial type
         await page.getByRole('link', { name: 'Draw a circle on the map to select a spatial extent' }).click()
@@ -437,17 +419,13 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-7\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Edit the circle
         await page.getByRole('link', { name: 'Edit Layers' }).click()
@@ -468,9 +446,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_circle-center')).toHaveValue(/-14\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_circle-radius')).toHaveValue(/156\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -499,9 +475,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the bounding box spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -518,9 +492,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/-7\.\d+,56\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -547,9 +519,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the bounding box spatial type
         await page.locator('.leaflet-draw-draw-rectangle').click()
@@ -565,9 +535,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/-7\.\d+,56\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -646,9 +614,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the bounding box spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -665,17 +631,13 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/-7\.\d+,56\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Edit the bounding box
         await page.getByRole('link', { name: 'Edit Layers' }).click()
@@ -696,9 +658,7 @@ test.describe('Map: Spatial interactions', () => {
         await expect(page.getByTestId('spatial-display_southwest-point')).toHaveValue(/-21\.\d+,42\.\d+/)
         await expect(page.getByTestId('spatial-display_northeast-point')).toHaveValue(/6\.\d+,56\.\d+/)
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -727,9 +687,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the polygon spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -784,9 +742,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the polygon spatial type
         await page.locator('.leaflet-draw-draw-polygon').click()
@@ -815,9 +771,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
@@ -853,9 +807,7 @@ test.describe('Map: Spatial interactions', () => {
 
         await page.goto('/')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Select the polygon spatial type
         await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
@@ -884,17 +836,13 @@ test.describe('Map: Spatial interactions', () => {
 
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck
         await expect(page.getByText('Showing 2 of 2 matching collections')).toBeVisible()
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await collapsePanel(page)
 
         // Edit the polygon
         await page.getByRole('link', { name: 'Edit Layers' }).click()
@@ -914,9 +862,7 @@ test.describe('Map: Spatial interactions', () => {
         // Populates the spatial display field
         await expect(page.getByTestId('spatial-display_polygon')).toHaveText('3 Points')
 
-        await page.getByTestId('panels__handle').click()
-        await expect(page.getByTestId('panels-section')).not.toHaveClass(/panels--is-minimized/)
-        await page.waitForTimeout(1000)
+        await expandPanel(page)
 
         // Checking that the right number of results are loaded ensures that the route
         // was fulfilled correctly with the succesfull paramCheck

From eb891e2dd54e5f30dde02ef6a9de8df6e6e8f6a6 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 16:22:57 -0500
Subject: [PATCH 17/24] EDSC-4346 Test updates

---
 tests/e2e/map/map_controls.spec.js                            | 2 +-
 .../granules/collection_details/collection_details.spec.js    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/map/map_controls.spec.js b/tests/e2e/map/map_controls.spec.js
index 2df9a9670b..3f5d931ff8 100644
--- a/tests/e2e/map/map_controls.spec.js
+++ b/tests/e2e/map/map_controls.spec.js
@@ -63,7 +63,7 @@ test.describe('Map: Control interactions', () => {
         // Zoom the map
         await page.locator('.leaflet-control-zoom-in').click()
 
-        await expect(page).toHaveURL('search?zoom=3')
+        await expect(page).toHaveURL(/search\?.*zoom=3/)
       })
     })
   })
diff --git a/tests/e2e/paths/search/granules/collection_details/collection_details.spec.js b/tests/e2e/paths/search/granules/collection_details/collection_details.spec.js
index 5d87100a7a..74fc8b8b56 100644
--- a/tests/e2e/paths/search/granules/collection_details/collection_details.spec.js
+++ b/tests/e2e/paths/search/granules/collection_details/collection_details.spec.js
@@ -466,6 +466,10 @@ test.describe('Path /search/granules/collection-details', () => {
 
       await page.goto('/search/granules/collection-details?p=C1996546500-GHRC_DAAC')
 
+      await page.getByTestId('panels__handle').click()
+      await expect(page.getByTestId('panels-section')).toHaveClass(/panels--is-minimized/)
+      await page.waitForTimeout(250)
+
       // 1 Rectangle should be drawn on the mini map
       await expect(await page.locator('.collection-details-minimap g path').all()).toHaveLength(1)
     })

From 61cd28251f3ce96397c99bcc42a2bab5a1de98bb Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 16:45:54 -0500
Subject: [PATCH 18/24] EDSC-4346 Updating click position

---
 tests/e2e/map/map_granules.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/map/map_granules.spec.js b/tests/e2e/map/map_granules.spec.js
index 6b1bc859bd..f7275c01d7 100644
--- a/tests/e2e/map/map_granules.spec.js
+++ b/tests/e2e/map/map_granules.spec.js
@@ -203,7 +203,7 @@ test.describe('Map: Granule interactions', () => {
             await page.locator('.map').click({
               force: true,
               position: {
-                x: 1100,
+                x: 200,
                 y: 720
               }
             })

From c79cccc56041be5d6a4ea0a103e72b04c3062498 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 17:15:00 -0500
Subject: [PATCH 19/24] EDSC-4346 Playwright fixes

---
 tests/e2e/map/map_controls.spec.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/map/map_controls.spec.js b/tests/e2e/map/map_controls.spec.js
index 3f5d931ff8..2d5f264f52 100644
--- a/tests/e2e/map/map_controls.spec.js
+++ b/tests/e2e/map/map_controls.spec.js
@@ -176,7 +176,7 @@ test.describe('Map: Control interactions', () => {
         await page.getByRole('radio', { name: 'Corrected Reflectance (True Color)' }).click()
         await page.getByRole('radio', { name: 'Blue Marble' }).click()
 
-        await expect(page).toHaveURL('search')
+        await expect(page).toHaveURL(/search(\?.*)?$/)
 
         await expect(
           page
@@ -207,7 +207,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('radio', { name: 'Corrected Reflectance (True Color)' }).click()
 
-        await expect(page).toHaveURL('search?base=trueColor')
+        await expect(page).toHaveURL('base=trueColor')
 
         await expect(
           page
@@ -238,7 +238,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('radio', { name: 'Land / Water Map' }).click()
 
-        await expect(page).toHaveURL('search?base=landWaterMap')
+        await expect(page).toHaveURL('base=landWaterMap')
 
         await expect(
           page
@@ -270,7 +270,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Borders and Roads' }).click()
 
-        await expect(page).toHaveURL('search?overlays=referenceFeatures')
+        await expect(page).toHaveURL('overlays=referenceFeatures')
 
         await expect(
           page
@@ -302,7 +302,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Coastlines' }).click()
 
-        await expect(page).toHaveURL('search?overlays=coastlines')
+        await expect(page).toHaveURL('overlays=coastlines')
 
         await expect(
           page
@@ -334,7 +334,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Place Labels' }).click()
 
-        await expect(page).toHaveURL('search?overlays=referenceLabels')
+        await expect(page).toHaveURL('overlays=referenceLabels')
 
         await expect(
           page

From 7f53722270ce90fa7073ed49717bdf525d44654e Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 17:37:56 -0500
Subject: [PATCH 20/24] EDSC-4346 String selection

---
 tests/e2e/map/map_controls.spec.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/e2e/map/map_controls.spec.js b/tests/e2e/map/map_controls.spec.js
index 2d5f264f52..1ea35b9b06 100644
--- a/tests/e2e/map/map_controls.spec.js
+++ b/tests/e2e/map/map_controls.spec.js
@@ -207,7 +207,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('radio', { name: 'Corrected Reflectance (True Color)' }).click()
 
-        await expect(page).toHaveURL('base=trueColor')
+        await expect(page).toHaveURL('search?base=trueColor')
 
         await expect(
           page
@@ -238,7 +238,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('radio', { name: 'Land / Water Map' }).click()
 
-        await expect(page).toHaveURL('base=landWaterMap')
+        await expect(page).toHaveURL('search?base=landWaterMap')
 
         await expect(
           page
@@ -270,7 +270,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Borders and Roads' }).click()
 
-        await expect(page).toHaveURL('overlays=referenceFeatures')
+        await expect(page).toHaveURL('search?overlays=referenceFeatures')
 
         await expect(
           page
@@ -302,7 +302,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Coastlines' }).click()
 
-        await expect(page).toHaveURL('overlays=coastlines')
+        await expect(page).toHaveURL('search?overlays=coastlines')
 
         await expect(
           page
@@ -334,7 +334,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Place Labels' }).click()
 
-        await expect(page).toHaveURL('overlays=referenceLabels')
+        await expect(page).toHaveURL('search?overlays=referenceLabels')
 
         await expect(
           page

From 28aa0a77a845859c66fec9a86fa22fd49ce724e2 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Wed, 12 Feb 2025 20:46:34 -0500
Subject: [PATCH 21/24] EDSC-4346 Playwright test update

---
 tests/e2e/map/map_controls.spec.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/tests/e2e/map/map_controls.spec.js b/tests/e2e/map/map_controls.spec.js
index 1ea35b9b06..3f2e3760d9 100644
--- a/tests/e2e/map/map_controls.spec.js
+++ b/tests/e2e/map/map_controls.spec.js
@@ -82,7 +82,7 @@ test.describe('Map: Control interactions', () => {
         // Change the projection
         await page.getByTestId('projection-switcher__arctic').click()
 
-        await expect(page).toHaveURL('search?lat=90&projection=EPSG%3A3413&zoom=0')
+        await expect(page.url()).toContain('lat=90&projection=EPSG%3A3413&zoom=0')
 
         await expect(page.locator('img.leaflet-tile').first()).toHaveAttribute('src', /epsg3413/)
       })
@@ -123,7 +123,7 @@ test.describe('Map: Control interactions', () => {
         // Change the projection
         await page.getByTestId('projection-switcher__antarctic').click()
 
-        await expect(page).toHaveURL('search?lat=-90&projection=EPSG%3A3031&zoom=0')
+        await expect(page.url()).toContain('lat=-90&projection=EPSG%3A3031&zoom=0')
 
         await expect(page.locator('img.leaflet-tile').first()).toHaveAttribute('src', /epsg3031/)
       })
@@ -142,14 +142,14 @@ test.describe('Map: Control interactions', () => {
         // Change the projection to North Polar
         await page.getByTestId('projection-switcher__arctic').click()
 
-        await expect(page).toHaveURL('search?lat=90&projection=EPSG%3A3413&zoom=0')
+        await expect(page.url()).toContain('lat=90&projection=EPSG%3A3413&zoom=0')
 
         await expect(page.locator('img.leaflet-tile').first()).toHaveAttribute('src', /epsg3413/)
 
         // Change the projection to South Polar
         await page.getByTestId('projection-switcher__antarctic').click()
 
-        await expect(page).toHaveURL('search?lat=-90&projection=EPSG%3A3031&zoom=0')
+        await expect(page.url()).toContain('lat=-90&projection=EPSG%3A3031&zoom=0')
 
         await expect(page.locator('img.leaflet-tile').first()).toHaveAttribute('src', /epsg3031/)
       })
@@ -207,7 +207,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('radio', { name: 'Corrected Reflectance (True Color)' }).click()
 
-        await expect(page).toHaveURL('search?base=trueColor')
+        await expect(page.url()).toContain('base=trueColor')
 
         await expect(
           page
@@ -238,7 +238,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('radio', { name: 'Land / Water Map' }).click()
 
-        await expect(page).toHaveURL('search?base=landWaterMap')
+        await expect(page.url()).toContain('base=landWaterMap')
 
         await expect(
           page
@@ -270,7 +270,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Borders and Roads' }).click()
 
-        await expect(page).toHaveURL('search?overlays=referenceFeatures')
+        await expect(page.url()).toContain('overlays=referenceFeatures')
 
         await expect(
           page
@@ -302,7 +302,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Coastlines' }).click()
 
-        await expect(page).toHaveURL('search?overlays=coastlines')
+        await expect(page.url()).toContain('overlays=coastlines')
 
         await expect(
           page
@@ -334,7 +334,7 @@ test.describe('Map: Control interactions', () => {
 
         await page.getByRole('checkbox', { name: 'Place Labels' }).click()
 
-        await expect(page).toHaveURL('search?overlays=referenceLabels')
+        await expect(page.url()).toContain('overlays=referenceLabels')
 
         await expect(
           page

From abc852a101fb8ac5944e42e202d77de3baee9841 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Fri, 14 Feb 2025 15:14:54 -0500
Subject: [PATCH 22/24] EDSC-4346 Comitting minor tweaks

---
 static/src/js/containers/MapContainer/MapContainer.scss        | 3 +--
 .../src/js/containers/MapContainer/__tests__/MapEvents.test.js | 1 -
 .../js/containers/MapLayoutContainer/MapLayoutContainer.scss   | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/static/src/js/containers/MapContainer/MapContainer.scss b/static/src/js/containers/MapContainer/MapContainer.scss
index e43f3c239e..e845841a34 100644
--- a/static/src/js/containers/MapContainer/MapContainer.scss
+++ b/static/src/js/containers/MapContainer/MapContainer.scss
@@ -2,7 +2,6 @@
 
 .map {
   position: absolute;
-  left: var(--map-offset, 0);
   bottom: 0;
   top: 0;
   right: 0;
@@ -19,4 +18,4 @@
   .is-panels-dragging & {
     pointer-events: none;
   }
-}
\ No newline at end of file
+}
diff --git a/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js b/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js
index 797efaa082..f0fbf1126e 100644
--- a/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js
+++ b/static/src/js/containers/MapContainer/__tests__/MapEvents.test.js
@@ -1,4 +1,3 @@
-// MapEvents.test.js
 import React from 'react'
 import { render, cleanup } from '@testing-library/react'
 import { useMap } from 'react-leaflet'
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss
index 407e71c049..8a331e9a05 100644
--- a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.scss
@@ -1,3 +1,3 @@
 .map-layout-container {
     height: 100%;
-}
\ No newline at end of file
+}

From 5abde4993cf56c911a7b572cdcd8f74b29618425 Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Fri, 14 Feb 2025 15:57:17 -0500
Subject: [PATCH 23/24] EDSC-4346 Cleaning up map offset logic

---
 static/src/js/components/Panels/Panels.jsx    | 80 ++++++++++---------
 .../containers/MapContainer/MapContainer.scss |  2 +-
 .../MapLayoutContainer/MapLayoutContainer.jsx | 62 +-------------
 3 files changed, 45 insertions(+), 99 deletions(-)

diff --git a/static/src/js/components/Panels/Panels.jsx b/static/src/js/components/Panels/Panels.jsx
index 186ea07457..7ae608289a 100644
--- a/static/src/js/components/Panels/Panels.jsx
+++ b/static/src/js/components/Panels/Panels.jsx
@@ -25,6 +25,7 @@ export class Panels extends PureComponent {
     this.handleClickDelay = 500 // Time in ms to delay a click event on the handle
     this.handleClickCancelTimeout = undefined // Tracks the click event setTimeout id
     this.handleTooltipCancelTimeout = undefined // Tracks the tooltip hover event setTimeout id
+    this.mapOffsetTimeout = null // Timeout for debouncing mapOffsetChanged event
     this.keyboardShortcuts = {
       togglePanel: ']'
     }
@@ -63,12 +64,14 @@ export class Panels extends PureComponent {
     this.onUpdate = this.onUpdate.bind(this)
     this.disableHandleClickEvent = this.disableHandleClickEvent.bind(this)
     this.enableHandleClickEvent = this.enableHandleClickEvent.bind(this)
+    this.updateMapOffset = this.updateMapOffset.bind(this)
   }
 
   componentDidMount() {
     window.addEventListener('resize', this.onWindowResize, { capture: true })
     window.addEventListener('keyup', this.onWindowKeyUp, { capture: true })
     this.browserHistoryUnlisten = history.listen(this.onWindowResize)
+    this.updateMapOffset()
 
     const maxWidth = this.calculateMaxWidth()
 
@@ -111,6 +114,10 @@ export class Panels extends PureComponent {
       this.updateShowState(propsShow)
     }
 
+    if (show !== prevShow) {
+      this.updateMapOffset()
+    }
+
     // Apply or remove the body is-panels-will-minimize class
     if ((show !== prevShow) || (prevWillMinimize !== willMinimize)) {
       // Only add the class if willMinimize is set AND the panel is showing
@@ -138,6 +145,7 @@ export class Panels extends PureComponent {
     document.removeEventListener('mousemove', this.onMouseMove)
     document.removeEventListener('mouseup', this.onMouseUp)
     if (this.browserHistoryUnlisten) this.browserHistoryUnlisten()
+    if (this.mapOffsetTimeout) clearTimeout(this.mapOffsetTimeout)
   }
 
   onWindowResize() {
@@ -218,10 +226,8 @@ export class Panels extends PureComponent {
     } = event
 
     // Any keypress other than the enter or spacebar keys is not considered a click.
-    if (type === 'keydown') {
-      if ((key !== 'Enter') && (key !== ' ')) {
-        return
-      }
+    if (type === 'keydown' && key !== 'Enter' && key !== ' ') {
+      return
     }
 
     // Make sure this is actually a click, and not a drag of the handle.
@@ -231,6 +237,8 @@ export class Panels extends PureComponent {
         willMinimize: show,
         dragging: false,
         handleToolipVisible: false
+      }, () => {
+        this.updateMapOffset()
       })
     } else {
       this.setState({
@@ -242,22 +250,6 @@ 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) {
@@ -408,7 +400,7 @@ export class Panels extends PureComponent {
       const distanceDragged = clientX - clickStartX
       const newWidth = distanceDragged + clickStartWidth
 
-      // Close the panel if its current with is smaller than the minWidth minus the threshold
+      // Close the panel if its current width is smaller than the minWidth minus the threshold
       const panelShouldClose = (newWidth < (minWidth - this.minimizeThreshold))
 
       if (panelShouldClose) {
@@ -444,12 +436,36 @@ export class Panels extends PureComponent {
     }
   }
 
-  updateMapOffset(totalOffset) {
-    // First update the CSS variable
-    document.documentElement.style.setProperty('--map-offset', `${totalOffset}px`)
+  updateMapOffset() {
+    const sidebarEl = document.querySelector('.sidebar')
+    const mapEl = document.querySelector('.map')
+    let totalOffset = 0
+
+    // Add sidebar width if it exists
+    if (sidebarEl) {
+      totalOffset += sidebarEl.getBoundingClientRect().width
+    }
 
-    // Then dispatch the event
-    window.dispatchEvent(new CustomEvent('mapOffsetChanged'))
+    // Add panels width if panels are open
+    const { show } = this.state
+    if (show) {
+      totalOffset += this.width
+    }
+
+    if (mapEl) {
+      mapEl.style.width = `calc(100% - ${totalOffset}px)`
+    }
+
+    // Clear any existing timeout
+    if (this.mapOffsetTimeout) {
+      clearTimeout(this.mapOffsetTimeout)
+    }
+
+    // Set new timeout to dispatch the event
+    this.mapOffsetTimeout = setTimeout(() => {
+      window.dispatchEvent(new CustomEvent('mapOffsetChanged'))
+      this.mapOffsetTimeout = null
+    }, 50)
   }
 
   disableHandleClickEvent() {
@@ -471,17 +487,7 @@ export class Panels extends PureComponent {
     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.updateMapOffset()
     this.updateResponsiveClassNames()
   }
 
diff --git a/static/src/js/containers/MapContainer/MapContainer.scss b/static/src/js/containers/MapContainer/MapContainer.scss
index e845841a34..69b4ff2376 100644
--- a/static/src/js/containers/MapContainer/MapContainer.scss
+++ b/static/src/js/containers/MapContainer/MapContainer.scss
@@ -5,7 +5,7 @@
   bottom: 0;
   top: 0;
   right: 0;
-  width: calc(100% - var(--map-offset, 0));
+  width: 100%;
   align-items: center;
   justify-content: center;
   flex-basis: auto;
diff --git a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
index b2097a778f..a59b3582df 100644
--- a/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
+++ b/static/src/js/containers/MapLayoutContainer/MapLayoutContainer.jsx
@@ -1,70 +1,10 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import './MapLayoutContainer.scss'
 
 const MapLayoutContainer = ({ children, panelsRef }) => {
   const containerRef = useRef(null)
 
-  useEffect(() => {
-    const updateMapOffset = () => {
-      if (containerRef.current) {
-        const sidebarEl = document.querySelector('.sidebar')
-        const panelEl = document.querySelector('.panels')
-        const panelsSection = document.querySelector('.panels')
-
-        let totalOffset = 0
-
-        if (sidebarEl) totalOffset += sidebarEl.getBoundingClientRect().width
-
-        // Add panels width if panels are open
-        if (panelEl && panelsSection?.classList.contains('panels--is-open')) {
-          totalOffset += panelEl.getBoundingClientRect().width
-        }
-
-        containerRef.current.style.setProperty('--map-offset', `${totalOffset}px`)
-        window.dispatchEvent(new CustomEvent('mapOffsetChanged'))
-      }
-    }
-
-    updateMapOffset()
-
-    // Observe DOM mutations and resize events
-    const mutationObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === 'class') {
-          updateMapOffset()
-        }
-      })
-    })
-
-    mutationObserver.observe(document.body, {
-      attributes: true,
-      attributeFilter: ['class']
-    })
-
-    const panelsSection = document.querySelector('.panels')
-    if (panelsSection) {
-      mutationObserver.observe(panelsSection, {
-        attributes: true,
-        attributeFilter: ['class']
-      })
-    }
-
-    const resizeObserver = new ResizeObserver(updateMapOffset)
-    const sidebarEl = document.querySelector('.sidebar')
-    const panelEl = document.querySelector('.panels')
-    if (sidebarEl) resizeObserver.observe(sidebarEl)
-    if (panelEl) resizeObserver.observe(panelEl)
-
-    window.addEventListener('resize', updateMapOffset)
-
-    return () => {
-      mutationObserver.disconnect()
-      resizeObserver.disconnect()
-      window.removeEventListener('resize', updateMapOffset)
-    }
-  }, [])
-
   const childrenArray = React.Children.toArray(children)
 
   const processedChildren = childrenArray.map((child) => {

From 91d064add9f8564b9a5eb686037d15eb69e71afc Mon Sep 17 00:00:00 2001
From: Drew Pesall <pesallandrew@gmail.com>
Date: Fri, 14 Feb 2025 16:06:39 -0500
Subject: [PATCH 24/24] EDSC-4346 Updating tests

---
 .../Panels/__tests__/Panels.test.jsx          | 178 +-----------------
 .../__tests__/MapLayoutContaner.test.js       | 129 +------------
 2 files changed, 2 insertions(+), 305 deletions(-)

diff --git a/static/src/js/components/Panels/__tests__/Panels.test.jsx b/static/src/js/components/Panels/__tests__/Panels.test.jsx
index d110110ded..e93f2f9f5e 100644
--- a/static/src/js/components/Panels/__tests__/Panels.test.jsx
+++ b/static/src/js/components/Panels/__tests__/Panels.test.jsx
@@ -1,9 +1,5 @@
 import React from 'react'
-import {
-  render,
-  screen,
-  fireEvent
-} from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 
 import Panels from '../Panels'
 import { PanelSection } from '../PanelSection'
@@ -472,176 +468,4 @@ 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()
-    })
-  })
 })
diff --git a/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js b/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js
index ca031a770f..80cdb2d89a 100644
--- a/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js
+++ b/static/src/js/containers/MapLayoutContainer/__tests__/MapLayoutContaner.test.js
@@ -1,139 +1,12 @@
-// eslint-disable-next-line max-classes-per-file
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import {
-  render,
-  cleanup,
-  waitFor
-} from '@testing-library/react'
+import { render } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import MapLayoutContainer from '../MapLayoutContainer'
 
 describe('MapLayoutContainer', () => {
-  let mutationObserverInstances = []
-  let resizeObserverInstances = []
-
-  beforeEach(() => {
-    const sidebar = document.createElement('div')
-    sidebar.className = 'sidebar'
-    sidebar.getBoundingClientRect = () => ({
-      width: 100,
-      height: 0,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    })
-
-    document.body.appendChild(sidebar)
-
-    const panels = document.createElement('div')
-    panels.className = 'panels panels--is-open'
-    panels.getBoundingClientRect = () => ({
-      width: 200,
-      height: 0,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    })
-
-    document.body.appendChild(panels)
-
-    mutationObserverInstances = []
-    resizeObserverInstances = []
-
-    global.MutationObserver = class {
-      constructor(callback) {
-        this.callback = callback
-        this.disconnect = jest.fn()
-        mutationObserverInstances.push(this)
-      }
-
-      observe() {
-        /* No-op */
-      }
-    }
-
-    // Mock ResizeObserver
-    global.ResizeObserver = class {
-      constructor(callback) {
-        this.callback = callback
-        this.disconnect = jest.fn()
-        resizeObserverInstances.push(this)
-      }
-
-      observe() {
-        /* No-op */
-      }
-    }
-  })
-
-  afterEach(() => {
-    cleanup()
-
-    document.body.innerHTML = ''
-    jest.restoreAllMocks()
-  })
-
-  test('updates map offset when a mutation with attribute "class" is observed', async () => {
-    const panelsRef = React.createRef()
-    const { container } = render(
-      <MapLayoutContainer panelsRef={panelsRef}>
-        <div>Side Panel</div>
-        <div>Map Component</div>
-      </MapLayoutContainer>
-    )
-
-    const containerDiv = container.querySelector('.map-layout-container')
-    expect(containerDiv).toHaveStyle('--map-offset: 300px')
-
-    const sidebarEl = document.querySelector('.sidebar')
-    sidebarEl.getBoundingClientRect = () => ({
-      width: 150,
-      height: 0,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    })
-
-    mutationObserverInstances.forEach((observer) => {
-      observer.callback([{ attributeName: 'class' }])
-    })
-
-    await waitFor(() => {
-      expect(containerDiv).toHaveStyle('--map-offset: 350px')
-    })
-  })
-
-  test('cleans up observers and event listeners on unmount', () => {
-    const panelsRef = React.createRef()
-    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
-
-    const { unmount } = render(
-      <MapLayoutContainer panelsRef={panelsRef}>
-        <div>Side Panel</div>
-        <div>Map Component</div>
-      </MapLayoutContainer>
-    )
-
-    unmount()
-
-    mutationObserverInstances.forEach((observer) => {
-      expect(observer.disconnect).toHaveBeenCalled()
-    })
-
-    resizeObserverInstances.forEach((observer) => {
-      expect(observer.disconnect).toHaveBeenCalled()
-    })
-
-    expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
-  })
-
   test('clones direct SidebarContainer child with panelsRef', () => {
     const panelsRef = React.createRef()
-
     const SidebarContainer = forwardRef((props, ref) => <div ref={ref}>Sidebar</div>)
     SidebarContainer.displayName = 'SidebarContainer'