Methane Release (#685)

# Changelog ## 🎉 Features - New pages: Topics > Methane landing page - Interactive map interfaces added for new dataset "Geostationary Satellite Observations of Extreme and Transient Methane Emissions from Oil and Gas Infrastructure" `goes-ch4plume-v1` - Updated EMIT plume viewer with several new features - Add new "Documentation" card in data-toolkit page ## 🚀 Improvements - Add "External Link" tag to all relevant cards and ability to hide it - Refactor to consolidate components and remove duplicates - Update data browser links to the nicer data.ghg.center/... urls ## 📊 Dataset Updates - New datasets: - Geostationary Satellite Observations of Extreme and Transient Methane Emissions from Oil and Gas Infrastructure `goes-ch4plume-v1` - Updated datasets: - GOSAT-based Top-down Total and Natural Methane Emissions `gosat-based-ch4budget-yeargrid-v1`: updated layers - TM5-4DVar Isotopic CH₄ Inverse Fluxes `tm54dvar-ch4flux-monthgrid-v1` renamed to CarbonTracker-CH₄ Isotopic Methane Inverse Fluxes `ct-ch4-monthgrid-v2023` ## 📝 Stories Updates - 5 new stories - NIST Developing Consensus Standards for Growing Volume of Methane Plume Satellite Data - Models and Observations Combine to Uncover Drivers of Natural Methane Emissions - Advanced Technology to Detect Methane “Super Emitters” from Oil and Natural Gas Operations - NASA Expands Capabilities in Methane Detection from Air and Space - NOAA’s GOES Satellites Can Provide Quicker Detection of Methane Gas Leaks (external story) ## 📃 Other content updates - Add methane landing page to carousel - New "methane" tag ## `veda-ui` update - NASA-IMPACT/veda-ui@v5.9.1...v5.11.2
US-GHG-Center · Dec 5, 2024 · 9fa9a05 · 9fa9a05
2 parents 83e1cd6 + dfe611f
commit 9fa9a05
Show file tree

Hide file tree

Showing 82 changed files with 1,427 additions and 526 deletions.
diff --git a/.env b/.env
@@ -36,4 +36,4 @@ CUSTOM_SCRIPT_SRC=https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.j
 CUSTOM_SCRIPT_ID=_fed_an_ua_tag
 
 FEATURE_NEW_EXPLORATION = 'TRUE'
-SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'
+SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'
diff --git a/.veda/ui b/.veda/ui
diff --git a/common/constants.js b/common/constants.js
@@ -88,7 +88,7 @@ export const dataEngagements = [
     "desc": "Detailed dataset information for insight into greenhouse gas sources, sinks, emissions, and large events.",
     "img": {
       "src": new URL('./media/data_catalog.png', import.meta.url).href,
-      "alt": "image of oil refinery"
+      "alt": "icon showing file drawers with an earth representing data card catalog."
     },
     "link": {
       "url": "/data-catalog",
@@ -101,7 +101,7 @@ export const dataEngagements = [
     "desc": "The exploration and analysis environment can be used to visually examine data on a customizable map and create a time series of basic statistics.",
     "img": {
       "src": new URL('./media/interactive_map.png', import.meta.url).href,
-      "alt": "image of green wetlands"
+      "alt": "icon drawing showing map with a magnifying glass and indicating a clock for temporal data."
     },
     "link": {
       "url": "/exploration",
@@ -114,35 +114,63 @@ export const dataEngagements = [
     "desc": "With JupyterHub, users can analyze cloud archives of Earth science data using an interactive environment. Log in or request access here.",
     "img": {
       "src": new URL('./media/jupyter_hub.png', import.meta.url).href,
-      "alt": "image of colorful polygon against satellite landscape surface in brown"
+      "alt": "icon drawing code, plots and figures made with data in the cloud."
     },
     "link": {
       "url": "https://hub.ghg.center",
       "text": "View more"
     },
     "footer": null
+  },
+  {
+    "title": "Documentation",
+    "desc": "Access technical documentation for US GHG Center data services, including a collection of code notebooks and instructions for accessing data via API.",
+    "img": {
+      "src": new URL('./media/documentation.png', import.meta.url).href,
+      "alt": "icon of an open laptop surrounded by icons of documents, and a chart."
+    },
+    "link": {
+      "url": "https://us-ghg-center.github.io/ghgc-docs/",
+      "text": "View more"
+    },
+    "footer": null
   }
 ];
 
 export const customInterfaces = [
+  {
+    "title": "GOES Large Plume Visualization",
+    "desc": "NOAA’s GOES is the Western Hemisphere’s most advanced weather-monitoring satellite system, capable of detecting very large methane plumes. A new tool using GOES-16 data allows users to visualize large methane emission events, select the region and plume of interest, and animate to see how the plume changes over five-minute intervals.",
+    "hideExternalLinkFlag": true,
+    "img": {
+      "src": new URL('./media/GOES_Methane_Plume_viewer_card.png', import.meta.url).href,
+      "alt": "map showing colorful methane gas plume from GOES over a green surface satellite image on June 15, 2020 in Indiana"
+    },
+    "link": {
+      "url": "https://earth.gov/ghgcenter/custom-interfaces/goes-plume-viewer/",
+      "text": "See more"
+    },
+    "footer": null
+  },
   {
     "title": "EMIT Methane Plume Viewer",
-    "desc": "Detailed information for methane plumes identified using EMIT.",
+    "desc": "NASA’s EMIT instrument measures mineral dust, carbon dioxide and methane from the International Space Station. This updated interactive plume viewer offers a global map of large, point source methane plumes. New functionalities include EMIT overpasses over time, geographic plume quantifications, and a point-and-click plume measurement tool.",
+    "hideExternalLinkFlag": true,
     "img": {
-      "src": new URL('./media/emit.jpg', import.meta.url).href,
+      "src": new URL('./media/EMIT_Plume_Viewer_card.png', import.meta.url).href,
       "alt": "view of colored shape overlaid on satellite landscape image with boxes of information containing plume details"
     },
     "link": {
-      "url": "/data-catalog/emit-ch4plume-v1",
+      "url": "https://earth.gov/ghgcenter/custom-interfaces/emit-ch4plume-v1",
       "text": "See more"
     },
     "footer": null
   },
   {
     "title": "NOAA Concentration Viewer",
-    "desc": "Measurements of carbon dioxide and methane concentrations from ground stations throughout the US and worldwide.",
+    "desc": "Get a bird’s-eye view of NOAA’s atmospheric measurements from ground stations around the globe, and explore how methane and carbon dioxide concentrations have changed over time. These data include tower, ground site and flask measurements as part of NOAA’s Global Greenhouse Gas Reference Network.",
     "img": {
-      "src": new URL('./media/co2.jpg', import.meta.url).href,
+      "src": new URL('./media/NOAA_Methane_Concentration_Viewer_card.png', import.meta.url).href,
       "alt": "map showing Mauna Loa location of station with a time series of data below the map"
     },
     "link": {
@@ -153,20 +181,20 @@ export const customInterfaces = [
       "links": [
         {
           "title": "Carbon Dioxide",
-          "url": "/data-catalog/noaa-gggrn-co2-concentrations"
+          "url": "https://earth.gov/ghgcenter/custom-interfaces/noaa-gggrn-ghg-concentrations/index.html?ghg=co2&frequency=all"
         },
         {
           "title": "Methane",
-          "url": "/data-catalog/noaa-gggrn-ch4-concentrations"
+          "url": "https://earth.gov/ghgcenter/custom-interfaces/noaa-gggrn-ghg-concentrations/index.html?ghg=ch4&frequency=all"
         }
       ]
     }
   },
   {
     "title": "NIST Tower Data Viewer",
-    "desc": "Measurements of carbon dioxide and methane concentrations from urban tower instruments.",
+    "desc": "An interactive methane and carbon dioxide data tool for NIST’s Urban GHG Measurements Testbed System, using measurements from ground-based observing networks in three urban testbeds across the U.S.",
     "img": {
-      "src": new URL('./media/nist-co2-nwb.jpg', import.meta.url).href,
+      "src": new URL('./media/NIST_NEC_Methane_Viewer_card1.png', import.meta.url).href,
       "alt": "map showing Northwest Baltimore, MD location of station with a time series of data below the map"
     },
     "link": {
@@ -177,15 +205,15 @@ export const customInterfaces = [
       "links": [
         {
           "title": "Indianapolis Flux Experiment (INFLUX)",
-          "url": "/data-catalog/influx-testbed-ghg-concentrations"
+          "url": "https://earth.gov/ghgcenter/custom-interfaces/nist-interface/?agency=nist&region=in&zoom-level=8"
         },
         {
           "title": "Los Angeles Megacity Carbon Project",
-          "url": "/data-catalog/lam-testbed-ghg-concentrations"
+          "url": "https://earth.gov/ghgcenter/custom-interfaces/nist-interface/?agency=nist&region=lam&zoom-level=7"
         },
         {
           "title": "Northeast Corridor (NEC) Urban Test Bed",
-          "url": "/data-catalog/nec-testbed-ghg-concentrations"
+          "url": "https://earth.gov/ghgcenter/custom-interfaces/nist-interface/?agency=nist&region=nec&zoom-level=5"
         }
       ]
     }

diff --git a/common/keypoints.tsx b/common/keypoints.tsx
@@ -1,6 +1,8 @@
 import React from "$veda-ui/react";
 import SmartLink from '$veda-ui-scripts/components/common/smart-link';
 
+import { ExternalLinkFlag } from '$veda-ui-scripts/components/common/card/';
+
 import {
   Card, 
   CardHeader,
@@ -20,6 +22,7 @@ import "./styles.scss"
 type Data = {
   title: string;
   desc: string;
+  hideExternalLinkFlag?: boolean;
   img: {
     src: string;
     alt: string;
@@ -59,6 +62,12 @@ export default function Keypoints({
             className: `border-0 position-relative card-shadow__hover margin-top-1 margin-right-2  ${cardType === 'cover' ? 'card__cover height-card-lg' : ''}`,
           }}
         >
+          {
+            ( !!datum.link.url.startsWith("http") && !datum.hideExternalLinkFlag ) &&
+            <div style={{cursor: "pointer"}}>
+              <ExternalLinkFlag />
+            </div>
+          }
           <CardMedia imageClass={`${cardType === 'cover'? 'radius-lg bg-gray-30' : ''}`}>
             <img src={datum.img.src} alt={datum.img.alt} className={`${cardType === 'cover' ? 'card-image__blend' : 'border-bottom border-gray-5'}`} />
           </CardMedia>

diff --git a/common/media/EMIT_Plume_Viewer_card.png b/common/media/EMIT_Plume_Viewer_card.png
diff --git a/common/media/EPA_Gridded_Methane_card.png b/common/media/EPA_Gridded_Methane_card.png
diff --git a/common/media/GOES_Methane_Plume_viewer_card.png b/common/media/GOES_Methane_Plume_viewer_card.png
diff --git a/common/media/NIST_NEC_Methane_Viewer_card1.png b/common/media/NIST_NEC_Methane_Viewer_card1.png
diff --git a/common/media/NOAA_Methane_Concentration_Viewer_card.png b/common/media/NOAA_Methane_Concentration_Viewer_card.png
diff --git a/common/media/co2.jpg b/common/media/co2.jpg
diff --git a/common/media/documentation.png b/common/media/documentation.png
diff --git a/common/media/emit.jpg b/common/media/emit.jpg
diff --git a/common/media/nist-co2-nwb.jpg b/common/media/nist-co2-nwb.jpg
diff --git a/custom-pages/common/LearnMore.tsx b/custom-pages/common/LearnMore.tsx
@@ -0,0 +1,48 @@
+import React from "$veda-ui/react";
+import { Link } from '$veda-ui/react-router-dom';
+import {
+  Grid,
+} from '$veda-ui/@trussworks/react-uswds';
+
+import {
+  CollecticonTextBlock,
+  CollecticonEnvelope,
+  CollecticonSpeechBalloon,
+} from '$veda-ui/@devseed-ui/collecticons';
+
+import { Title } from "../../common/styled-components";
+import { SUBSCRIPTION_URL } from "../../constants";
+
+
+export default function LearnMore() {
+    return (
+        <Grid tablet={{col:8, offset: 2}}>
+          <Title> Learn More and Share Your Ideas </Title>
+
+          <Grid row>
+              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
+                  <CollecticonEnvelope size='xlarge' color='#082a64' className="grid-col-auto" />
+              </Grid>
+              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
+                  <span className="margin-left-4 font-size-md-deprecated"> For the latest updates and information about the US GHG Center or to join a focus area group, <a href={SUBSCRIPTION_URL}>subscribe to our email updates list.</a></span>
+              </Grid>
+          </Grid>
+          <Grid row>
+              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
+                  <CollecticonTextBlock size='xlarge' color='#082a64' className="grid-col-auto" />
+              </Grid>
+              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
+                  <span className="margin-left-4 font-size-md-deprecated"> Read more about the US GHG Center news, trainings, and workshop opportunities on the <Link to="/news-and-events">News and Events page.</Link></span>
+              </Grid>
+          </Grid>
+          <Grid row>
+              <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
+                  <CollecticonSpeechBalloon size='xlarge' color='#082a64' className="grid-col-auto" />
+              </Grid>
+              <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
+                  <span className="margin-left-4 font-size-md-deprecated">  Do you have a US GHG Center portal suggestion or question? Reach the team using the "Contact Us" button at the top or bottom of every page.</span>
+              </Grid>
+          </Grid>
+        </Grid>
+    )
+}
diff --git a/custom-pages/data-toolkit/component.tsx b/custom-pages/data-toolkit/component.tsx
@@ -1,19 +1,13 @@
 import React from "$veda-ui/react";
-import { Link } from "$veda-ui/react-router-dom";
 import '$veda-ui/@trussworks/react-uswds/lib/index.css'
 
 import {
-    Grid,
     GridContainer,
 } from '$veda-ui/@trussworks/react-uswds';
 
-import {
-    CollecticonTextBlock,
-    CollecticonEnvelope,
-    CollecticonSpeechBalloon,
-} from '$veda-ui/@devseed-ui/collecticons';
-
 import Keypoints from "../../common/keypoints";
+import LearnMore from "../common/LearnMore";
+
 import { dataEngagements, focusAreaDatasets, customInterfaces } from "../../common/constants";
 
 import { SUBSCRIPTION_URL } from "../../constants";
@@ -48,33 +42,7 @@ export default function Component() {
                 <Keypoints data={focusAreaDatasets} />
                 </section>
 
-                <Grid tablet={{col:8, offset: 2}}>
-                    <Title> Learn More and Share Your Ideas </Title>
-                    <Grid row>
-                        <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                            <CollecticonEnvelope size='xlarge' color='#082a64' className="grid-col-auto" />
-                        </Grid>
-                        <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                            <span className="margin-left-4 font-size-md-deprecated"> For the latest updates and information about the US GHG Center or to join a focus area group, <a href={SUBSCRIPTION_URL}>subscribe to our email updates list.</a></span>
-                        </Grid>
-                    </Grid>
-                    <Grid row>
-                        <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                            <CollecticonTextBlock size='xlarge' color='#082a64' className="grid-col-auto" />
-                        </Grid>
-                        <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                            <span className="margin-left-4 font-size-md-deprecated"> Read more about the US GHG Center news, trainings, and workshop opportunities on the <Link to="/news-and-events">News and Events page.</Link></span>
-                        </Grid>
-                    </Grid>
-                    <Grid row>
-                        <Grid col='auto' className="display-flex flex-align-center margin-bottom-2">
-                            <CollecticonSpeechBalloon size='xlarge' color='#082a64' className="grid-col-auto" />
-                        </Grid>
-                        <Grid col='fill' className="display-flex flex-align-center margin-bottom-2">
-                            <span className="margin-left-4 font-size-md-deprecated">  Do you have a US GHG Center portal suggestion or question? Reach the team using the "Contact Us" button at the top or bottom of every page.</span>
-                        </Grid>
-                    </Grid>
-                </Grid>
+                <LearnMore />
             </GridContainer>
         </div>
     )

diff --git a/custom-pages/news-and-events/news-page-content.js b/custom-pages/news-and-events/news-page-content.js
@@ -163,15 +163,15 @@ export const EVENT_ITEMS = sortByDateCustom([
   {
     name: ' AGU Pre-conference Workshop',
     asLink : {
-      url: 'https://www.agu.org/annual-meeting/attend#register'
+      url: 'https://agu.confex.com/agu/agu24/meetingapp.cgi/Session/229081'
     },
     media: {
       src: new URL('./media/events/agu_logo.png', import.meta.url).href,
       alt: 'AGU Logo'
     },
     description: "On Sunday, December 8 (1:00 - 4:30PM EST), US GHG Center team members will host a workshop at the 2024 American Geophysical Union annual conference. Join us at Advancing Open Science: Greenhouse Gas Emission Data Analysis using the U.S. Greenhouse Gas Center’s JupyterHub. Early bird registration ends on November 6.",
-    startDate: '2024-12-04',
-    endDate: '2024-12-05'
+    startDate: '2024-12-08',
+    endDate: '2024-12-08'
   },
   {
     name: 'Join the 2nd Annual Stakeholder Forum; Dec 4-5, 2024',
@@ -184,7 +184,7 @@ export const EVENT_ITEMS = sortByDateCustom([
     },
     description: "This 2-day forum will focus on gathering input from the stakeholder community to inform the Center's priorities and future directions. Join us on Dec 4-5, 2024 in College Park, Maryland!",
     startDate: '2024-12-04',
-    endDate: '2024-12-06'
+    endDate: '2024-12-05'
   },
   {
     name: 'Policy Speaker Series: An Overview of the Global Greenhouse Gas Watch (G3W)',