Add collection date and bbox ranges (#72)

* Add collection date and bbox ranges * Update changelog * Code revisions * Add comments for clarity
Element84 · Mar 23, 2023 · 2d04374 · 2d04374
1 parent 07825a8
commit 2d04374
Show file tree

Hide file tree

Showing 8 changed files with 300 additions and 87 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## v0.6.0 - TBD
+
+### Changed
+
+- Move the viewport to include collection spatial bounds if it is outside those bounds
+- Set the date picker to the collection temporal date range if date picker is outside that range
+
 ## v0.5.0 - 2023-03-20
 
 ### Changed

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.0",
     "react-redux": "^8.0.5",
+    "react-tooltip": "^5.10.0",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

diff --git a/src/components/CollectionDropdown/CollectionDropdown.js b/src/components/CollectionDropdown/CollectionDropdown.js
@@ -14,7 +14,9 @@ import { useDispatch } from 'react-redux'
 // you need to import each action you need to use
 import {
   setSarPolarizations,
-  setSelectedCollection
+  setSelectedCollection,
+  setCollectionTemporalData,
+  setCollectionSpatialData
 } from '../../redux/slices/mainSlice'
 
 const Dropdown = ({ error }) => {
@@ -23,7 +25,7 @@ const Dropdown = ({ error }) => {
 
   // if you are setting redux state, call dispatch
   const dispatch = useDispatch()
-  const [value, setValue] = useState()
+  const [collectionId, setCollectionId] = useState()
   const [collectionData, setCollectionData] = useState(null)
 
   useEffect(() => {
@@ -42,7 +44,7 @@ const Dropdown = ({ error }) => {
 
   useEffect(() => {
     // setup sar:polarizations query parameter, if available
-    fetch(`${API_ENDPOINT}/collections/${value}/queryables`)
+    fetch(`${API_ENDPOINT}/collections/${collectionId}/queryables`)
       .then((response) => response.json())
       .then((actualData) => {
         const supportsSarPolarizations =
@@ -54,9 +56,9 @@ const Dropdown = ({ error }) => {
         console.log('Fetch Error: ', err.message)
       })
     // update redux with updated collection
-    dispatch(setSelectedCollection(value))
+    dispatch(setSelectedCollection(collectionId))
     // eslint-disable-next-line
-  }, [value])
+  }, [collectionId])
 
   useEffect(() => {
     // check if REACT_APP_DEFAULT_COLLECTION is available
@@ -70,16 +72,39 @@ const Dropdown = ({ error }) => {
           'Configuration Error: REACT_APP_DEFAULT_COLLECTION not found in API'
         )
       } else {
-        setValue(DEFAULT_COLLECTION)
+        setCollectionId(DEFAULT_COLLECTION)
       }
     }
   }, [collectionData])
 
+  useEffect(() => {
+    /**
+     * Only the first entry from the temporal and spatial properties are used
+     * despite there possibly being more ranges available in the collection
+     */
+    if (collectionData) {
+      const temporalData = getCollection(collectionData, collectionId).extent
+        ?.temporal?.interval
+      if (temporalData && temporalData.length >= 1) {
+        dispatch(setCollectionTemporalData(temporalData[0]))
+      }
+      const spatialData = getCollection(collectionData, collectionId).extent
+        ?.spatial?.bbox
+      if (spatialData && spatialData.length >= 1) {
+        dispatch(setCollectionSpatialData(spatialData[0]))
+      }
+    }
+  }, [collectionId])
+
+  const getCollection = (collectionData, collectionId) => {
+    return collectionData?.find((e) => e.id === collectionId)
+  }
+
   const handleDropdownChange = (event) => {
     if (event) {
-      setValue(event.target.value)
+      setCollectionId(event.target.value)
     } else {
-      setValue('')
+      setCollectionId('')
     }
   }
 
@@ -97,7 +122,7 @@ const Dropdown = ({ error }) => {
         <Grid item xs>
           <NativeSelect
             id="collectionDropdown"
-            value={value}
+            value={collectionId}
             label="Collection"
             onChange={handleDropdownChange}
             sx={{

diff --git a/src/components/Search/Search.css b/src/components/Search/Search.css
@@ -39,70 +39,23 @@ span.error-true {
 
 /* Date Range Picker */
 
-.dateTimePicker {
-  margin-top: 6px;
+.datePicker {
   z-index: 4;
   font-size: 16px;
-  width: 100%;
-}
-
-.react-calendar__month-view__weekdays {
-  color: #333;
-}
-
-.react-datetimerange-picker__wrapper {
-  border: 0 none;
-}
-
-.react-datetimerange-picker__inputGroup {
-  border-bottom: 1px solid #76829c;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  padding-bottom: 1px;
-}
-
-.react-datetimerange-picker__inputGroup:hover {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.87);
-}
-
-.react-datetimerange-picker__button {
-  margin-bottom: 4px;
 }
 
-.react-datetimerange-picker__range-divider {
+.datePicker label a svg {
+  height: 16px;
+  width: 16px;
   position: relative;
-  top: -1px;
+  top: 1px;
+  left: 4px;
+  margin-right: 10px;
 }
 
-.react-datetimerange-picker__button:enabled:hover
-  .react-datetimerange-picker__button__icon,
-.react-datetimerange-picker__button:enabled:focus
-  .react-datetimerange-picker__button__icon {
-  stroke: #6cc24a;
-}
-
-.dateTimePicker svg {
-  stroke: #a9b0c1;
-}
-
-.dateTimePicker input::placeholder {
-  color: #ffffff;
-}
-
-.dateTimePicker select {
-  color: #353d4f;
-}
-
-.react-datetimerange-picker__inputGroup__input {
-  color: white;
-}
-
-.react-datetimerange-picker__clock {
-  display: none;
-}
-.react-datetimerange-picker__clock--open {
-  display: none;
+.datePicker .react-tooltip {
+  font-weight: normal;
+  line-height: 1.6;
 }
 
 /* Cloud Slider */