Merge pull request #2 from lucyhutcheson/main

Updates for version 0.2.0 and fix for #1

.env.development

@@ -1 +1,5 @@
-REACT_APP_TITILER=https://titiler.xyz
+REACT_APP_TITILER=https://titiler.example.com
+REACT_APP_STAC_API_ENDPOINT=https://api-endpoint.example.com
+REACT_APP_COLLECTIONS=collectionname
+REACT_APP_DASHBOARD_LINK=https://dashboard.example.com
+REACT_APP_ANALYZE_LINK=https://analyze.example.com

.env.production

@@ -1 +1,5 @@
-REACT_APP_TITILER=https://titiler.xyz
+REACT_APP_TITILER=https://titiler.example.com
+REACT_APP_STAC_API_ENDPOINT=https://api-endpoint.example.com
+REACT_APP_COLLECTIONS=collectionname
+REACT_APP_DASHBOARD_LINK=https://dashboard.example.com
+REACT_APP_ANALYZE_LINK=https://analyze.example.com

README.md

@@ -4,10 +4,24 @@
 
 FilmDrop UI is a browser-based interface for displaying results from a STAC API.
 
-It is currently hard-coded to interact with the [Earth Search v1](https://earth-search.aws.element84.com/v1) STAC API that contains metadata for several Earth on AWS Datasets.
-
 ## Deployment
 
+### Environment Files
+
+For local development, you should include an `.env.development` file with the proper configuration.
+
+For production builds, you should include an `.env.production` file with the proper configuration.
+
+```
+CIRRUS_API_ENDPOINT="[Endpoint]"
+METRICS_API_ENDPOINT="[Endpoint]"
+REACT_APP_TITILER="[Endpoint]"
+REACT_APP_STAC_API_ENDPOINT="[Endpoint]"
+REACT_APP_COLLECTIONS="[Collection]"
+REACT_APP_DASHBOARD_LINK="[URL]"
+REACT_APP_ANALYZE_LINK="[URL]"
+```
+
 ### Links
 
 Static files are built with `npm run build` OR `npm run build:prod` then moved to overwrite files in existing S3 buckets.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "filmdrop-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license" : "Apache-2.0",
   "dependencies": {
     "@emotion/react": "^11.10.5",

src/components/Layout/Content/BottomContent/BottomContent.js

@@ -23,8 +23,10 @@ const BottomContent = () => {
   // if you are setting redux state, call dispatch
   const dispatch = useDispatch();
 
+  const ANALYZE_LINK = process.env.REACT_APP_ANALYZE_LINK;
+
   function onAnalyzeClick() {
-    // window.open("", "_blank");
+    window.open(ANALYZE_LINK, "_blank");
   }
 
   function onPublishClick() {
@@ -35,9 +37,11 @@ const BottomContent = () => {
     <div className="BottomContent">
       <LeafMap></LeafMap>
       <div className="actionButtons">
-        <button className="actionButton" onClick={() => onAnalyzeClick()}>
-          Analyze
-        </button>
+        {ANALYZE_LINK && (
+          <button className="actionButton" onClick={() => onAnalyzeClick()}>
+            Analyze
+          </button>
+        ) }
         <button className="actionButton" onClick={() => onPublishClick()}>
           Publish
         </button>

src/components/Layout/PageHeader/PageHeader.js

@@ -6,20 +6,26 @@ import logoFilmDrop from "../../../assets/logo-filmdrop-white.svg";
 import { OpenInNew } from "@mui/icons-material";
 
 const PageHeader = () => {
+
+  const DASHBOARD_LINK = process.env.REACT_APP_DASHBOARD_LINK;
+
   function onDashboardClick() {
-    // window.open("", "_blank");
+    window.open(DASHBOARD_LINK, "_blank");
   }
+
   return (
     <div className="PageHeader">
       <div className="pageHeaderLeft">
         <img src={logoFilmDrop} alt="logo" className="headerLogoImage"></img>
       </div>
-      <div className="pageHeaderRight" onClick={() => onDashboardClick()}>
-        <span className="pageHeaderLink pageHeaderLinkHoverable">
-          Dashboard
-          <OpenInNew className="OpenDashboardIcon" />
-        </span>
-      </div>
+      {DASHBOARD_LINK && (
+        <div className="pageHeaderRight" onClick={() => onDashboardClick()}>
+          <span className="pageHeaderLink pageHeaderLinkHoverable">
+            Dashboard
+            <OpenInNew className="OpenDashboardIcon" />
+          </span>
+        </div>
+      ) }
     </div>
   );
 };

src/components/LeafMap/LeafMap.css

@@ -19,4 +19,7 @@
 .mainMap{
     height: 100%;
     width: 100%;
+}
+.map-tiles {
+    filter: brightness(1.125) invert(1) contrast(0.9) hue-rotate(0deg) saturate(0);
 }

src/components/LeafMap/LeafMap.js

@@ -50,8 +50,9 @@ const LeafMap = () => {
       >
         {/* set basemap layers here: */}
         <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-          url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+          className='map-tiles'
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
       </MapContainer>
     </div>

src/components/Search/Search.js

@@ -273,10 +273,13 @@ const Search = () => {
     // get cloud cover silder value
     const cloudCover = _cloudCover;
 
+    const API_ENDPOINT = process.env.REACT_APP_STAC_API_ENDPOINT;
+    const COLLECTIONS = process.env.REACT_APP_COLLECTIONS;
+
     // build GET URL (limit hardcoded to 362)
     const baseURLGET =
-      "https://earth-search.aws.element84.com/v1/search" +
-      "?bbox=" +
+      API_ENDPOINT +
+      "/search?bbox=" +
       aoiBounds._southWest.lng +
       "," +
       aoiBounds._southWest.lat +
@@ -288,7 +291,8 @@ const Search = () => {
       cloudCover +
       "%7D%7D&datetime=" +
       combinedDateRange +
-      "&collections=sentinel-2-l2a";
+      "&collections=" +
+      COLLECTIONS;
 
     // TODO rework this to make DRY with baseURLGET string above...
     // build string to set for publish copy to clipboard
@@ -358,7 +362,7 @@ const Search = () => {
             singleAssetName +
             "&return_mask=true",
           {
-            attribution: "©OpenStreetMap, ©CartoDB",
+            attribution: "©OpenStreetMap",
             tileSize: 256,
             bounds: tileBounds,
             pane: "imagery",