EDSC-4710: Fixes granules requests with no collection concept id

index.html

@@ -36,7 +36,8 @@
       .th-wrapper {
         width: 100%;
         z-index: 1000;
-        height: 34px;
+        height: 32px;
+        flex-shrink: 0;
       }
 
       .root {
@@ -273,7 +274,7 @@
         }
     </script>
     <% if (showTophat) { %>
-    <div id="earthdata-tophat2" class="th-wrapper" style="height: 34px; background: #000;"></div>
+    <div id="earthdata-tophat2" class="th-wrapper" style="background: #000;"></div>
     <% } %>
     <div id="root" class="root root--loading">
         <div class="root__loading">

package.json

@@ -64,7 +64,7 @@
     "@dotenvx/dotenvx": "^1.33.0",
     "@edsc/eslint-config": "^0.0.9",
     "@fastify/cors": "^10.0.2",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.62.1",
     "@storybook/addon-essentials": "^8.6.7",
     "@storybook/blocks": "^8.6.7",
     "@storybook/react": "^8.6.7",

playwright.config.js

@@ -24,12 +24,7 @@ export default defineConfig({
     baseURL: 'http://localhost:8080',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-
-    viewport: {
-      width: 1400,
-      height: 900
-    }
+    trace: 'on-first-retry'
   },
 
   // Set maxFailures to 5 on CI to avoid running the entire test suite if there are many failures.
@@ -52,7 +47,8 @@ export default defineConfig({
         viewport: {
           width: 1400,
           height: 900
-        }
+        },
+        deviceScaleFactor: 2
       }
     },
 
@@ -63,7 +59,8 @@ export default defineConfig({
         viewport: {
           width: 1400,
           height: 900
-        }
+        },
+        deviceScaleFactor: 2
       }
     },
 
@@ -74,7 +71,8 @@ export default defineConfig({
         viewport: {
           width: 1400,
           height: 900
-        }
+        },
+        deviceScaleFactor: 2
       }
     }
 

static/src/js/util/map/drawShapefile.ts

@@ -225,6 +225,8 @@ const drawShapefile = ({
     onUpdateShapefile({ selectedFeatures: [edscId] })
   }
 
+  let projectionChanged = false
+
   // If the map should be moved and onChangeProjection is defined, determine of we need to
   // change the map projection
   if (shapefileAdded && onChangeProjection) {
@@ -263,6 +265,7 @@ const drawShapefile = ({
     // If there is a new projection, update the map projection
     if (newProjection) {
       onChangeProjection(newProjection)
+      projectionChanged = true
     }
   }
 
@@ -271,12 +274,15 @@ const drawShapefile = ({
     // Create the metrics event
     metricsMap('Added Shapefile')
 
+    // When the projection changes we need to wait longer to ensure the map is ready to be moved to the shapefile.
+    const timeoutValue = projectionChanged ? 200 : 0
+
     // SetTimeout is needed here because the map needs to be rendered before the map can be moved
     setTimeout(() => {
       eventEmitter.emit(mapEventTypes.MOVEMAP, {
         source: vectorSource
       })
-    }, 0)
+    }, timeoutValue)
   }
 
   // If the spatial polygon warning is enabled, add an MBR around the shape

static/src/js/zustand/slices/__tests__/createGranulesSlice.test.ts

@@ -188,5 +188,95 @@ describe('createGranulesSlice', () => {
         title: 'Something went wrong fetching granule search results'
       }))
     })
+
+    describe('when the collectionId matches the granules collectionConceptId', () => {
+      describe('when the collection is not OpenSearch', () => {
+        test('does not fetch granules', async () => {
+          // This test will fail if a network request is attempted.
+
+          useEdscStore.setState((state) => {
+            state.collection.collectionId = 'collectionId'
+            state.granules.granules.collectionConceptId = 'collectionId'
+            state.errors.handleError = vi.fn()
+          })
+
+          const { granules } = useEdscStore.getState()
+          await granules.getGranules()
+
+          const { errors } = useEdscStore.getState()
+          expect(errors.handleError).toHaveBeenCalledTimes(0)
+        })
+      })
+
+      describe('when the collection is OpenSearch', () => {
+        test('fetches granules', async () => {
+          nock(/localhost/)
+            .post(/opensearch\/granules/)
+            .reply(200, `<feed>
+              <totalResults>1</totalResults>
+              <entry>
+                <mockGranuleData>goes here</mockGranuleData>
+              </entry>
+            </feed>`)
+
+          useEdscStore.setState((state) => {
+            state.collection.collectionId = 'collectionId'
+            state.collection.collectionMetadata = {
+              collectionId: {
+                links: [{
+                  rel: '/search#',
+                  href: 'https://example.com/opensearch'
+                }]
+              }
+            }
+
+            state.granules.granules.collectionConceptId = 'collectionId'
+            state.errors.handleError = vi.fn()
+          })
+
+          const { granules } = useEdscStore.getState()
+          await granules.getGranules()
+
+          const { errors } = useEdscStore.getState()
+          expect(errors.handleError).toHaveBeenCalledTimes(0)
+
+          const {
+            granules: updatedGranules
+          } = useEdscStore.getState()
+
+          expect(updatedGranules.granules).toEqual({
+            collectionConceptId: 'collectionId',
+            count: 1,
+            isLoaded: true,
+            isLoading: false,
+            items: [{
+              browseFlag: false,
+              collectionConceptId: 'collectionId',
+              isOpenSearch: true,
+              mockGranuleData: 'goes here',
+              spatial: null
+            }],
+            loadTime: expect.any(Number)
+          })
+        })
+      })
+    })
+
+    describe('when collectionId is not set', () => {
+      test('does not fetch granules', async () => {
+        // This test will fail if a network request is attempted.
+
+        useEdscStore.setState((state) => {
+          state.collection.collectionId = null
+          state.errors.handleError = vi.fn()
+        })
+
+        const { granules } = useEdscStore.getState()
+        await granules.getGranules()
+
+        const { errors } = useEdscStore.getState()
+        expect(errors.handleError).toHaveBeenCalledTimes(0)
+      })
+    })
   })
 })

static/src/js/zustand/slices/createGranulesSlice.ts

@@ -83,9 +83,10 @@ const createGranulesSlice: ImmerStateCreator<GranulesSlice> = (set, get) => ({
         // endpoints. This `if` ensures we don't double fetch CMR granules.
         // TODO This is causing a double fetch for OpenSearch granules (both to the same OpenSearch endpoint)
         // TODO when loaded from the search results. The first request gets cancelled, but it would be nice to avoid that
+        // When this double fetch is happening, it is possible the user has already moved to a new page and the `collectionId` no longer exists. When this happens we also need to return with no action.
         if (
-          collectionId === zustandState.granules.granules.collectionConceptId
-          && !isOpenSearch
+          !collectionId
+          || (collectionId === zustandState.granules.granules.collectionConceptId && !isOpenSearch)
         ) {
           return
         }

tests/support/setupTests.js

@@ -111,6 +111,7 @@ export const setupTests = async ({
   await page.route('**googletagmanager**', (route) => route.abort())
   await page.route('**google-analytics**', (route) => route.abort())
   await page.route('**digitalgov**', (route) => route.abort())
+  await page.route('**tophat**', (route) => route.abort())
 
   await page.route('**/arcgis/**', async (route) => {
     await handleImage(route, page)