Merge pull request #30 from developmentseed/add/select-mosaic

Add imagery and timeframe selection
developmentseed · Jan 22, 2024 · 4edf6c9 · 4edf6c9
2 parents 741eefa + e864bef
commit 4edf6c9
Show file tree

Hide file tree

Showing 159 changed files with 10,595 additions and 2,355 deletions.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -22,10 +22,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node.js 14
+      - name: Use Node.js 18
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Cache node modules
         id: cache-node-modules
@@ -60,10 +60,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node.js 14
+      - name: Use Node.js 18
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Cache node modules
         id: cache-node-modules
@@ -85,7 +85,7 @@ jobs:
         run: yarn install
 
       - name: Test End-to-end
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v5
         env:
           NODE_ENV: cypress
         with:
@@ -101,10 +101,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node.js 14
+      - name: Use Node.js 18
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Cache node modules
         id: cache-node-modules

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -26,12 +26,12 @@ jobs:
 
       - name: Checkout
         uses: actions/checkout@v2
-        
-      - name: Use Node.js 14
+
+      - name: Use Node.js 18
         uses: actions/setup-node@v1
         with:
-          node-version: 14
-      
+          node-version: 18
+
       - name: Cache node modules
         id: cache-node-modules
         uses: actions/cache@v2
@@ -44,7 +44,7 @@ jobs:
             ${{ runner.os }}-build-${{ env.cache-name }}-
             ${{ runner.os }}-build-
             ${{ runner.os }}-
-            
+
       - name: Install
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: yarn install
@@ -59,7 +59,7 @@ jobs:
       - name: Build Prod
         if: github.ref == 'refs/heads/main'
         run: yarn build
-        
+
       - name: Azure Login
         if: github.ref == 'refs/heads/develop'
         uses: azure/login@v1
@@ -72,21 +72,19 @@ jobs:
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS_PRODUCTION }}
 
-
       - name: Upload to blob storage
         if: github.ref == 'refs/heads/develop'
         uses: azure/CLI@v1
         with:
           inlineScript: |
-              az storage blob upload-batch --account-name $STAGING_STORAGE_ACCOUNT_NAME --overwrite -d '$web' -s ./dist
+            az storage blob upload-batch --account-name $STAGING_STORAGE_ACCOUNT_NAME --overwrite -d '$web' -s ./dist
 
       - name: Upload to blob storage
         if: github.ref == 'refs/heads/main'
         uses: azure/CLI@v1
         with:
           inlineScript: |
-              az storage blob upload-batch --account-name $PRODUCTION_STORAGE_ACCOUNT_NAME --overwrite -d '$web' -s ./dist
-
+            az storage blob upload-batch --account-name $PRODUCTION_STORAGE_ACCOUNT_NAME --overwrite -d '$web' -s ./dist
 
       - name: Purge CDN endpoint
         if: github.ref == 'refs/heads/develop'
@@ -102,6 +100,5 @@ jobs:
           inlineScript: |
             az cdn endpoint purge --content-paths  "/*" --profile-name $PRODUCTION_CDN_PROFILE_NAME --name $PRODUCTION_CDN_ENDPOINT --resource-group $PRODUCTION_RESOURCE_GROUP
 
-
       - name: Azure Logout
         run: az logout
diff --git a/.github/workflows/trigger-workflow.yml b/.github/workflows/trigger-workflow.yml
@@ -4,6 +4,7 @@ on:
     branches:
       - 'develop'
       - 'main'
+      - 'add/select-mosaic'
 jobs:
   trigger-deploy:
     runs-on: ubuntu-latest

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14
+18
diff --git a/app/assets/scripts/components/common/app.js b/app/assets/scripts/components/common/app.js
@@ -1,20 +1,15 @@
 import React, { useEffect } from 'react';
 import T from 'prop-types';
 import { withRouter } from 'react-router';
-
 import MetaTags from './meta-tags';
 import SizeAwareElement from './size-aware-element';
-
 import { Page } from '../../styles/page';
-
 import config from '../../config';
 import checkApiHealth from '../../utils/api-health';
-import { withAITracking } from '@microsoft/applicationinsights-react-js';
-import { reactPlugin } from '../../utils/azure-app-insights';
 
 const { appTitle, appDescription, environment } = config;
 
-function App(props) {
+const App = (props) => {
   const { location, pageTitle, children, hideFooter } = props;
   const title = pageTitle ? `${pageTitle} — ` : '';
 
@@ -34,7 +29,7 @@ function App(props) {
       {children}
     </SizeAwareElement>
   );
-}
+};
 
 App.propTypes = {
   children: T.node,
@@ -43,12 +38,16 @@ App.propTypes = {
   pageTitle: T.string,
 };
 
-let thisApp;
-if (environment === 'production' || environment === 'staging') {
-  // staging and production uses Azure App Insights
-  thisApp = withRouter(withAITracking(reactPlugin, App));
-} else {
-  thisApp = withRouter(App);
-}
+const AppWrapper = (InnerApp) => {
+  // Avoid importing Application Insights in development
+  if (environment === 'production' || environment === 'staging') {
+    const withAITracking = require('@microsoft/applicationinsights-react-js')
+      .withAITracking;
+    const reactPlugin = require('../../utils/azure-app-insights').reactPlugin;
+    return withRouter(withAITracking(reactPlugin, InnerApp));
+  }
+
+  return withRouter(InnerApp);
+};
 
-export default thisApp;
+export default AppWrapper(App);
diff --git a/app/assets/scripts/components/common/auto-focus-form-input.js b/app/assets/scripts/components/common/auto-focus-form-input.js
@@ -3,7 +3,12 @@ import T from 'prop-types';
 
 import { FormInput } from '@devseed-ui/form';
 
-const AutoFocusFormInput = ({ value, setValue, placeholder, inputId }) => {
+export const AutoFocusFormInput = ({
+  value,
+  setValue,
+  placeholder,
+  inputId,
+}) => {
   const inputRef = useRef();
 
   useEffect(() => {

diff --git a/app/assets/scripts/components/common/card-list.js b/app/assets/scripts/components/common/card-list.js
@@ -27,6 +27,9 @@ const CardMedia = styled.figure`
       `}
     pointer-events: none;
   }
+  img {
+    max-width: 100%;
+  }
 `;
 const CardTitle = styled.h4`
   ${truncated}
@@ -50,7 +53,7 @@ export const CardWrapper = styled.article`
       `;
     } else if (cardMedia) {
       return css`
-        grid-template-columns: 2fr;
+        grid-template-columns: minmax(0, 1fr);
         grid-template-rows: auto 4fr;
         ${CardMedia} {
           grid-row: 1 / -1;

diff --git a/app/assets/scripts/components/common/details-list.js b/app/assets/scripts/components/common/details-list.js
@@ -10,7 +10,7 @@ const List = styled.ol`
   li {
     display: grid;
     grid-gap: 1rem;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     align-items: center;
     h1 {
       margin: 0;
@@ -19,6 +19,10 @@ const List = styled.ol`
   ${Heading} {
     letter-spacing: ${({ useAlt }) => useAlt && '0.5px'};
   }
+  dd {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 function DetailsList(props) {

diff --git a/app/assets/scripts/components/common/map/base-map-layer.js b/app/assets/scripts/components/common/map/base-map-layer.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import { TileLayer } from 'react-leaflet';
+import config from '../../../config';
 
 export const MAX_BASE_MAP_ZOOM_LEVEL = 19;
 
+const { mapboxAccessToken } = config;
+
 export const BaseMapLayer = () => (
   <TileLayer
-    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+    attribution='<a href="https://www.mapbox.com/about/maps/" target="_blank" title="Mapbox" aria-label="Mapbox" role="listitem">© Mapbox</a> <a href="https://www.openstreetmap.org/about/" target="_blank" title="OpenStreetMap" aria-label="OpenStreetMap" role="listitem">© OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/feedback/?owner=derilinx&amp;id=ckpwsqr6b3icr18qifl1h2e1d&amp;access_token=pk.eyJ1IjoiZGVyaWxpbngiLCJhIjoiY2szeTlzbWo2MDV6eDNlcDMxM3dzZXBieiJ9.zPf1iiFilYYwyx6ETNj_8w" target="_blank" title="Improve this map" aria-label="Improve this map" role="listitem">Improve this map</a>'
+    url={`https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`}
     maxZoom={MAX_BASE_MAP_ZOOM_LEVEL}
   />
 );
diff --git a/app/assets/scripts/components/common/map/tile-layer.js b/app/assets/scripts/components/common/map/tile-layer.js
@@ -77,7 +77,7 @@ function TileLayerWithHeaders({
       layer.remove();
     }
 
-    if (options.bounds) {
+    if (options?.bounds) {
       const [minX, minY, maxX, maxY] = tBbox(options.bounds);
       options.bounds = [
         [minY, minX],
@@ -89,7 +89,7 @@ function TileLayerWithHeaders({
     l.on('add', () => {
       setLayer(l);
       // Call event add handler on mount
-      if (eventHandlers.add) {
+      if (eventHandlers?.add) {
         eventHandlers.add();
       }
     });
@@ -102,14 +102,14 @@ function TileLayerWithHeaders({
   }, [url]);
 
   useEffect(() => {
-    if (layer) {
+    if (layer && eventHandlers) {
       Object.entries(eventHandlers).forEach(([event, func]) => {
         layer.on(event, func);
       });
     }
 
     return () => {
-      if (layer) {
+      if (layer && eventHandlers) {
         Object.entries(eventHandlers).forEach(([event, func]) => {
           layer.off(event, func);
         });

diff --git a/app/assets/scripts/components/common/page-header.js b/app/assets/scripts/components/common/page-header.js
@@ -144,7 +144,7 @@ const SecondarySection = styled.div`
   grid-template-columns: min-content min-content;
 `;
 
-function PageHeader(props) {
+function PageHeader({ children, hideLongAppTitle }) {
   return (
     <PageHead role='banner'>
       <PageHeadInner>
@@ -161,14 +161,12 @@ function PageHeader(props) {
                     <span>Microsoft</span>
                     {appTitle}
                   </strong>
-                  {location.pathname.split('/')[1] !== 'project' && (
-                    <sub>{appLongTitle}</sub>
-                  )}
+                  {!hideLongAppTitle && <sub>{appLongTitle}</sub>}
                 </PageTitlePrimeLink>
               </li>
             </GlobalMenu>
-            {props.children ? (
-              <PageSpecificControls>{props.children}</PageSpecificControls>
+            {children ? (
+              <PageSpecificControls>{children}</PageSpecificControls>
             ) : (
               // Default controls when no children is passed
               <PageSpecificControls>
@@ -208,6 +206,7 @@ function PageHeader(props) {
 
 PageHeader.propTypes = {
   children: T.node,
+  hideLongAppTitle: T.bool,
 };
 
 export default PageHeader;