Merge pull request #87 from Element84/rm/frontend-demo-polish

Add fontend demo polish

Author: rachelekm

demo/api/backends/earthsearch_backend.py

@@ -18,9 +18,10 @@
 MAX_MAX_ITEMS = 100
 
 LANDSAT_COLLECTION_ID = "landsat-c2-l2"
-SENTINEL_COLLECTION_ID = "sentinel-2-l1c"
+SENTINEL_L1C_COLLECTION_ID = "sentinel-2-l1c"
+SENTINEL_L2A_COLLECTION_ID = "sentinel-2-l2a"
 
-PRODUCT_IDS = [LANDSAT_COLLECTION_ID, SENTINEL_COLLECTION_ID]
+PRODUCT_IDS = [LANDSAT_COLLECTION_ID, SENTINEL_L1C_COLLECTION_ID, SENTINEL_L2A_COLLECTION_ID]
 
 # The api works by pretending the past is the future. It takes a users search request and searches for data in the
 # past. This is the amount of time in the past we search from a request.

demo/app/public/BlackSkyLogo.png

@@ -1,13 +1,13 @@
 import Container from '@components/Container';
-
+import { E84Logo } from './../../utils/constants';
 import styles from './Footer.module.scss';
 
 const Footer = ({ ...rest }) => {
   return (
     <footer className={styles.footer} {...rest}>
       <Container className={`${styles.footerContainer} ${styles.footerLegal}`}>
         <p>
-        powered by <a href="https://element84.com" target="_blank">Element 84</a> &copy; {new Date().getFullYear()}
+        powered by <a href="https://element84.com" target="_blank">{E84Logo}</a> &copy; {new Date().getFullYear()}
         </p>
       </Container>
     </footer>

demo/app/public/EarthSearchLogo.jpg

@@ -1,22 +1,26 @@
 import Link from 'next/link';
 import { FaGithub } from 'react-icons/fa';
 import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/DateRangePicker';
-
 import { useAppContext } from 'src/context/appContext';
 import Container from '@components/Container';
 
+import {
+  UTurnArrowLeft
+} from '@vectopus/atlas-icons-react';
+
+import { STATLogo } from './../../utils/constants';
 import styles from './Header.module.scss';
 
 const Header = () => {
-  const { userParams, setUserParams } = useAppContext();
+  const { userParams, setUserParams, opportunities, resetSearch } = useAppContext();
 
   return (
     <>
       <header className={styles.header}>
         <Container className={styles.headerContainer}>
           <p className={styles.headerTitle}>
+            {STATLogo}
             <Link href="/">
-              {/* <Image src="/logo.png" alt="logo" width={35} height={35} /> */}
               Task a Satellite
             </Link>
           </p>
@@ -31,6 +35,7 @@ const Header = () => {
       </header>
       <div className={styles.toolbar}>
         <DateRangePicker onChange={(v) => setUserParams({...userParams, dateRange: v})} value={userParams.dateRange} clearIcon={null} minDate={new Date()} />
+        {opportunities && <button className={styles.resetSearch} onClick={resetSearch}>Reset Search <UTurnArrowLeft size={12} className={styles.resetSearchIcon}/> </button>}
       </div>
     </>
   );

demo/app/public/PlanetLogo.png

@@ -15,17 +15,19 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-
 }
 
 .headerTitle {
   font-size: 1.6em;
   font-weight: bold;
   margin: 0;
-}
+  display: inline;
 
-.headerLogo {
-  height: 1.6em;
+  svg {
+    margin-left: 20px;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
 }
 
 .headerLinks {
@@ -61,4 +63,21 @@
   height: 35px;
   background-color: $color-light-gray;
   z-index: 9999;
+  padding-left: 20px;
+  padding-top: 4px;
+
+  .resetSearch,
+  .resetSearchIcon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .resetSearch {
+    margin-left: 20px;
+    background: none;
+    color: grey;
+    padding: 0;
+    text-decoration: none;
+    border: none;
+  }
 }

demo/app/public/UmbraLogo.png

@@ -2,12 +2,15 @@ import { useEffect } from 'react';
 import Leaflet from 'leaflet';
 import * as ReactLeaflet from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
+import Footprint from './Footprint';
+import { useAppContext } from 'src/context/appContext';
 
 import styles from './Map.module.scss';
 
 const { MapContainer } = ReactLeaflet;
 
 const Map = ({ children, className, width, height, ...rest }) => {
+  const { selectedOpportunity } = useAppContext();
   let mapClassName = styles.map;
 
   if ( className ) {
@@ -26,7 +29,8 @@ const Map = ({ children, className, width, height, ...rest }) => {
   }, []);
 
   return (
-    <MapContainer className={mapClassName} {...rest}>
+    <MapContainer className={`${mapClassName} ${selectedOpportunity && styles.mapContainerDetailView}`} {...rest}>
+      <Footprint />
       {children(ReactLeaflet, Leaflet)}
     </MapContainer>
   )

demo/app/src/components/Footer/Footer.js

@@ -0,0 +1,63 @@
+import { useMap } from 'react-leaflet';
+import { useEffect, useState } from 'react';
+import { useAppContext } from 'src/context/appContext';
+
+import styles from './Map.module.scss';
+
+
+function getCoords(geojson){
+    return [geojson.geometry.coordinates[1], geojson.geometry.coordinates[0]]
+}
+
+export default function Footprint() {
+    const map = useMap();
+    const [activeMarkerHover, setActiveMarkerHover] = useState(null);
+    const [previousMarkerHover, setPreviousMarkerHover] = useState(null);
+    const [activeMarkerClick, setActiveMarkerClick] = useState(null);
+    const [previousMarkerClick, setPreviousMarkerClick] = useState(null);
+    const { selectedOpportunity, hoveredOpportunity } = useAppContext();
+    const footprintIcon = new L.divIcon({className: styles.footprintCircle});
+
+    useEffect(() => {
+        if (!activeMarkerClick && previousMarkerClick){
+            map.removeLayer(previousMarkerClick);
+            setPreviousMarkerClick(null);
+        }
+        if (!activeMarkerHover && previousMarkerHover){
+            map.removeLayer(previousMarkerHover);
+            setPreviousMarkerHover(null);
+        }
+        if (activeMarkerClick && previousMarkerClick && (activeMarkerClick !== previousMarkerClick)){
+            map.removeLayer(previousMarkerClick);
+            setPreviousMarkerClick(activeMarkerClick);
+        }
+        previousMarkerHover && map.removeLayer(previousMarkerHover);
+        activeMarkerHover && map.addLayer(activeMarkerHover);
+        activeMarkerClick && map.addLayer(activeMarkerClick) && map.flyTo(getCoords(selectedOpportunity), 9);
+    },[activeMarkerHover, previousMarkerHover, activeMarkerClick, previousMarkerClick]);
+
+    useEffect(() => {
+        activeMarkerHover && setPreviousMarkerHover(activeMarkerHover);
+        activeMarkerClick && setPreviousMarkerClick(activeMarkerClick);
+        if (hoveredOpportunity){
+            setActiveMarkerHover(new L.Marker(getCoords(hoveredOpportunity), {
+                icon: footprintIcon
+            }));
+        }
+        else {
+            setActiveMarkerHover(null);
+        }
+
+        if(selectedOpportunity) {
+            setActiveMarkerClick(new L.Marker(getCoords(selectedOpportunity), {
+                icon: footprintIcon
+            }));
+            setActiveMarkerHover(null);
+        }
+        else {
+            setActiveMarkerClick(null);
+        }
+    }, [hoveredOpportunity, selectedOpportunity]);
+
+    return null;
+}