Remove search button, update styling (#34)

* Remove search button, update styling

* Streamline code and removed unused css

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Remove BBOX button
 - Make REACT_APP_MIN_ZOOM_LEVEL optional
 - Improve use of MIN_ZOOM constant
+- Remove Search button
 
 ### Added
 

src/components/CloudSlider/CloudSlider.js

@@ -78,9 +78,9 @@ const CloudSlider = () => {
               onBlur={handleBlur}
               className="sliderInput"
               sx={{
-                ':before': { borderBottomColor: '#dedede' },
+                ':before': { borderBottomColor: '#76829c' },
                 // underline when selected
-                ':after': { borderBottomColor: '#dedede' }
+                ':after': { borderBottomColor: '#76829c' }
               }}
               inputProps={{
                 step: 1,

src/components/Layout/Content/BottomContent/BottomContent.css

@@ -10,7 +10,7 @@
   position: absolute;
   top: 11px;
   left: 50px;
-  z-index: 99999;
+  z-index: 1;
   background: #353d4f;
   padding: 10px 30px;
   border-radius: 6px;

src/components/Layout/Content/Content.css

@@ -1,10 +1,10 @@
 .Content {
-  height: calc(100% - 83px);
+  height: calc(100% - 80px);
   width: 100%;
   display: flex;
   flex-direction: column;
   color: #d3d3d3;
   font-size: 20px;
   position: absolute;
-  top: 83px;
+  top: 80px;
 }

src/components/Layout/Content/TopContent/TopContent.css

@@ -1,6 +1,5 @@
 .TopContent {
   width: 100%;
   height: 100px;
-  background-color: #12171a;
-  border-bottom: 3px solid #353d4f;
+  background-color: #353d4f;
 }

src/components/Layout/PageHeader/PageHeader.css

@@ -2,7 +2,6 @@
   width: 100%;
   height: 80px;
   background-color: #12171a;
-  border-bottom: 3px solid #353d4f;
   color: #a9b0c1;
   display: flex;
   align-items: stretch;

src/components/Search/Search.css

@@ -10,64 +10,18 @@
   align-items: center;
 }
 
-.bboxButton {
-  cursor: pointer;
-  height: 80px;
-  margin-left: 20px;
-  padding-left: 20px;
-  padding-right: 20px;
-  background-color: #353d4f;
-  color: #dedede;
-  border: 0px;
-  border-radius: 6px;
-  font-size: 18px;
-  font-weight: bold;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.394);
-  transition: all 0.33s ease-in-out;
-}
-.bboxButton.error-true {
-  background-color: #bc3131;
-}
-.bboxButton:hover {
-  background-color: #6cc24a;
-  color: #12171a;
-}
-
 span.error-true {
   color: #bc3131;
 }
 
-.searchButton {
-  cursor: pointer;
-  height: 80px;
-  margin-left: 20px;
-  padding-left: 20px;
-  padding-right: 20px;
-  background-color: #6cc24a;
-  color: #12171a;
-  border: 0px;
-  font-size: 18px;
-  font-weight: bold;
-  border-radius: 6px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.394);
-  transition: all 0.33s ease-in-out;
-}
-
-.searchButton:hover {
-  background-color: #35731c;
-  color: #dedede;
-}
-
 .searchContainer {
-  height: 80px;
-  margin-left: 20px;
-  padding-left: 20px;
-  padding-right: 20px;
+  height: 100px;
+  padding-left: 30px;
+  padding-right: 30px;
   background-color: #353d4f;
-  color: #dedede;
-  border: 0px;
+  border-right: 1px solid #757a85;
+  color: #ffffff;
   font-size: 16px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.394);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -87,6 +41,10 @@ span.error-true {
   width: 100%;
 }
 
+.react-calendar__month-view__weekdays {
+  color: #333;
+}
+
 .react-datetimerange-picker__wrapper {
   border: 0 none;
 }

src/components/Search/Search.js

@@ -1,4 +1,4 @@
-import { React, useEffect, useState } from 'react'
+import { React, useEffect, useState, useRef } from 'react'
 import './Search.css'
 import { envTilerURL, constructTilerParams } from './envVarSetup'
 import { MIN_ZOOM } from '../defaults'
@@ -32,6 +32,7 @@ const Search = () => {
     (state) => state.mainSlice.currentPopupResult
   )
   const tilerURL = envTilerURL
+
   // if you are setting redux state, call dispatch
   const dispatch = useDispatch()
 
@@ -48,7 +49,9 @@ const Search = () => {
   const [clickedFootprintsImageLayer, setClickedFootprintsImageLayer] =
     useState()
   const [collectionError, setCollectionError] = useState(false)
-  const [zoomLevel, setZoomLevel] = useState()
+  const [zoomLevelNotice, setZoomLevelNotice] = useState(0)
+  const zoomLevelRef = useRef(0)
+  const localCollectionRef = useRef(_collectionSelected)
 
   // override leaflet draw tooltips
   // eslint-disable-next-line no-import-assign
@@ -95,9 +98,6 @@ const Search = () => {
       setClickedFootprintsImageLayer(clickedFootprintsImageLayerInit)
       clickedFootprintsImageLayerInit.addTo(map)
 
-      // set initial zoom level
-      setZoomLevel(map.getZoom())
-
       // setup custom pane for tiler image result
       map.createPane('imagery')
       map.getPane('imagery').style.zIndex = 650
@@ -107,34 +107,57 @@ const Search = () => {
       const southWest = L.latLng(-90, -180)
       const northEast = L.latLng(90, 180)
       const bounds = L.latLngBounds(southWest, northEast)
-
       map.setMaxBounds(bounds)
       map.on('drag', function () {
         map.panInsideBounds(bounds, { animate: false })
       })
 
-      map.on('click', mapClickHandler)
-
       map.on('zoomend', function () {
-        setZoomLevel(map.getZoom())
+        zoomLevelRef.current = map.getZoom()
+        setZoomLevelNotice(map.getZoom())
+        processSearch(resultFootprintsInit)
+      })
+
+      map.on('dragend', function () {
+        processSearch(resultFootprintsInit)
       })
+
+      map.on('click', mapClickHandler)
+
+      // initiate first search on load
+      processSearch(resultFootprintsInit)
     }
   }, [map])
 
   // when zoom level changes, set in global store to hide/show zoom notice
+  // and perform search if within zoom limits
   useEffect(() => {
-    if (zoomLevel >= MIN_ZOOM) {
+    if (zoomLevelNotice >= MIN_ZOOM) {
       dispatch(setShowZoomNotice(false))
     } else {
       dispatch(setShowZoomNotice(true))
     }
-  }, [zoomLevel])
+  }, [zoomLevelNotice])
 
-  // when dataTime changes, set in global store
+  // when datatime changes, set in global store and perform new search
   useEffect(() => {
     dispatch(setDateTime(dateTimeValue))
+    if (map && Object.keys(map).length > 0) processSearch()
   }, [dateTimeValue])
 
+  /* Disabled temporarily
+  // when cloud cover value changes, if map loaded, perform new search
+  useEffect(() => {
+    if (map && Object.keys(map).length > 0) processSearch()
+  }, [_cloudCover])
+  */
+
+  // when collection dropdown changes, if map loaded, perform new search
+  useEffect(() => {
+    localCollectionRef.current = _collectionSelected
+    if (map && Object.keys(map).length > 0) processSearch()
+  }, [_collectionSelected])
+
   // when search results change, if map loaded, set new mapClickHandler
   useEffect(() => {
     if (map && Object.keys(map).length > 0 && _searchResults !== null) {
@@ -223,46 +246,56 @@ const Search = () => {
   }
 
   // remove old footprints from map
-  function removeFootprints() {
-    resultFootprints.eachLayer(function (layer) {
-      map.removeLayer(layer)
+  function removeFootprints(resultFootPrintsLocal) {
+    resultFootPrintsLocal.eachLayer(function (layer) {
+      resultFootPrintsLocal.removeLayer(layer)
     })
   }
 
-  // function called when search button clicked
-  function searchAPI() {
-    // get viewport bounds
-    const viewportBounds = map.getBounds()
+  // throttle function to prevent map from rendering too quickly
+  const debounce = (func, waitInMillis) => {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, waitInMillis)
+    }
+  }
+
+  // search throttle set to 1000ms
+  const processSearch = (resultFootprintsInit) =>
+    debounce(searchAPI(resultFootprintsInit), 1000)
+
+  // function called when search is initiated
+  function searchAPI(resultFootprintsInit) {
+    // set up footprints layer
+    const resultFootPrintsLocal = resultFootprintsInit || resultFootprints
 
     // if the zoom level is too high, abort search
-    if (zoomLevel < MIN_ZOOM) return
+    if (zoomLevelRef.current < MIN_ZOOM) return
 
     // if the date time field is empty, abort search
     if (!dateTimeValue) return
 
     // if a valid collection is not selected, abort search
     if (!_collectionSelected) {
-      removeFootprints()
-      clickedFootprintsImageLayer.clearLayers()
-      clickedFootprintHighlights.clearLayers()
       setCollectionError(true)
       return
     } else {
       setCollectionError(false)
     }
 
     // remove clicked footprint highlight
-    if (clickedFootprintHighlights) {
-      clickedFootprintHighlights.clearLayers()
-    }
+    if (clickedFootprintHighlights) clickedFootprintHighlights.clearLayers()
 
     // remove image layer
-    if (clickedFootprintsImageLayer) {
-      clickedFootprintsImageLayer.clearLayers()
-    }
+    if (clickedFootprintsImageLayer) clickedFootprintsImageLayer.clearLayers()
 
     // remove existing footprints from map
-    removeFootprints()
+    removeFootprints(resultFootPrintsLocal)
 
     // show loading spinner
     dispatch(setSearchLoading(true))
@@ -275,6 +308,9 @@ const Search = () => {
       '%2F' +
       convertDateTimeForAPI(dateTimeValue[1])
 
+    // get viewport bounds
+    const viewportBounds = map.getBounds()
+
     const bbox = [
       viewportBounds._southWest.lng,
       viewportBounds._southWest.lat,
@@ -286,7 +322,7 @@ const Search = () => {
       `bbox=${bbox}`,
       // `query=%7B"eo%3Acloud_cover"%3A%7B"gte"%3A0,"lte"%3A${_cloudCover}%7D%7D`,
       `datetime=${combinedDateRange}`,
-      `collections=${_collectionSelected}`,
+      `collections=${localCollectionRef.current}`,
       'limit=100'
     ].join('&')
 
@@ -312,8 +348,8 @@ const Search = () => {
 
         // add new footprints to map
         const resultFootprintsFound = L.geoJSON(json, {})
-        resultFootprints.id = 'resultFootprints'
-        resultFootprintsFound.addTo(resultFootprints)
+        resultFootPrintsLocal.id = 'resultFootprints'
+        resultFootprintsFound.addTo(resultFootPrintsLocal)
       })
   }
 
@@ -336,7 +372,6 @@ const Search = () => {
         const corner1 = L.latLng(json.bbox[1], json.bbox[0])
         const corner2 = L.latLng(json.bbox[3], json.bbox[2])
         const tileBounds = L.latLngBounds(corner1, corner2)
-        map.fitBounds(tileBounds, { padding: [100, 100] })
 
         L.tileLayer(
           `${tilerURL}/stac/tiles/{z}/{x}/{y}.png?url=${featureURL}${tilerParams}`,
@@ -386,9 +421,6 @@ const Search = () => {
       >
         <CollectionDropdown error={collectionError}></CollectionDropdown>
       </div>
-      <button className="searchButton" onClick={() => searchAPI()}>
-        Search
-      </button>
     </div>
   )
 }