From e276d75be0300a046bea37475e0910480c973959 Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Fri, 22 Nov 2024 08:59:49 -0500 Subject: [PATCH 01/30] create a simple focusable alert component this component will focus the content once it is displayed and then return focus to the button when closed --- src/SnackbarAlert.vue | 97 +++++++++++++++++++++++++++++++++++++++++++ src/main.ts | 3 ++ 2 files changed, 100 insertions(+) create mode 100644 src/SnackbarAlert.vue diff --git a/src/SnackbarAlert.vue b/src/SnackbarAlert.vue new file mode 100644 index 0000000..dafeae0 --- /dev/null +++ b/src/SnackbarAlert.vue @@ -0,0 +1,97 @@ + + + diff --git a/src/main.ts b/src/main.ts index 71ab6ff..d30d186 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import Vue, { createApp } from "vue"; import { FundingAcknowledgement, IconButton, CreditLogos } from "@cosmicds/vue-toolkit"; @@ -7,6 +8,7 @@ import Colorbar from './ColorBar.vue'; import ColorBarHorizontal from "./ColorBarHorizontal.vue"; import InfoButton from "./InfoButton.vue"; import vuetify from "../plugins/vuetify"; +import SnackbarAlert from "./SnackbarAlert.vue"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { library } from "@fortawesome/fontawesome-svg-core"; @@ -71,6 +73,7 @@ createApp(TempoLite, {}) .component('info-button', InfoButton) .component('colorbar-horizontal', ColorBarHorizontal) .component('date-picker', VueDatePicker) + .component('snackbar-alert', SnackbarAlert) // Mount .mount("#app"); From 202c57b065dd4767188053ba3c395fd092c86aad Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Fri, 22 Nov 2024 09:00:57 -0500 Subject: [PATCH 02/30] add snackbaralert to story --- src/TempoLite.vue | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 7029d24..c6b5ecb 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -127,6 +127,19 @@

What is in the Air You Breathe?

+ +
    +
  • Images from Nov, 19th onward are created + using the average, rather than the nearest pixel value + when reprojecting. +
    • +
+ +
where
From 9a77bc5d829960c276206d02b391c7ade01b248c Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Tue, 26 Nov 2024 19:42:28 -0500 Subject: [PATCH 03/30] save map and time state in url --- src/TempoLite.vue | 87 +++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 81 insertions(+), 6 deletions(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 7029d24..71d9ca6 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -544,7 +544,7 @@ --> + +
where
-
+ + + +

User Guide

 + +

+ Do consectetur consequat dolore esse nulla . +

+ +

+ Reprehenderit sint ipsum laborum in reprehenderit sunt eu pariatur ipsum tempor . +

+ +

+ Ex laboris fugiat ad duis eu ipsum cupidatat veniam fugiat . +

+ + + + + + + + +

Data source and processing

 + +

+ This visualization of the TEMPO satellite NO2 Tropospheric Column Density data is derived from Level 3 data files obtained from the + NASA ASDC TEMPO Data Products Page. +

+
+

+ The data has been processed and visualized by the CosmicDS team at the Harvard-Smithsonian Center for Astrophysics. The images displayed have undergone preprocessing to filter out erroneous data, and a 50% cloud cover mask has been applied. + For performance optimization, the data resolution has been halved and reprojected to a Web Mercator projection to ensure compatibility with + Leaflet.js. +

+
+

+ The data is rendered using the color map provided by NASA's Scientific Visualization Studio. +

+
+

+ All data processing scripts are available on + GitHub. +

+ + + + Show Introduction @@ -580,7 +703,6 @@ import { _preloadImages } from "./PreloadImages"; import changes from "./changes"; - type SheetType = "text" | "video" | null; type Timeout = ReturnType; @@ -869,6 +991,8 @@ export default defineComponent({ showControls: false, showFieldOfRegard: true, showCredits: false, + showUserGuide: false, + showAboutData: false, loadedImagesProgress: 0, useHighRes: false, @@ -880,7 +1004,8 @@ export default defineComponent({ cloudTimestamps, showClouds: false, currentUrl: window.location.href, - changes + changes, + showChanges: false, }; }, @@ -1740,6 +1865,16 @@ ul { grid-row: 1 / 2; gap: 10px; } + + #menu-area { + grid-column: 3 / 4; + grid-row: 1 / 2; + // border: 1px solid red; + display: flex; + justify-self: flex-end; + gap: 2rem; + align-items: center; + } #where { display: none; @@ -2339,4 +2474,13 @@ button:focus-visible, top: -1rem; } } + +.menu-button, .share-button { + outline: 2px solid yellow; + border: none; +} + +.menu-link { + text-decoration: none; +} From fe86653ff84e12dcaef84a30965150125c0caec5 Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 9 Jan 2025 12:22:04 -0500 Subject: [PATCH 12/30] update events to include wildfire --- src/TempoLite.vue | 118 +++++---------------------------- src/interestingEvents.ts | 139 +++++++++++++++++++++++++++++++++++++++ src/types.ts | 16 +++++ 3 files changed, 170 insertions(+), 103 deletions(-) create mode 100644 src/interestingEvents.ts create mode 100644 src/types.ts diff --git a/src/TempoLite.vue b/src/TempoLite.vue index d427fff..27b8948 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -470,6 +470,7 @@ >
; @@ -769,22 +772,8 @@ const fosterTimestamps = [ const timestamps = fosterTimestamps; -interface LocationOfInterest { - latlng: L.LatLngExpression; - zoom: number; - text: string; - description: string; - time: string; - index?: number; -} -interface InterestingEvent { - date: Date; - dateString: string; - locations: LocationOfInterest[]; - label?: string; - info?: string; - } + const urlParams = new URLSearchParams(window.location.search); const hideIntro = urlParams.get("hideintro") === "true"; @@ -827,92 +816,7 @@ export default defineComponent({ - const interestingEvents = [ - { - date: new Date(2023, 10, 1) , - dateString: 'Nov 1', - label: "November 1, 2023", - info: ` -

- Because the TEMPO instrument measures sunlight reflected and scattered from Earth’s - surface and atmosphere, it can’t “see” through the clouds—so these - areas appear blank on the map. -

-

- But right away you’ll see that there - are high concentrations of NO2 around many urban centers, - and sometimes along major highways. -

- `, - locations: [ - { latlng: [34.359786, -111.700124], - zoom:7, - text: "Arizona Urban Traffic and Fires", - time: '2023-11-01T14:22:00.000Z', - description: '

NO2 increases during daily rush hour. In Phoenix, notice the high levels of NO2 early in the morning, dip down during the day, then start to build back up during the evening commute.

Fires can be seen between Phoenix and Flagstaff. These are most easily identified as hot spots of NO2 that appear quickly.

', - }, - { latlng: [36.1716, -115.1391], - zoom:7, - text: "Las Vegas: Fairly Constant Levels All Day", - time: '2023-11-01T14:22:00.000Z', - description: '

In this data Las Vegas has less daily variation than many other cities.

' - } - ] - }, - { - date: new Date(2023, 10, 3), - dateString: 'Nov 3', - label: "November 3, 2023", - info: ` - Levels of NO2 change quickly from day to day, - and even from hour to hour as wind transports - plumes of pollution. - `, - locations: [ - { latlng: [36.215934, -119.777500], - zoom:6, - text: "California Traffic and Agriculture", - time: '2023-11-03T14:22:00.000Z', - description: '

Los Angeles clearly stands out. NO2 values are even higher than the maximum of our color bar. You can clearly see the highways including Route 10 between San Bernardino and Mexicali and Route 15 leading from San Bernardino towards Las Vegas. A significant amount of NO2 in California’s central valley is a byproduct of agricultural activity there. Excess fertilizer in the soil gets broken down by microbes to produce nitrogen oxides which are very reactive. Emissions that don’t come from combustion are typically much harder to see, but the Central Valley is an area where TEMPO data may reveal this agricultural source of pollution.

' - }, - { latlng: [41.857260, -80.531177], - zoom:5, - text: "Northeast: Large Emissions Plumes", - time: '2023-11-03T12:22:00.000Z', - description: '

Air pollution is often transported, or moved, over great distances. In this data set large plumes can be seen over the Northeast. If you look closely you can see that many of these plumes appear to originate out of cities in the midwest including Nashville, St. Louis, and Memphis.

' - } - ] - }, - { - date: new Date(2024, 2, 28), - dateString: 'Mar 28', - label: "March 28, 2024", - info: ` - Breathing air with a high concentration of NO2, - and the resulting smog it forms when it reacts with other pollutants, - can irritate human respiratory systems. - People with asthma, as well as children and the elderly, - are generally at greater risk for the health effects of air pollution. - TEMPO data can help communities make informed - decisions and take action to improve air quality. - `, - locations: [ - { latlng: [31.938392, -99.095785], - zoom:6, - text: "Texas Oil and Gas Production", - time: '2024-03-28T13:04:00.000Z', - description: '

The Permian basin, near Odessa, has two large plumes of NO2. This is the largest oil and gas producing area in the USA. You can also see here how pollution from a source in one state (Texas) can be transported across state lines to New Mexico.

' - }, - { latlng: [31.331933, -91.575283], - zoom: 8, - text: "LA/MS Fires", - time: '2024-03-28T16:44:00.000Z', - description: '

Two fires can be seen popping up south and east of Alexandria. These are most easily identified as hot spots of NO2 that appear quickly.

' - } - ] - } // Mar 28 - ] as InterestingEvent[]; - + const opacity = 0.9; @@ -1657,7 +1561,7 @@ export default defineComponent({ } // import Lexand from google fonts -@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); +// @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); :root { // font-size: clamp(14px, 1.7vw, 16px); @@ -1981,6 +1885,14 @@ a { padding-block: 0.5rem; } +#date-radio div.highlighted label { + font-size: 1.2em; + font-weight: bold; + border-radius: 5px; + color: var(--smithsonian-yellow); + opacity: 1; +} + #all-dates { padding-bottom: 0.5rem; } diff --git a/src/interestingEvents.ts b/src/interestingEvents.ts new file mode 100644 index 0000000..82cdeff --- /dev/null +++ b/src/interestingEvents.ts @@ -0,0 +1,139 @@ +import { InterestingEvent } from "./types"; + +export const interestingEvents = [ + { + date: new Date(2024, 0, 8), + dateString: "Jan 8", + label: "LA Wildfires (Jan 8)", + highlighted: true, + info: ` +

+ Beginning on January 7, 2024, a series of wildfires broke out + in the Los Angeles area. Wildfires create a severe public health + hazard by releasing large amounts of particulate matter and NO2 in + addition to other pollutants. +

+

+ The TEMPO instrument can detect the NO2 plumes from these fires, + helping scientists and the public to understand the extent of the pollution. +

+ `, + locations: [ + { + latlng: [34.0522, -118.2437], + zoom: 8, + text: "Los Angeles Wildfires", + time: "2024-01-08T19:51:00.000Z", + description: ` +

+ Plumes of NO2 from the wildfires can be seen from the + fires in the Los Angeles Area. On this day, the plumes are being blown + by the window over the Pacific Ocean. +

+

+ The Dark colors indicate very high levels of NO2 and thus very + poor air quality. +

+ ` + }] + + + + }, + + { + date: new Date(2023, 10, 1), + dateString: "Nov 1", + label: "November 1, 2023", + info: ` +

+ Because the TEMPO instrument measures sunlight reflected and scattered from Earth’s + surface and atmosphere, it can’t “see” through the clouds—so these + areas appear blank on the map. +

+

+ But right away you’ll see that there + are high concentrations of NO2 around many urban centers, + and sometimes along major highways. +

+ `, + locations: [ + { + latlng: [34.359786, -111.700124], + zoom: 7, + text: "Arizona Urban Traffic and Fires", + time: "2023-11-01T14:22:00.000Z", + description: + "

NO2 increases during daily rush hour. In Phoenix, notice the high levels of NO2 early in the morning, dip down during the day, then start to build back up during the evening commute.

Fires can be seen between Phoenix and Flagstaff. These are most easily identified as hot spots of NO2 that appear quickly.

", + }, + { + latlng: [36.1716, -115.1391], + zoom: 7, + text: "Las Vegas: Fairly Constant Levels All Day", + time: "2023-11-01T14:22:00.000Z", + description: + "

In this data Las Vegas has less daily variation than many other cities.

", + }, + ], + }, + { + date: new Date(2023, 10, 3), + dateString: "Nov 3", + label: "November 3, 2023", + info: ` + Levels of NO2 change quickly from day to day, + and even from hour to hour as wind transports + plumes of pollution. + `, + locations: [ + { + latlng: [36.215934, -119.7775], + zoom: 6, + text: "California Traffic and Agriculture", + time: "2023-11-03T14:22:00.000Z", + description: + "

Los Angeles clearly stands out. NO2 values are even higher than the maximum of our color bar. You can clearly see the highways including Route 10 between San Bernardino and Mexicali and Route 15 leading from San Bernardino towards Las Vegas. A significant amount of NO2 in California’s central valley is a byproduct of agricultural activity there. Excess fertilizer in the soil gets broken down by microbes to produce nitrogen oxides which are very reactive. Emissions that don’t come from combustion are typically much harder to see, but the Central Valley is an area where TEMPO data may reveal this agricultural source of pollution.

", + }, + { + latlng: [41.85726, -80.531177], + zoom: 5, + text: "Northeast: Large Emissions Plumes", + time: "2023-11-03T12:22:00.000Z", + description: + "

Air pollution is often transported, or moved, over great distances. In this data set large plumes can be seen over the Northeast. If you look closely you can see that many of these plumes appear to originate out of cities in the midwest including Nashville, St. Louis, and Memphis.

", + }, + ], + }, + { + date: new Date(2024, 2, 28), + dateString: "Mar 28", + label: "March 28, 2024", + info: ` + Breathing air with a high concentration of NO2, + and the resulting smog it forms when it reacts with other pollutants, + can irritate human respiratory systems. + People with asthma, as well as children and the elderly, + are generally at greater risk for the health effects of air pollution. + TEMPO data can help communities make informed + decisions and take action to improve air quality. + `, + locations: [ + { + latlng: [31.938392, -99.095785], + zoom: 6, + text: "Texas Oil and Gas Production", + time: "2024-03-28T13:04:00.000Z", + description: + "

The Permian basin, near Odessa, has two large plumes of NO2. This is the largest oil and gas producing area in the USA. You can also see here how pollution from a source in one state (Texas) can be transported across state lines to New Mexico.

", + }, + { + latlng: [31.331933, -91.575283], + zoom: 8, + text: "LA/MS Fires", + time: "2024-03-28T16:44:00.000Z", + description: + "

Two fires can be seen popping up south and east of Alexandria. These are most easily identified as hot spots of NO2 that appear quickly.

", + }, + ], + }, // Mar 28 +] as InterestingEvent[]; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..a36fdaa --- /dev/null +++ b/src/types.ts @@ -0,0 +1,16 @@ +export interface LocationOfInterest { + latlng: L.LatLngExpression; + zoom: number; + text: string; + description: string; + time: string; + index?: number; + } +export interface InterestingEvent { + date: Date; + dateString: string; + locations: LocationOfInterest[]; + label?: string; + info?: string; + highlighted?: boolean; + } \ No newline at end of file From f34f2dce459c0462a8f259cd9472d23538f0dd4b Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 9 Jan 2025 12:25:06 -0500 Subject: [PATCH 13/30] hide progress bar and make it look kinder --- src/TempoLite.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 27b8948..8090672 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -449,9 +449,12 @@
Loading Data ({{ loadedImagesProgress.toFixed(0) }}%) Selected Date Loaded From a4baea4ff021494e2244a82c01ad6a01e6befda4 Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 9 Jan 2025 12:55:51 -0500 Subject: [PATCH 14/30] hide user guide option for now --- src/TempoLite.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 8090672..2b8ba57 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -164,14 +164,14 @@ View Changes - User Guide - + --> Date: Thu, 9 Jan 2025 13:17:20 -0500 Subject: [PATCH 15/30] fix LA year --- src/interestingEvents.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/interestingEvents.ts b/src/interestingEvents.ts index 82cdeff..f9e04ed 100644 --- a/src/interestingEvents.ts +++ b/src/interestingEvents.ts @@ -2,13 +2,13 @@ import { InterestingEvent } from "./types"; export const interestingEvents = [ { - date: new Date(2024, 0, 8), + date: new Date(2025, 0, 6), dateString: "Jan 8", label: "LA Wildfires (Jan 8)", highlighted: true, info: `

- Beginning on January 7, 2024, a series of wildfires broke out + Beginning on January 7, 2025, a series of wildfires broke out in the Los Angeles area. Wildfires create a severe public health hazard by releasing large amounts of particulate matter and NO2 in addition to other pollutants. @@ -23,7 +23,7 @@ export const interestingEvents = [ latlng: [34.0522, -118.2437], zoom: 8, text: "Los Angeles Wildfires", - time: "2024-01-08T19:51:00.000Z", + time: "2025-01-06T19:51:00.000Z", description: `

Plumes of NO2 from the wildfires can be seen from the From 6e3632bbf1e0a6654d4b9e5e97e0159c5ef8ca7e Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 9 Jan 2025 14:56:26 -0500 Subject: [PATCH 16/30] make progress bar blue and permantent --- src/TempoLite.vue | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 2b8ba57..8254336 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -449,15 +449,13 @@ Loading Data ({{ loadedImagesProgress.toFixed(0) }}%) - Selected Date Loaded + Data Loaded From 39dba671850f18e2baa045f29aee568a865e6a9e Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 9 Jan 2025 15:56:36 -0500 Subject: [PATCH 17/30] fix copy and don't change window url --- src/ShareButton.vue | 6 +++--- src/TempoLite.vue | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ShareButton.vue b/src/ShareButton.vue index 1c0ce8f..5be078e 100644 --- a/src/ShareButton.vue +++ b/src/ShareButton.vue @@ -7,14 +7,14 @@ aria-label="Copy link to share view" class="share-button" icon - @click="copy()" - @keyup.enter="copy()" + @click="copy(source)" + @keyup.enter="copy(source)" v-bind="props" :color="buttonColor" :elevation="elevation" :size="size" :rounded="rounded" - > + > mdi-share-variant diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 8254336..26efc91 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -1202,7 +1202,7 @@ export default defineComponent({ const searchParams = new URLSearchParams(state); url.search = searchParams.toString(); this.currentUrl = url.toString(); - window.history.replaceState(null,'',url); + // window.history.replaceState(null,'',url); } }, @@ -2389,7 +2389,7 @@ button:focus-visible, } .menu-button, .share-button { - outline: 2px solid yellow; + outline: 2px solid var(--smithsonian-yellow); border: none; } From 20746b7f43f92ec5adf343802fbbd11a8c2023e6 Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Thu, 9 Jan 2025 16:02:04 -0500 Subject: [PATCH 18/30] make sure zoomHome always uses US center --- src/TempoLite.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 26efc91..41e77db 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -785,6 +785,10 @@ const initLon = parseFloat(urlParams.get("lon") || '-98.789'); const initZoom = parseFloat(urlParams.get("zoom") || '4'); const initTime = urlParams.get("t"); +const homeLat = 40.044; +const homeLon = -98.789; +const homeZoom = 4; + function zpad(n: number, width: number = 2, character: string = "0"): string { return n.toString().padStart(width, character); } @@ -827,6 +831,11 @@ export default defineComponent({ zoom: initZoom, t: initTime ? +initTime : null }, + homeState: { + loc: [homeLat, homeLon] as LatLngExpression, + zoom: homeZoom, + t: null as number | null + }, showSplashScreen, sheet: null as SheetType, layersLoaded: false, @@ -930,7 +939,7 @@ export default defineComponent({ }); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - const zoomHome = L.Control.zoomHome(); + const zoomHome = L.Control.zoomHome({homeCoordinates: this.homeState.loc, homeZoom: this.homeState.zoom}); const originalZH = zoomHome._zoomHome.bind(zoomHome); zoomHome._zoomHome = (_e: Event) => { originalZH(); From 432bed83cc7e1e06fba3b8469303108f2eef5ed7 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Thu, 9 Jan 2025 18:13:18 -0500 Subject: [PATCH 19/30] Reverse date order; fix date; adjust lat long to center plume; edit text --- src/interestingEvents.ts | 115 +++++++++++++++++++-------------------- 1 file changed, 57 insertions(+), 58 deletions(-) diff --git a/src/interestingEvents.ts b/src/interestingEvents.ts index f9e04ed..83f50af 100644 --- a/src/interestingEvents.ts +++ b/src/interestingEvents.ts @@ -2,37 +2,33 @@ import { InterestingEvent } from "./types"; export const interestingEvents = [ { - date: new Date(2025, 0, 6), + date: new Date(2025, 0, 8), dateString: "Jan 8", - label: "LA Wildfires (Jan 8)", + label: "LA Wildfires (Jan 8, 2025)", highlighted: true, info: `

Beginning on January 7, 2025, a series of wildfires broke out - in the Los Angeles area. Wildfires create a severe public health - hazard by releasing large amounts of particulate matter and NO2 in - addition to other pollutants. + in the Los Angeles area. In addition to the devastating damage caused by the fires, large amounts of particulate matter, NO2, and other pollutants were released into the air.

The TEMPO instrument can detect the NO2 plumes from these fires, - helping scientists and the public to understand the extent of the pollution. + helping scientists and the public to understand the extent of the pollution and how it moves through the air.

`, locations: [ { - latlng: [34.0522, -118.2437], + latlng: [33.4773, -118.5975], zoom: 8, text: "Los Angeles Wildfires", - time: "2025-01-06T19:51:00.000Z", + time: "2025-01-08T19:51:00.000Z", description: `

Plumes of NO2 from the wildfires can be seen from the - fires in the Los Angeles Area. On this day, the plumes are being blown - by the window over the Pacific Ocean. + fires in the Los Angeles Area. On this day, the plumes are being blown south over the Pacific Ocean by the Santa Ana winds.

- The Dark colors indicate very high levels of NO2 and thus very - poor air quality. + The levels of NO2 are so high, they actually exceed the top of the scale shown on the color map.

` }] @@ -40,42 +36,40 @@ export const interestingEvents = [ }, - + { - date: new Date(2023, 10, 1), - dateString: "Nov 1", - label: "November 1, 2023", + date: new Date(2024, 2, 28), + dateString: "Mar 28", + label: "March 28, 2024", info: ` -

- Because the TEMPO instrument measures sunlight reflected and scattered from Earth’s - surface and atmosphere, it can’t “see” through the clouds—so these - areas appear blank on the map. -

-

- But right away you’ll see that there - are high concentrations of NO2 around many urban centers, - and sometimes along major highways. -

+ Breathing air with a high concentration of NO2, + and the resulting smog it forms when it reacts with other pollutants, + can irritate human respiratory systems. + People with asthma, as well as children and the elderly, + are generally at greater risk for the health effects of air pollution. + TEMPO data can help communities make informed + decisions and take action to improve air quality. `, locations: [ { - latlng: [34.359786, -111.700124], - zoom: 7, - text: "Arizona Urban Traffic and Fires", - time: "2023-11-01T14:22:00.000Z", + latlng: [31.938392, -99.095785], + zoom: 6, + text: "Texas Oil and Gas Production", + time: "2024-03-28T13:04:00.000Z", description: - "

NO2 increases during daily rush hour. In Phoenix, notice the high levels of NO2 early in the morning, dip down during the day, then start to build back up during the evening commute.

Fires can be seen between Phoenix and Flagstaff. These are most easily identified as hot spots of NO2 that appear quickly.

", + "

The Permian basin, near Odessa, has two large plumes of NO2. This is the largest oil and gas producing area in the USA. You can also see here how pollution from a source in one state (Texas) can be transported across state lines to New Mexico.

", }, { - latlng: [36.1716, -115.1391], - zoom: 7, - text: "Las Vegas: Fairly Constant Levels All Day", - time: "2023-11-01T14:22:00.000Z", + latlng: [31.331933, -91.575283], + zoom: 8, + text: "LA/MS Fires", + time: "2024-03-28T16:44:00.000Z", description: - "

In this data Las Vegas has less daily variation than many other cities.

", + "

Two fires can be seen popping up south and east of Alexandria. These are most easily identified as hot spots of NO2 that appear quickly.

", }, ], - }, + }, // Mar 28 + { date: new Date(2023, 10, 3), dateString: "Nov 3", @@ -104,36 +98,41 @@ export const interestingEvents = [ }, ], }, + { - date: new Date(2024, 2, 28), - dateString: "Mar 28", - label: "March 28, 2024", + date: new Date(2023, 10, 1), + dateString: "Nov 1", + label: "November 1, 2023", info: ` - Breathing air with a high concentration of NO2, - and the resulting smog it forms when it reacts with other pollutants, - can irritate human respiratory systems. - People with asthma, as well as children and the elderly, - are generally at greater risk for the health effects of air pollution. - TEMPO data can help communities make informed - decisions and take action to improve air quality. +

+ Because the TEMPO instrument measures sunlight reflected and scattered from Earth’s + surface and atmosphere, it can’t “see” through the clouds—so these + areas appear blank on the map. +

+

+ But right away you’ll see that there + are high concentrations of NO2 around many urban centers, + and sometimes along major highways. +

`, locations: [ { - latlng: [31.938392, -99.095785], - zoom: 6, - text: "Texas Oil and Gas Production", - time: "2024-03-28T13:04:00.000Z", + latlng: [34.359786, -111.700124], + zoom: 7, + text: "Arizona Urban Traffic and Fires", + time: "2023-11-01T14:22:00.000Z", description: - "

The Permian basin, near Odessa, has two large plumes of NO2. This is the largest oil and gas producing area in the USA. You can also see here how pollution from a source in one state (Texas) can be transported across state lines to New Mexico.

", + "

NO2 increases during daily rush hour. In Phoenix, notice the high levels of NO2 early in the morning, dip down during the day, then start to build back up during the evening commute.

Fires can be seen between Phoenix and Flagstaff. These are most easily identified as hot spots of NO2 that appear quickly.

", }, { - latlng: [31.331933, -91.575283], - zoom: 8, - text: "LA/MS Fires", - time: "2024-03-28T16:44:00.000Z", + latlng: [36.1716, -115.1391], + zoom: 7, + text: "Las Vegas: Fairly Constant Levels All Day", + time: "2023-11-01T14:22:00.000Z", description: - "

Two fires can be seen popping up south and east of Alexandria. These are most easily identified as hot spots of NO2 that appear quickly.

", + "

In this data Las Vegas has less daily variation than many other cities.

", }, ], - }, // Mar 28 + }, + ] as InterestingEvent[]; From 9af5c3a97474793bc3e22d3215c9eb191fa8cb32 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Thu, 9 Jan 2025 18:22:44 -0500 Subject: [PATCH 20/30] Minor label edit; John should get top billing! --- src/TempoLite.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 41e77db..3390bd5 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -157,11 +157,11 @@ - View Changes + What's New + + + + + + +

+ {{title}} +

+ + + + + + Add content to the default slot + + + + + + + + + + + + \ No newline at end of file From cab5006bd598109df6d6a14031f64d2d4f2955db Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Fri, 10 Jan 2025 00:19:13 -0500 Subject: [PATCH 23/30] use CDSDialog instead of SnackbarAlert --- src/SnackbarAlert.vue | 1 + src/TempoLite.vue | 4 ++-- src/main.ts | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/SnackbarAlert.vue b/src/SnackbarAlert.vue index 8abb399..e3d4a40 100644 --- a/src/SnackbarAlert.vue +++ b/src/SnackbarAlert.vue @@ -112,6 +112,7 @@ export default defineComponent({ close-on-back role="alert" aria-live="assertive" + timeout="-1" > {{ msg }} diff --git a/src/TempoLite.vue b/src/TempoLite.vue index a4d71ff..fbb3cf1 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -127,7 +127,7 @@

What is in the Air You Breathe?

- +
  1. {{ change.date }}
    {{ change.text }} @@ -138,7 +138,7 @@ Custom Activator --> - +
    where
    img { From cff9c04c61cb47d0919e756b075d99b955468fe3 Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Fri, 10 Jan 2025 00:41:29 -0500 Subject: [PATCH 28/30] manually set button heights --- src/TempoLite.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index dd93e12..f4586e8 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -2360,6 +2360,7 @@ button:focus-visible, .menu-button, .share-button { outline: 2px solid var(--smithsonian-yellow); border: none; + height: 2rem !important; } From aba28765414f15cbabc09fa2af02d96db268f54a Mon Sep 17 00:00:00 2001 From: John Arban Lewis Date: Fri, 10 Jan 2025 00:44:11 -0500 Subject: [PATCH 29/30] move show intro to menu --- src/TempoLite.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index f4586e8..34e0592 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -191,6 +191,15 @@ Credits + + Introduction + + @@ -633,9 +642,9 @@ - +
    From b57fa686b12927d3725fa5b60ca1e1fead0a90fa Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Fri, 10 Jan 2025 09:04:51 -0500 Subject: [PATCH 30/30] reorder menu; tiny text edits; use ul instead of ol for reverse chronological --- src/TempoLite.vue | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/TempoLite.vue b/src/TempoLite.vue index 34e0592..1033b9d 100644 --- a/src/TempoLite.vue +++ b/src/TempoLite.vue @@ -76,7 +76,7 @@ @@ -128,11 +128,11 @@

    What is in the Air You Breathe?

    -
      +
      • {{ change.date }}
        {{ change.text }}
        • -
    + + + Introduction + + - - Introduction - - @@ -612,12 +612,12 @@

    @@ -2356,7 +2356,7 @@ button:focus-visible, z-index: 999; } -.snackbar-alert-ol { +.snackbar-alert-ul { margin-left: 1em; }