EDSC-3719, EDSC-3525: Scroll to granule on map click and table granules bugfix

static/src/js/components/EDSCTable/EDSCTable.jsx

@@ -134,6 +134,7 @@ innerElementType.displayName = 'EDSCTableInnerElement'
  * @param {Object} props - The props passed into the component.
  * @param {Array} props.columns - The column settings.
  * @param {Array} props.data - The collection data.
+ * @param {Array} props.focusedItem - The item in focus (granule).
  * @param {String} props.id - A unique id to pass the table.
  * @param {Function} props.isItemLoaded - Callback to see if an item has loaded.
  * @param {Object} props.initialTableState - The initial state to be passed to react-table.
@@ -154,6 +155,7 @@ innerElementType.displayName = 'EDSCTableInnerElement'
 const EDSCTable = ({
   columns,
   data,
+  focusedItem,
   id,
   isItemLoaded,
   itemCount,
@@ -199,9 +201,20 @@ const EDSCTable = ({
   useEffect(() => {
   }, [visibleMiddleIndex])
 
+  // When a user clicks on a granule on the map, it will scroll to that granule in the GranuleResultsTable
+  useEffect(() => {
+    if (focusedItem) {
+      const itemIndex = data.findIndex((item) => item.id === focusedItem)
+      if (itemIndex && listRef && listRef.current) {
+        listRef.current.scrollToItem(itemIndex, 'center')
+      }
+    }
+  }, [focusedItem])
+
   const options = {}
 
   if (initialRowStateAccessor) options.initialRowStateAccessor = initialRowStateAccessor
+
   if (!isEmpty(initialTableState)) options.initialState = initialTableState
 
   const {
@@ -492,6 +505,7 @@ const EDSCTable = ({
 }
 
 EDSCTable.defaultProps = {
+  focusedItem: '',
   initialRowStateAccessor: null,
   initialTableState: {},
   isItemLoaded: null,
@@ -515,6 +529,7 @@ EDSCTable.defaultProps = {
 EDSCTable.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  focusedItem: PropTypes.string,
   id: PropTypes.string.isRequired,
   initialRowStateAccessor: PropTypes.func,
   initialTableState: PropTypes.shape({}),

static/src/js/components/GranuleResults/GranuleResultsBody.jsx

@@ -187,6 +187,7 @@ const GranuleResultsBody = ({
           readableGranuleName={readableGranuleName}
           directDistributionInformation={directDistributionInformation}
           excludedGranuleIds={excludedGranuleIds}
+          focusedGranuleId={focusedGranuleId}
           granules={granulesList}
           isCollectionInProject={isCollectionInProject}
           isOpenSearch={isOpenSearch}

static/src/js/components/GranuleResults/GranuleResultsList.jsx

@@ -14,6 +14,7 @@ import './GranuleResultsList.scss'
  * @param {String} props.collectionId - The collection ID.
  * @param {Object} props.directDistributionInformation - The direct distribution information.
  * @param {Array} props.excludedGranuleIds - List of excluded granule IDs.
+ * @param {String} props.focusedGranuleId - The currently focused granule ID.
  * @param {Array} props.granules - List of formatted granule.
  * @param {Boolean} props.isOpenSearch - Flag designating CWIC collections.
  * @param {Boolean} props.isCollectionInProject - Flag designating if the collection is in the project.
@@ -35,6 +36,7 @@ export const GranuleResultsList = ({
   collectionId,
   directDistributionInformation,
   excludedGranuleIds,
+  focusedGranuleId,
   granules,
   isCollectionInProject,
   isOpenSearch,
@@ -67,6 +69,7 @@ export const GranuleResultsList = ({
             collectionId={collectionId}
             directDistributionInformation={directDistributionInformation}
             excludedGranuleIds={excludedGranuleIds}
+            focusedGranuleId={focusedGranuleId}
             granules={granules}
             height={height}
             isCollectionInProject={isCollectionInProject}
@@ -101,6 +104,7 @@ GranuleResultsList.propTypes = {
   collectionId: PropTypes.string.isRequired,
   directDistributionInformation: PropTypes.shape({}).isRequired,
   excludedGranuleIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  focusedGranuleId: PropTypes.string.isRequired,
   granules: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   isCollectionInProject: PropTypes.bool.isRequired,
   isOpenSearch: PropTypes.bool.isRequired,

static/src/js/components/GranuleResults/GranuleResultsListBody.jsx

@@ -82,6 +82,7 @@ export const GranuleResultsListBody = ({
   collectionId,
   directDistributionInformation,
   excludedGranuleIds,
+  focusedGranuleId,
   granules,
   height,
   isCollectionInProject,
@@ -139,10 +140,38 @@ export const GranuleResultsListBody = ({
       listRef.current.scrollToItem({
         rowIndex,
         columnIndex
-      }, 'center')
+      }, 'auto')
     }
   }, [listRef.current])
 
+  const scrollToFocusedGranule = (granuleId) => {
+    const granuleIndex = granules.findIndex((granule) => {
+      const { id } = granule
+      if (granuleId === id) return true
+
+      return false
+    })
+
+    if (granuleIndex >= 0) {
+      const {
+        rowIndex,
+        columnIndex
+      } = itemToRowColumnIndicies(granuleIndex, numColumns)
+
+      listRef.current.scrollToItem({
+        rowIndex: rowIndex === 0 ? 0 : rowIndex + 1,
+        columnIndex,
+        align: 'center'
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (focusedGranuleId) {
+      scrollToFocusedGranule(focusedGranuleId)
+    }
+  }, [focusedGranuleId])
+
   // `setRowHeight` sets the size in the sizeMap to the height passed from the item.
   const setRowHeight = useCallback((rowIndex, columnIndex, size) => {
     if (!sizeMap.current[rowIndex]) sizeMap.current[rowIndex] = []
@@ -167,10 +196,6 @@ export const GranuleResultsListBody = ({
 
     const rowHeight = Math.max(...sizeMap.current[rowIndex])
 
-    if (rowIndex === itemCount - 1) {
-      return rowHeight + (remInPixels * 4)
-    }
-
     return rowHeight + remInPixels
   }, [itemCount])
 
@@ -191,6 +216,7 @@ export const GranuleResultsListBody = ({
                 listRef.current = list
               }
             }
+            overscanRowCount={3}
             columnCount={numColumns}
             columnWidth={() => (width / numColumns) - (remInPixels / numColumns)}
             height={height}
@@ -224,7 +250,7 @@ export const GranuleResultsListBody = ({
             }
             onItemsRendered={
               (gridProps) => {
-              // OnItemsRendered needs to know which items are visible in the list
+                // OnItemsRendered needs to know which items are visible in the list
                 const overscanStartIndex = gridProps.overscanRowStartIndex * numColumns
                 const overscanStopIndex = gridProps.overscanRowStopIndex * numColumns
                 const visibleStartIndex = gridProps.visibleRowStartIndex * numColumns
@@ -260,6 +286,7 @@ GranuleResultsListBody.propTypes = {
   collectionId: PropTypes.string.isRequired,
   directDistributionInformation: PropTypes.shape({}).isRequired,
   excludedGranuleIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  focusedGranuleId: PropTypes.string.isRequired,
   granules: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   height: PropTypes.number.isRequired,
   isCollectionInProject: PropTypes.bool.isRequired,

static/src/js/components/GranuleResults/GranuleResultsListItem.jsx

@@ -97,22 +97,24 @@ export const GranuleResultsListItem = memo(({
   if (!granule) return null
 
   return (
-    <li className="granule-results-list-item" style={customStyle}>
-      <GranuleResultsItem
-        collectionId={collectionId}
-        directDistributionInformation={directDistributionInformation}
-        granule={granules[index]}
-        isCollectionInProject={isCollectionInProject}
-        isGranuleInProject={isGranuleInProject}
-        location={location}
-        onAddGranuleToProjectCollection={onAddGranuleToProjectCollection}
-        onExcludeGranule={onExcludeGranule}
-        onFocusedGranuleChange={onFocusedGranuleChange}
-        onMetricsDataAccess={onMetricsDataAccess}
-        onRemoveGranuleFromProjectCollection={onRemoveGranuleFromProjectCollection}
-        readableGranuleName={readableGranuleName}
-        ref={element}
-      />
+    <li className="granule-results-list-item" style={style}>
+      <div style={{ padding: '0.825rem' }}>
+        <GranuleResultsItem
+          collectionId={collectionId}
+          directDistributionInformation={directDistributionInformation}
+          granule={granules[index]}
+          isCollectionInProject={isCollectionInProject}
+          isGranuleInProject={isGranuleInProject}
+          location={location}
+          onAddGranuleToProjectCollection={onAddGranuleToProjectCollection}
+          onExcludeGranule={onExcludeGranule}
+          onFocusedGranuleChange={onFocusedGranuleChange}
+          onMetricsDataAccess={onMetricsDataAccess}
+          onRemoveGranuleFromProjectCollection={onRemoveGranuleFromProjectCollection}
+          readableGranuleName={readableGranuleName}
+          ref={element}
+        />
+      </div>
     </li>
   )
 })

static/src/js/components/GranuleResults/GranuleResultsTable.jsx

@@ -107,19 +107,24 @@ export const GranuleResultsTable = ({
     }
   ])
 
-  const initialRowStateAccessor = useMemo(() => ({
-    isFocusedGranule,
-    isHoveredGranule,
-    isInProject,
-    isCollectionInProject
-  }) => ({
-    isFocusedGranule,
-    isHoveredGranule,
-    isInProject,
-    isCollectionInProject
-  }), [focusedGranuleId])
+  const initialRowStateAccessor = useCallback((row) => {
+    const { original = {} } = row
+    const {
+      isFocusedGranule,
+      isHoveredGranule,
+      isInProject,
+      isCollectionInProject
+    } = original
+
+    return {
+      isFocusedGranule,
+      isHoveredGranule,
+      isInProject,
+      isCollectionInProject
+    }
+  }, [focusedGranuleId])
 
-  const rowClassNamesFromRowState = useMemo(() => ({
+  const rowClassNamesFromRowState = useCallback(({
     isFocusedGranule,
     isHoveredGranule,
     isCollectionInProject,
@@ -133,7 +138,7 @@ export const GranuleResultsTable = ({
     return classNames
   })
 
-  const rowTitleFromRowState = useMemo(() => ({ isFocusedGranule }) => {
+  const rowTitleFromRowState = useCallback(({ isFocusedGranule }) => {
     let rowTitle = 'Focus granule on map'
 
     if (isFocusedGranule) rowTitle = 'Unfocus granule on map'
@@ -182,6 +187,7 @@ export const GranuleResultsTable = ({
         columns={columns}
         initialTableState={initialTableState}
         data={granules}
+        focusedItem={focusedGranuleId}
         itemCount={itemCount}
         loadMoreItems={loadMoreItems}
         isItemLoaded={isItemLoaded}

static/src/js/components/GranuleResults/__tests__/GranuleResultsList.test.js

@@ -41,7 +41,7 @@ function setup(type) {
       collectionId: 'collectionId',
       directDistributionInformation: {},
       excludedGranuleIds: [],
-      focusedGranule: '',
+      focusedGranuleId: '',
       granules: [
         {
           title: '123'

static/src/js/components/GranuleResults/__tests__/GranuleResultsTable.test.js

@@ -213,9 +213,11 @@ describe('GranuleResultsTable component', () => {
         const table = enzymeWrapper.find(EDSCTable)
 
         const result = table.props().initialRowStateAccessor({
-          isFocusedGranule: true,
-          isCollectionInProject: true,
-          isInProject: false
+          original: {
+            isFocusedGranule: true,
+            isCollectionInProject: true,
+            isInProject: false
+          }
         })
 
         expect(result).toEqual({

tests/e2e/map/map.spec.js

@@ -1465,10 +1465,6 @@ test.describe('Map interactions', () => {
           await expect(page.locator('.granule-spatial-label-temporal')).toHaveText('2021-05-31 15:30:522021-05-31 15:31:22')
         })
 
-        test('focuses the selected granule', async ({ page }) => {
-          await expect(page.getByRole('button', { name: /S1A_IW_SLC__1SDV_20210531T153052_20210531T153122_038133_04802B_C09D/ })).toHaveClass(/granule-results-item--active/)
-        })
-
         test('updates the URL', async ({ page }) => {
           await expect(page).toHaveURL(/\/search\/granules.*g=G2061166811-ASF/)
         })