Merge branch 'fix/preview-for-goes-app-viewer' of https://github.com/…

…US-GHG-Center/custom-interfaces into fix/preview-for-goes-app-viewer

.github/workflows/deploy-emit.yml

@@ -49,7 +49,26 @@ jobs:
         working-directory: ./emit-ch4plume-v1
         run: | 
           GEOAPIFY_APIKEY="${{ secrets.GEOAPIFY_APIKEY }}" node update_data.js
-      
+
+      - name: Validate required variables and secrets
+        run: |
+          missing_vars=()
+
+          # Check for required variables
+          [ -z "${{ vars.PUBLIC_URL_EMIT }}" ] && missing_vars+=("vars.PUBLIC_URL_EMIT")
+          [ -z "${{ vars.MAP_STYLE }}" ] && missing_vars+=("vars.MAP_STYLE")
+          [ -z "${{ secrets.MAP_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.MAP_ACCESS_TOKEN")
+          [ -z "${{ secrets.DEPLOYMENT_ROLE_ARN }}" ] && missing_vars+=("secrets.DEPLOYMENT_ROLE_ARN")
+          [ -z "${{ secrets.CF_DISTRIBUTION_ID }}" ] && missing_vars+=("secrets.CF_DISTRIBUTION_ID")
+
+          # If any variables are missing, print them and exit with an error
+          if [ ${#missing_vars[@]} -ne 0 ]; then
+            echo "Error: The following required variables are missing:"
+            printf '%s\n' "${missing_vars[@]}"
+            exit 1
+          fi
+        shell: bash
+
       - name: Build for production 🔧
         working-directory: ./emit-ch4plume-v1
         run: |

.github/workflows/deploy-goes.yml

@@ -48,6 +48,25 @@ jobs:
       - name: Install Yarn
         run: npm install -g yarn
 
+      - name: Validate required variables and secrets
+        run: |
+          missing_vars=()
+
+          # Check for required variables
+          [ -z "${{ secrets.REACT_APP_MAPBOX_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_ACCESS_TOKEN")
+          [ -z "${{ secrets.REACT_APP_MAPBOX_STYLE_URL }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_STYLE_URL")
+          [ -z "${{ vars.REACT_APP_BASE_PATH_GOES }}" ] && missing_vars+=("vars.REACT_APP_BASE_PATH_GOES")
+          [ -z "${{ secrets.DEPLOYMENT_ROLE_ARN }}" ] && missing_vars+=("secrets.DEPLOYMENT_ROLE_ARN")
+          [ -z "${{ secrets.CF_DISTRIBUTION_ID }}" ] && missing_vars+=("secrets.CF_DISTRIBUTION_ID")
+
+          # If any variables are missing, print them and exit with an error
+          if [ ${#missing_vars[@]} -ne 0 ]; then
+            echo "Error: The following required variables are missing:"
+            printf '%s\n' "${missing_vars[@]}"
+            exit 1
+          fi
+        shell: bash
+
       - name: Building 🔧
         working-directory: ./goes-plume-viewer
         run: |

.github/workflows/deploy-nist.yml

@@ -48,6 +48,25 @@ jobs:
       - name: Install Yarn
         run: npm install -g yarn
 
+      - name: Validate required variables and secrets
+        run: |
+          missing_vars=()
+
+          # Check for required variables
+          [ -z "${{ secrets.REACT_APP_MAPBOX_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_ACCESS_TOKEN")
+          [ -z "${{ secrets.REACT_APP_MAPBOX_STYLE_URL }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_STYLE_URL")
+          [ -z "${{ vars.REACT_APP_BASE_PATH_NIST }}" ] && missing_vars+=("vars.REACT_APP_BASE_PATH_NIST")
+          [ -z "${{ secrets.DEPLOYMENT_ROLE_ARN }}" ] && missing_vars+=("secrets.DEPLOYMENT_ROLE_ARN")
+          [ -z "${{ secrets.CF_DISTRIBUTION_ID }}" ] && missing_vars+=("secrets.CF_DISTRIBUTION_ID")
+
+          # If any variables are missing, print them and exit with an error
+          if [ ${#missing_vars[@]} -ne 0 ]; then
+            echo "Error: The following required variables are missing:"
+            printf '%s\n' "${missing_vars[@]}"
+            exit 1
+          fi
+        shell: bash
+
       - name: Building 🔧
         working-directory: ./nist-interface
         run: |

.github/workflows/deploy-noaa.yml

@@ -48,6 +48,25 @@ jobs:
       - name: Install Yarn
         run: npm install -g yarn
 
+
+      - name: Validate required variables and secrets
+        run: |
+          missing_vars=()
+
+          # Check for required variables
+          [ -z "${{ vars.PUBLIC_URL_NOAA }}" ] && missing_vars+=("vars.PUBLIC_URL_NOAA")
+          [ -z "${{ secrets.MAP_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.MAP_ACCESS_TOKEN")
+          [ -z "${{ secrets.DEPLOYMENT_ROLE_ARN }}" ] && missing_vars+=("secrets.DEPLOYMENT_ROLE_ARN")
+          [ -z "${{ secrets.CF_DISTRIBUTION_ID }}" ] && missing_vars+=("secrets.CF_DISTRIBUTION_ID")
+
+          # If any variables are missing, print them and exit with an error
+          if [ ${#missing_vars[@]} -ne 0 ]; then
+            echo "Error: The following required variables are missing:"
+            printf '%s\n' "${missing_vars[@]}"
+            exit 1
+          fi
+        shell: bash
+
       - name: Build for production 🔧
         working-directory: ./noaa-cpfp-point
         run: |

.github/workflows/deploy-urban.yml

@@ -48,6 +48,27 @@ jobs:
       - name: Install Yarn
         run: npm install -g yarn
 
+
+      - name: Validate required variables and secrets
+        run: |
+          missing_vars=()
+
+          # Check for required variables
+          [ -z "${{ secrets.REACT_APP_MAPBOX_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_ACCESS_TOKEN")
+          [ -z "${{ secrets.REACT_APP_MAPBOX_STYLE_URL }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_STYLE_URL")
+          [ -z "${{ vars.REACT_APP_BASE_PATH_URBAN }}" ] && missing_vars+=("vars.REACT_APP_BASE_PATH_URBAN")
+          [ -z "${{ secrets.DEPLOYMENT_ROLE_ARN }}" ] && missing_vars+=("secrets.DEPLOYMENT_ROLE_ARN")
+          [ -z "${{ secrets.CF_DISTRIBUTION_ID }}" ] && missing_vars+=("secrets.CF_DISTRIBUTION_ID")
+
+          # If any variables are missing, print them and exit with an error
+          if [ ${#missing_vars[@]} -ne 0 ]; then
+            echo "Error: The following required variables are missing:"
+            printf '%s\n' "${missing_vars[@]}"
+            exit 1
+          fi
+        shell: bash
+
+
       - name: Building 🔧
         working-directory: ./urban-dashboard
         run: |

.github/workflows/pr-preview.yml

@@ -74,6 +74,62 @@ jobs:
           role-session-name: ${{ github.repository_owner}}
           aws-region: us-west-2
 
+      - name: Validate required variables and secrets
+        run: |
+          IFS=',' read -r -a WEBSITES <<< "${{ env.CHANGED_WEBSITES }}"
+          for WEBSITE in "${WEBSITES[@]}"; do
+            if [ "$WEBSITE" == "emit-ch4plume-v1" ]; then
+              missing_vars=()
+              # Check for required variables
+              [ -z "${{ vars.MAP_STYLE }}" ] && missing_vars+=("vars.MAP_STYLE")
+              [ -z "${{ secrets.MAP_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.MAP_ACCESS_TOKEN")
+              [ -z "${{ vars.PUBLIC_URL_EMIT }}" ] && missing_vars+=("vars.PUBLIC_URL_EMIT")
+              [ -z "${{ secrets.GEOAPIFY_APIKEY }}" ] && missing_vars+=("secrets.GEOAPIFY_APIKEY")
+              # If any variables are missing, print them and exit with an error
+              if [ ${#missing_vars[@]} -ne 0 ]; then
+                echo "Error: The following required variables are missing:"
+                printf '%s\n' "${missing_vars[@]}"
+                exit 1
+              fi
+            elif [ "$WEBSITE" == "noaa-cpfp-point" ]; then
+              missing_vars=()
+              # Check for required variables
+              [ -z "${{ vars.PUBLIC_URL_NOAA }}" ] && missing_vars+=("vars.PUBLIC_URL_NOAA")
+              [ -z "${{ secrets.MAP_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.MAP_ACCESS_TOKEN")
+              # If any variables are missing, print them and exit with an error
+              if [ ${#missing_vars[@]} -ne 0 ]; then
+                echo "Error: The following required variables are missing:"
+                printf '%s\n' "${missing_vars[@]}"
+                exit 1
+              fi
+            elif [ "$WEBSITE" == "nist-interface" ]; then
+              missing_vars=()
+              # Check for required variables
+              [ -z "${{ secrets.REACT_APP_MAPBOX_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_ACCESS_TOKEN")
+              [ -z "${{ secrets.REACT_APP_MAPBOX_STYLE_URL }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_STYLE_URL")
+              [ -z "${{ vars.FEATURES_API_URL }}" ] && missing_vars+=("vars.FEATURES_API_URL")
+              # If any variables are missing, print them and exit with an error
+              if [ ${#missing_vars[@]} -ne 0 ]; then
+                echo "Error: The following required variables are missing:"
+                printf '%s\n' "${missing_vars[@]}"
+                exit 1
+              fi
+            elif [ "$WEBSITE" == "goes-plume-viewer" ]; then
+              missing_vars=()
+              # Check for required variables
+              [ -z "${{ secrets.REACT_APP_MAPBOX_ACCESS_TOKEN }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_TOKEN")
+              [ -z "${{ secrets.REACT_APP_MAPBOX_STYLE_URL }}" ] && missing_vars+=("secrets.REACT_APP_MAPBOX_STYLE_URL")
+              [ -z "${{ vars.REACT_APP_BASE_PATH_GOES }}" ] && missing_vars+=("vars.REACT_APP_BASE_PATH_GOES")
+              # If any variables are missing, print them and exit with an error
+              if [ ${#missing_vars[@]} -ne 0 ]; then
+                echo "Error: The following required variables are missing:"
+                printf '%s\n' "${missing_vars[@]}"
+                exit 1
+              fi
+            fi
+          done
+        shell: bash
+
       - name: Build and deploy
         run: |
           IFS=',' read -r -a WEBSITES <<< "${{ env.CHANGED_WEBSITES }}"

.github/workflows/update_data.yml

@@ -18,6 +18,22 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      # checks if the required env variables and secrets are present
+      - name: Validate required variables and secrets
+        run: |
+          missing_vars=()
+
+          # Check for required variables
+          [ -z "${{ secrets.GITHUB_TOKEN }}" ] && missing_vars+=("secrets.GITHUB_TOKEN")
+
+          # If any variables are missing, print them and exit with an error
+          if [ ${#missing_vars[@]} -ne 0 ]; then
+            echo "Error: The following required variables are missing:"
+            printf '%s\n' "${missing_vars[@]}"
+            exit 1
+          fi
+        shell: bash
+
       # Downloads and extracts the files to the respective directory
       - name: Run the data download script
         run: |

emit-ch4plume-v1/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset='utf-8' />
     <title>Interactive Emission Plumes</title>
+    <link rel="icon" href="icon.svg" />
     <meta name='viewport' content='width=device-width, initial-scale=1' />
     <link
 
@@ -21,12 +22,12 @@
     <link rel="stylesheet" href="src/style.css" />
     </head>
   <body>
-
+    <div>
+      <div id='map'></div>
+      <div id="loading-spinner" class="loading-spinner">
+        <div class="spinner">
+      </div>
     </div>
-    <div id='map'></div>
-    <div id="loading-spinner" class="loading-spinner">
-      <div class="spinner"></div>
-  </div>
 
     <div class="toolbar", id="toolbar">
       <h1 class="toolbar-heading"> EMIT Methane Plume Viewer </h1>

emit-ch4plume-v1/src/style.css

@@ -165,6 +165,7 @@ margin: 0px;
   font-weight: 400;
   opacity: 1;
   color: grey; 
+  padding-left: 0px;
 }
 
 .toolbar-line {

emit-ch4plume-v1/webpack.config.js

@@ -46,6 +46,7 @@ module.exports = (env) => {
       }),
       new CopyPlugin({
         patterns: [{ from: "data", to: "data" }],
+        patterns: [{ from: "./icon.svg", to: "./" }],
       }),
     ],
   };

goes-plume-viewer/public/index.html

@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/earth.png" />
+    <link rel="icon" href="%PUBLIC_URL%/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Subdaily Plumes Observed from GOES Satellite."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/earth.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

goes-plume-viewer/public/manifest.json

@@ -3,17 +3,17 @@
   "name": "Subdaily Plume Viewer Observed from GOES",
   "icons": [
     {
-      "src": "earth.png",
+      "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "earth.png",
+      "src": "favicon-192.ico",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "earth.png",
+      "src": "favicon-512.ico",
       "type": "image/png",
       "sizes": "512x512"
     }

goes-plume-viewer/src/components/card/index.jsx

@@ -99,7 +99,7 @@ export function PlumeCard({ plumeSourceId, plumeSourceName, startDatetime, endDa
             <CardMedia
                 component="img"
                 height="100"
-                sx={{ padding: "1em", objectFit: "contain", minWidth: "50px" }}
+                sx={{ padding: "1em", objectFit: "contain", minWidth: "50px", imageRendering: "pixelated" }}
                 image={imageUrl}
                 alt="Plume image"
             />
@@ -128,7 +128,7 @@ export function PlumeCard({ plumeSourceId, plumeSourceName, startDatetime, endDa
             <HorizontalLayout>
                 <CaptionValue
                     className="card-plume"
-                    caption = "Approximate Release Duration"
+                    caption = "Approximate Release Duration from Start Time"
                     value = { formatDuration(moment.duration(duration)) }
                 />
             </HorizontalLayout>

goes-plume-viewer/src/components/colorBar/index.jsx

@@ -23,7 +23,7 @@ export const ColorBar = () => {
         <Card id="colorbar">
             <div ref={colorBarScale} className="colorbar-scale"></div>
             <Typography variant="subtitle2" gutterBottom sx={{ marginBottom: 0 }} className="colorbar-label">
-                Maximum Methane Column Enhancement (mol/m²)
+                Methane Column Enhancement (mol/m²)
             </Typography>
         </Card>
     )

goes-plume-viewer/src/components/drawer/index.jsx

@@ -151,7 +151,7 @@ export function PersistentDrawerRight({open, setOpen, selectedPlumes, plumeMetaD
                 key={selectedPlumeMeta.id}
                 plumeSourceId={selectedPlumeMeta.id}
                 plumeSourceName={selectedPlumeMeta.id}
-                imageUrl={`${process.env.REACT_APP_RASTER_API_URL}/collections/${collectionId}/items/${plumesMap[selectedPlumeMeta.id].representationalPlume.id}/preview.png?assets=rad&rescale=${VMIN}%2C${VMAX}&colormap_name=${colorMap}&width=250&height=250`}
+                imageUrl={`${process.env.REACT_APP_RASTER_API_URL}/collections/${collectionId}/items/${plumesMap[selectedPlumeMeta.id].representationalPlume.id}/preview.png?assets=rad&rescale=${VMIN}%2C${VMAX}&colormap_name=${colorMap}`}
                 tiffUrl={`${process.env.REACT_APP_CLOUD_BROWSE_URL}/browseui/#${collectionId}/#q=${selectedPlumeMeta.id.split("_").slice(-1)}`}
                 lon={selectedPlumeMeta.lon}
                 lat={selectedPlumeMeta.lat}