EDSC-3981: Fixing Timeline display for focused collection (#1709)

* EDSC-3981 Fixing timeline to display without having to add collection to project * EDSC-3981 Updating timeline logic and test * EDSC-3981 Updating test * EDSC-3981 PR Feedback * EDSC-3981 Adding tests & comments * EDSC-3981 Minor timeline behavior change --------- Co-authored-by: drewpesall <[email protected]>
nasa · Jan 26, 2024 · 01d2b53 · 01d2b53
1 parent d4da4a8
commit 01d2b53
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 24 deletions.
diff --git a/static/src/js/components/Timeline/Timeline.js b/static/src/js/components/Timeline/Timeline.js
@@ -244,27 +244,54 @@ export const Timeline = ({
   const setupData = ({ intervals }) => {
     const data = []
 
-    projectCollectionsIds.forEach((conceptId, index) => {
-      if (!intervals[conceptId]) return
+    // Render the Collection Timelines in the same order they were added
+    if (isProjectPage) {
+      projectCollectionsIds.forEach((conceptId, index) => {
+        if (!intervals[conceptId]) return
 
-      const values = intervals[conceptId]
-      const metadata = collectionMetadata[conceptId] || {}
+        const values = intervals[conceptId]
+        const metadata = collectionMetadata[conceptId] || {}
 
-      const dataValue = {}
-      dataValue.id = conceptId
-      dataValue.color = getColorByIndex(index)
-      const { title = '' } = metadata
-      dataValue.title = title
+        const dataValue = {}
+        dataValue.id = conceptId
+        dataValue.color = getColorByIndex(index)
+        const { title = '' } = metadata
+        dataValue.title = title
 
-      dataValue.intervals = values.map((value) => {
-        const [start, end] = value
+        dataValue.intervals = values.map((value) => {
+          const [start, end] = value
 
-        // TODO: Change the format of the intervals to an object at some point
-        return [start * 1000, end * 1000]
+          // TODO: Change the format of the intervals to an object at some point
+          return [start * 1000, end * 1000]
+        })
+
+        data.push(dataValue)
       })
+    }
 
-      data.push(dataValue)
-    })
+    // Ensure we render the Timeline on the focused collection view, even if it has not been added to the project
+    if (!isProjectPage) {
+      Object.keys(intervals).forEach((conceptId, index) => {
+        if (!collectionMetadata[conceptId]) return
+
+        const values = intervals[conceptId]
+        const metadata = collectionMetadata[conceptId] || {}
+
+        const dataValue = {}
+        dataValue.id = conceptId
+        dataValue.color = getColorByIndex(index)
+        const { title = '' } = metadata
+        dataValue.title = title
+
+        dataValue.intervals = values.map((value) => {
+          const [start, end] = value
+
+          return [start * 1000, end * 1000]
+        })
+
+        data.push(dataValue)
+      })
+    }
 
     return data
   }

diff --git a/static/src/js/components/Timeline/__tests__/Timeline.test.js b/static/src/js/components/Timeline/__tests__/Timeline.test.js
@@ -155,24 +155,59 @@ describe('Timeline component', () => {
     }])
   })
 
+  test('timeline displays on focused collection even when projectCollectionsIds is empty', () => {
+    const { enzymeWrapper } = setup({
+      pathname: '/search/granules', // Indicating it's not a project page
+      collectionMetadata: {
+        someCollection: {
+          title: 'Some Collection'
+        }
+      },
+      projectCollectionsIds: [], // Empty project collections
+      timeline: {
+        intervals: {
+          someCollection: [
+            [1525132800, 1618185600]
+          ]
+        },
+        query: {
+          center: 1552425382,
+          interval: 'day',
+          endDate: '2020-09-11T21:16:22.000Z',
+          startDate: '2017-09-09T21:16:22.000Z'
+        }
+      }
+    })
+
+    const timeline = enzymeWrapper.find(EDSCTimeline)
+    expect(timeline.props().data).toEqual([
+      {
+        color: '#2ECC71',
+        id: 'someCollection',
+        intervals: [[1525132800000, 1618185600000]],
+        title: 'Some Collection'
+      }
+    ])
+  })
+
   test('setup data creates the correct intervals in the correct order for EDSCTimeline', () => {
     const { enzymeWrapper } = setup({
-      pathname: '/search/granules',
+      pathname: '/projects',
       collectionMetadata: {
-        collectionId: {
-          title: 'Test Collection'
+        firstCollection: {
+          title: '1st Collection'
         },
         secondCollection: {
-          title: '2nd Test Collection'
+          title: '2nd Collection'
         },
         thirdCollection: {
           title: '3rd Collection'
         }
       },
-      projectCollectionsIds: ['collectionId', 'secondCollection', 'thirdCollection'],
+      projectCollectionsIds: ['firstCollection', 'secondCollection', 'thirdCollection'],
       timeline: {
         intervals: {
-          collectionId: [
+          firstCollection: [
             [
               1525132800,
               1618185600,
@@ -206,15 +241,15 @@ describe('Timeline component', () => {
     const timeline = enzymeWrapper.find(EDSCTimeline)
     expect(timeline.props().data).toEqual([{
       color: '#2ECC71',
-      id: 'collectionId',
+      id: 'firstCollection',
       intervals: [[1525132800000, 1618185600000]],
-      title: 'Test Collection'
+      title: '1st Collection'
     },
     {
       color: '#3498DB',
       id: 'secondCollection',
       intervals: [[1525132800000, 1618185600000]],
-      title: '2nd Test Collection'
+      title: '2nd Collection'
     },
     {
       color: '#E67E22',