EDSC-3167: Ensure color indicators match for project collections and …

…timelines (#1703) * Provide matching sorts for timeline and projects. * Seperate the logic for applying color. * Remove console logs * Updates based on feedback * linting.
nasa · Dec 22, 2023 · 8a10f14 · 8a10f14
1 parent d5403eb
commit 8a10f14
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 6 deletions.
diff --git a/static/src/js/components/Timeline/Timeline.js b/static/src/js/components/Timeline/Timeline.js
@@ -28,6 +28,7 @@ export const Timeline = ({
   onToggleOverrideTemporalModal,
   onToggleTimeline,
   pathname,
+  projectCollectionsIds,
   showOverrideModal,
   temporalSearch,
   timeline
@@ -243,15 +244,14 @@ export const Timeline = ({
   const setupData = ({ intervals }) => {
     const data = []
 
-    Object.keys(intervals).forEach((key, index) => {
-      // If collectionMetadata doesn't exist for this key return
-      if (!collectionMetadata[key]) return
+    projectCollectionsIds.forEach((conceptId, index) => {
+      if (!intervals[conceptId]) return
 
-      const values = intervals[key]
-      const metadata = collectionMetadata[key] || {}
+      const values = intervals[conceptId]
+      const metadata = collectionMetadata[conceptId] || {}
 
       const dataValue = {}
-      dataValue.id = key
+      dataValue.id = conceptId
       dataValue.color = getColorByIndex(index)
       const { title = '' } = metadata
       dataValue.title = title
@@ -385,6 +385,7 @@ Timeline.propTypes = {
   onToggleOverrideTemporalModal: PropTypes.func.isRequired,
   onToggleTimeline: PropTypes.func.isRequired,
   pathname: PropTypes.string.isRequired,
+  projectCollectionsIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   showOverrideModal: PropTypes.bool.isRequired,
   temporalSearch: PropTypes.shape({
     endDate: PropTypes.string,

diff --git a/static/src/js/components/Timeline/__tests__/Timeline.test.js b/static/src/js/components/Timeline/__tests__/Timeline.test.js
@@ -24,6 +24,7 @@ function setup(overrideProps) {
     },
     showOverrideModal: false,
     pathname: '/search/granules',
+    projectCollectionsIds: ['collectionId'],
     onChangeQuery: jest.fn(),
     onChangeTimelineQuery: jest.fn(),
     onToggleOverrideTemporalModal: jest.fn(),
@@ -153,6 +154,75 @@ describe('Timeline component', () => {
       title: 'Test Collection'
     }])
   })
+
+  test('setup data creates the correct intervals in the correct order for EDSCTimeline', () => {
+    const { enzymeWrapper } = setup({
+      pathname: '/search/granules',
+      collectionMetadata: {
+        collectionId: {
+          title: 'Test Collection'
+        },
+        secondCollection: {
+          title: '2nd Test Collection'
+        },
+        thirdCollection: {
+          title: '3rd Collection'
+        }
+      },
+      projectCollectionsIds: ['collectionId', 'secondCollection', 'thirdCollection'],
+      timeline: {
+        intervals: {
+          collectionId: [
+            [
+              1525132800,
+              1618185600,
+              582637
+            ]
+          ],
+          thirdCollection: [
+            [
+              1525132800,
+              1618185600,
+              582637
+            ]
+          ],
+          secondCollection: [
+            [
+              1525132800,
+              1618185600,
+              582637
+            ]
+          ]
+        },
+        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: 'collectionId',
+      intervals: [[1525132800000, 1618185600000]],
+      title: 'Test Collection'
+    },
+    {
+      color: '#3498DB',
+      id: 'secondCollection',
+      intervals: [[1525132800000, 1618185600000]],
+      title: '2nd Test Collection'
+    },
+    {
+      color: '#E67E22',
+      id: 'thirdCollection',
+      intervals: [[1525132800000, 1618185600000]],
+      title: '3rd Collection'
+    }])
+  })
 })
 
 describe('handleTimelineMoveEnd', () => {

diff --git a/static/src/js/containers/TimelineContainer/TimelineContainer.js b/static/src/js/containers/TimelineContainer/TimelineContainer.js
@@ -90,6 +90,7 @@ export const TimelineContainer = (props) => {
       onMetricsTimeline={onMetricsTimeline}
       onToggleTimeline={onToggleTimeline}
       isOpen={isOpen}
+      projectCollectionsIds={projectCollectionsIds}
     />
   )
 }