From c81039724d2f37de5ad5534ca5fb2446c7ec39e0 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Sat, 9 Mar 2024 03:05:38 -0500
Subject: [PATCH 01/55] Add method for getting location values from Mapbox
 using search text.

---
 src/SolarEclipse2024.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index a5a3e24b..6aa706ae 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -1403,6 +1403,7 @@ export interface MapBoxFeature {
   text: string;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   properties: { short_code: string; };
+  center?: [number, number];
 }
 
 export interface MapBoxFeatureCollection {
@@ -3267,6 +3268,22 @@ export default defineComponent({
         return `${lat}° ${ns}, ${lon}° ${ew}`;
       }
     },
+
+    async locationForText(searchText: string): Promise<[number, number] | null> {
+      const accessToken = process.env.VUE_APP_MAPBOX_ACCESS_TOKEN;
+      const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${accessToken}`;
+      const mapBoxLocation = await fetch(url)
+        .then(response => response.json())
+        .then((result: MapBoxFeatureCollection) => {
+          if (result.features.length === 0) {
+            return null;
+          }
+          return result.features[0].center ?? null;
+        })
+        .catch((_err) => null);
+
+      return mapBoxLocation;
+    },
     
     decreasePlaybackRate() {
       this.forceRate = false;

From db5c16342e40e4604fead48dcdcc8a6178f10156 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Sun, 10 Mar 2024 13:07:54 -0400
Subject: [PATCH 02/55] Get text along with location when forward geocoding.

---
 src/SolarEclipse2024.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 6aa706ae..69925f70 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -1411,6 +1411,11 @@ export interface MapBoxFeatureCollection {
   features: MapBoxFeature[];
 }
 
+export interface ForwardGeocodingInfo {
+  location: [number, number];
+  text: string;
+}
+
 
 // number of milliseconds since January 1, 1970, 00:00:00 UTC
 // month is indexed from 0..?!
@@ -3269,20 +3274,24 @@ export default defineComponent({
       }
     },
 
-    async locationForText(searchText: string): Promise<[number, number] | null> {
+    async geocodingInfoForSearch(searchText: string): Promise<ForwardGeocodingInfo | null> {
       const accessToken = process.env.VUE_APP_MAPBOX_ACCESS_TOKEN;
       const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${accessToken}`;
-      const mapBoxLocation = await fetch(url)
+      const geocodingInfo = await fetch(url)
         .then(response => response.json())
         .then((result: MapBoxFeatureCollection) => {
-          if (result.features.length === 0) {
+          const center = result.features[0]?.center;
+          if (result.features.length === 0 || !center) {
             return null;
           }
-          return result.features[0].center ?? null;
+          return {
+            location: center,
+            text: this.mapboxLocationText(result)
+          };
         })
         .catch((_err) => null);
 
-      return mapBoxLocation;
+      return geocodingInfo;
     },
     
     decreasePlaybackRate() {

From b5f420def63f0087e18ed8f1abe3d663666cd4ca Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 11 Mar 2024 00:33:10 -0400
Subject: [PATCH 03/55] Update selected text in map update rather than in
 watcher.

---
 src/SolarEclipse2024.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 69925f70..86d82e70 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -2708,6 +2708,9 @@ export default defineComponent({
         return;
       }
       this.locationDeg = location;
+      this.textForLocation(this.locationDeg.longitudeDeg, this.locationDeg.latitudeDeg).then((text) => {
+        this.selectedLocationText = text;
+      });
     },
 
     onTimeSliderChange() {
@@ -3320,11 +3323,18 @@ export default defineComponent({
       this.playbackRate = sign * Math.pow(10, Math.abs(ezrate));
     },
     
-    
-
     async updateSelectedLocationText() {
       this.selectedLocationText = await this.textForLocation(this.locationDeg.longitudeDeg, this.locationDeg.latitudeDeg);
     },
+
+    async updateFromForwardGeocoding(searchText: string) {
+      const info = await this.geocodingInfoForSearch(searchText);
+      if (info === null) {
+        return;
+      }
+      this.locationDeg = { latitudeDeg: info.location[0], longitudeDeg: info.location[1] };
+      this.selectedLocationText = info.text;
+    },
     
     niceRound(val: number) {
       // rounding routine specifically for the playback rate
@@ -3458,7 +3468,6 @@ export default defineComponent({
       this.playing = false;
       // this.sunOffset = null;
       this.updateWWTLocation();
-      this.updateSelectedLocationText();
 
       // We need to let the location update before we redraw the horizon and overlay
       // Not a huge fan of having to do this, but we really need a frame render to update e.g. sun/moon positions

From dee1ab0ef23cafd8e092c7750bb06ae4f1513764 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 11 Mar 2024 13:54:07 -0400
Subject: [PATCH 04/55] Start working on UI for search text.

---
 src/SolarEclipse2024.vue | 20 ++++++++++++++++++++
 src/main.ts              |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 86d82e70..5df88f03 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -659,6 +659,24 @@
           }"
           faSize="1x"
         ></icon-button>
+        <div>
+          <v-text-field
+            v-if="showSearchInput"
+            v-model="searchText"
+            class="search-text-input"
+            label="Enter location name"
+          ></v-text-field>
+          <icon-button
+            v-if="!showSearchInput"
+            class="search-text-button"
+            :color="accentColor"
+            :focus-color="accentColor"
+            :fa-icon="showSearchInput ? 'check' : 'magnifying-glass'"
+            :box-shadow="false" 
+            :show-tooltip="!mobile"
+            @update:modelValue="showSearchInput = true"
+          ></icon-button>
+        </div>
       </div>
       <div id="location-progress" :class="[!showGuidedContent ?'budge' : '']">
         <geolocation-button
@@ -1649,6 +1667,8 @@ export default defineComponent({
       positionSet: false,
       imagesetFolder: null as Folder | null,
 
+      showSearchInput: false,
+      searchText: null as string | null,
       showMapTooltip: false,
       showTextTooltip: false,
       showMapSelector: false,
diff --git a/src/main.ts b/src/main.ts
index f531259e..dd24a851 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -61,6 +61,8 @@ import {
   faGaugeHigh,
   faAnglesLeft,
   faAnglesRight,
+  faMagnifyingGlass,
+  faCheck,
 
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -93,6 +95,8 @@ library.add(faCloudSun);
 library.add(faGaugeHigh);
 library.add(faAnglesLeft);
 library.add(faAnglesRight);
+library.add(faMagnifyingGlass);
+library.add(faCheck);
 
 /** v-hide directive taken from https://www.ryansouthgate.com/2020/01/30/vue-js-v-hide-element-whilst-keeping-occupied-space/ */
 // Extract the function out, up here, so I'm not writing it twice

From 40971553cda64ea7d5723606a18d5944d61fb673 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 11 Mar 2024 18:05:01 -0400
Subject: [PATCH 05/55] Make custom component for forward geocoding search.

---
 src/ForwardGeocodingInput.vue | 182 ++++++++++++++++++++++++++++++++++
 src/SolarEclipse2024.vue      |  40 ++++----
 src/main.ts                   |   2 +
 3 files changed, 205 insertions(+), 19 deletions(-)
 create mode 100644 src/ForwardGeocodingInput.vue

diff --git a/src/ForwardGeocodingInput.vue b/src/ForwardGeocodingInput.vue
new file mode 100644
index 00000000..17449880
--- /dev/null
+++ b/src/ForwardGeocodingInput.vue
@@ -0,0 +1,182 @@
+<template>
+  <v-tooltip
+    v-model="tooltip"
+    :location="tooltipLocation"
+    :open-on-click="tooltipOnClick"
+    :open-on-focus="tooltipOnFocus"
+    :open-on-hover="tooltipOnHover"
+    :offset="tooltipOffset"
+    :disabled="!tooltipText || !showTooltip"
+  >
+    <template v-slot:activator="{ props }: { props: Record<string,any> }">
+      <div
+        v-bind="props"
+        :id="buttonID"
+        :class="['forward-geocoding-wrapper', {'active': modelValue}]"
+        @click="handleAction"
+        @keyup.enter="handleAction"
+        @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd"
+        :style="cssVars"
+        tabindex="0"
+      >
+      <v-text-field
+        v-if="open"
+        v-model="searchText"
+        class="search-text-input"
+        label="Enter location name"
+      ></v-text-field>
+      <font-awesome-icon
+        v-if="open"
+        icon="times"
+        size="lg"
+        :class="['fa-icon']"
+        @click="open = false"
+      ></font-awesome-icon>
+      <font-awesome-icon
+        :icon="open ? 'check' : 'magnifying-glass'"
+        size="lg"
+        :class="['fa-icon']"
+        @click="() => {
+          if (!open) {
+            open = true;
+          } else {
+            $emit('text-update', searchText);
+            searchText = null;
+            open = false;
+          }
+        }"
+      ></font-awesome-icon>
+      </div>
+    </template>
+    <span>{{ tooltipText }}</span>
+  </v-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { VTooltip } from "vuetify/components/VTooltip";
+import { VTextField } from "vuetify/components/VTextField";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+export default defineComponent({
+
+  components: {
+    'v-tooltip': VTooltip,
+    'v-text-field': VTextField,
+    'font-awesome-icon': FontAwesomeIcon
+  },
+
+  props: {
+    modelValue: { type: Boolean, required: false },
+    color: { type: String, default: "#ffffff" },
+    focusColor: { type: String, default: "#ffffff" },
+    backgroundColor: { type: String, default: "#040404" },
+    longPressTimeMs: { type: Number, default: 500 },
+    tooltipText: { type: String, required: false },
+    tooltipLocation: { type: String, default: "start" },
+    tooltipOnClick: { type: Boolean, default: false },
+    tooltipOnFocus: { type: Boolean, default: false },
+    tooltipOnHover: { type: Boolean, default: true },
+    tooltipOffset: { type: [String, Number], default: 0 },
+    showTooltip: { type: Boolean, default: true },
+  },
+
+  methods: {
+    updateValue() {
+      if (this.modelValue === undefined) { return; }
+      this.$emit('update:modelValue', !this.modelValue); 
+    },
+
+    handleAction() {
+      this.updateValue();
+      this.$emit('activate');
+    },
+
+    handleTouchStart() {
+      this.longPressTimeout = setTimeout(() => {
+        this.tooltip = true;
+      }, this.longPressTimeMs);
+    },
+
+    handleTouchEnd() {
+      if (this.longPressTimeout) {
+        clearTimeout(this.longPressTimeout);
+        this.longPressTimeout = null;
+      }
+      this.tooltip = false;
+    }
+  },
+
+  data() {
+    return {
+      tooltip: false,
+      open: false,
+      searchText: null as string | null,
+      longPressTimeout: null as ReturnType<typeof setTimeout> | null
+    };
+  },
+
+  // Since our colors are used in compound values like e.g. box-shadows,
+  // we need to directly bind to CSS variables
+  computed: {
+    cssVars() {
+      return {
+        "--color": this.color,
+        "--background-color": this.backgroundColor,
+        "--focus-color": this.focusColor,
+        "--active-shadow": 'transparent',
+        "--focus-shadow": 'transparent',
+      };
+    },
+
+    buttonID() {
+      const id = this.$attrs['id'];
+      return id ? `${id}-button` : null;
+    }
+  }
+
+});
+</script>
+
+<style lang="less">
+.forward-geocoding-wrapper {
+  width: fit-content;
+  color: var(--color);
+  border-color: var(--color);
+  background: var(--background-color);
+  padding: 6px 8px;
+  border: 1px solid var(--color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  border-radius: 20px;
+  gap: 8px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    color: var(--focus-color);
+    border-color: var(--focus-color);
+  }
+
+  &.active {
+    box-shadow: 0px 0px 10px 3px var(--active-shadow);
+
+    &:focus {
+      box-shadow: 0px 0px 10px 3px var(--focus-shadow);
+    }
+  }
+}
+
+.v-text-field {
+  width: 250px;
+
+  & .v-input__details {
+    display: none;
+  }
+}
+</style>
diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 5df88f03..76c497bf 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -659,24 +659,11 @@
           }"
           faSize="1x"
         ></icon-button>
-        <div>
-          <v-text-field
-            v-if="showSearchInput"
-            v-model="searchText"
-            class="search-text-input"
-            label="Enter location name"
-          ></v-text-field>
-          <icon-button
-            v-if="!showSearchInput"
-            class="search-text-button"
-            :color="accentColor"
-            :focus-color="accentColor"
-            :fa-icon="showSearchInput ? 'check' : 'magnifying-glass'"
-            :box-shadow="false" 
-            :show-tooltip="!mobile"
-            @update:modelValue="showSearchInput = true"
-          ></icon-button>
-        </div>
+        <forward-geocoding-input
+          :color="accentColor"
+          :focusColor="accentColor"
+          @text-update="(searchText: string) => updateFromSearchText(searchText)"
+        ></forward-geocoding-input>
       </div>
       <div id="location-progress" :class="[!showGuidedContent ?'budge' : '']">
         <geolocation-button
@@ -1668,7 +1655,6 @@ export default defineComponent({
       imagesetFolder: null as Folder | null,
 
       showSearchInput: false,
-      searchText: null as string | null,
       showMapTooltip: false,
       showTextTooltip: false,
       showMapSelector: false,
@@ -3307,6 +3293,8 @@ export default defineComponent({
           if (result.features.length === 0 || !center) {
             return null;
           }
+          console.log(result);
+          console.log(this.mapboxLocationText(result));
           return {
             location: center,
             text: this.mapboxLocationText(result)
@@ -3316,6 +3304,15 @@ export default defineComponent({
 
       return geocodingInfo;
     },
+
+    updateFromSearchText(searchText: string) {
+      this.geocodingInfoForSearch(searchText).then((info) => {
+        console.log(info);
+        if (info === null) { return; }
+        this.locationDeg = { longitudeDeg: info.location[0], latitudeDeg: info.location[1] };
+        this.selectedLocationText = info.text;
+      });
+    },
     
     decreasePlaybackRate() {
       this.forceRate = false;
@@ -3830,6 +3827,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  width: fit-content;
   
   @media (max-width: 599px) {
     top: 2.5rem;
@@ -5286,4 +5284,8 @@ a {
     opacity: 0;
   }
 }
+
+.icon-wrapper {
+  width: fit-content;
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
index dd24a851..bbd8892f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,6 +13,7 @@ import HoverTooltip from "./HoverTooltip.vue";
 import CloudCover from "./CloudCover.vue";
 import DefineTerm from "./DefineTerm.vue";
 import PlaybackControl from "./PlaybackControl.vue";
+import ForwardGeocodingInput from "./ForwardGeocodingInput.vue";
 
 import "./polyfills";
 
@@ -147,5 +148,6 @@ createApp(SolarEclipse2023, {
   .component('cloud-cover', CloudCover)
   .component('define-term', DefineTerm)
   .component('playback-control', PlaybackControl)
+  .component('forward-geocoding-input', ForwardGeocodingInput)
   // Mount
   .mount("#app");

From 88d73fcf7ccd00343fdb3150b517d4abb8faf089 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Mar 2024 15:52:26 -0400
Subject: [PATCH 06/55] Trim down forward geocoding component based on new
 layout idea.

---
 src/ForwardGeocodingInput.vue | 116 ++++++----------------------------
 src/main.ts                   |   2 -
 2 files changed, 19 insertions(+), 99 deletions(-)

diff --git a/src/ForwardGeocodingInput.vue b/src/ForwardGeocodingInput.vue
index 17449880..bb9ecebe 100644
--- a/src/ForwardGeocodingInput.vue
+++ b/src/ForwardGeocodingInput.vue
@@ -1,119 +1,45 @@
 <template>
-  <v-tooltip
-    v-model="tooltip"
-    :location="tooltipLocation"
-    :open-on-click="tooltipOnClick"
-    :open-on-focus="tooltipOnFocus"
-    :open-on-hover="tooltipOnHover"
-    :offset="tooltipOffset"
-    :disabled="!tooltipText || !showTooltip"
-  >
-    <template v-slot:activator="{ props }: { props: Record<string,any> }">
-      <div
-        v-bind="props"
-        :id="buttonID"
-        :class="['forward-geocoding-wrapper', {'active': modelValue}]"
-        @click="handleAction"
-        @keyup.enter="handleAction"
-        @touchstart="handleTouchStart"
-        @touchend="handleTouchEnd"
-        :style="cssVars"
-        tabindex="0"
-      >
-      <v-text-field
-        v-if="open"
-        v-model="searchText"
-        class="search-text-input"
-        label="Enter location name"
-      ></v-text-field>
-      <font-awesome-icon
-        v-if="open"
-        icon="times"
-        size="lg"
-        :class="['fa-icon']"
-        @click="open = false"
-      ></font-awesome-icon>
-      <font-awesome-icon
-        :icon="open ? 'check' : 'magnifying-glass'"
-        size="lg"
-        :class="['fa-icon']"
-        @click="() => {
-          if (!open) {
-            open = true;
-          } else {
-            $emit('text-update', searchText);
-            searchText = null;
-            open = false;
-          }
-        }"
-      ></font-awesome-icon>
-      </div>
-    </template>
-    <span>{{ tooltipText }}</span>
-  </v-tooltip>
+<div
+  class="'forward-geocoding-wrapper"
+  :style="cssVars"
+  tabindex="0"
+>
+  <v-text-field
+    v-model="searchText"
+    class="search-text-input"
+    label="Enter a location"
+  ></v-text-field>
+  <font-awesome-icon
+    icon="magnifying-glass"
+    size="lg"
+    class="fa-icon"
+    @click="() => $emit('text-update', searchText)"
+  ></font-awesome-icon>
+  <slot name="search-results"></slot>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VTooltip } from "vuetify/components/VTooltip";
 import { VTextField } from "vuetify/components/VTextField";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 export default defineComponent({
 
   components: {
-    'v-tooltip': VTooltip,
     'v-text-field': VTextField,
     'font-awesome-icon': FontAwesomeIcon
   },
 
   props: {
-    modelValue: { type: Boolean, required: false },
     color: { type: String, default: "#ffffff" },
     focusColor: { type: String, default: "#ffffff" },
     backgroundColor: { type: String, default: "#040404" },
-    longPressTimeMs: { type: Number, default: 500 },
-    tooltipText: { type: String, required: false },
-    tooltipLocation: { type: String, default: "start" },
-    tooltipOnClick: { type: Boolean, default: false },
-    tooltipOnFocus: { type: Boolean, default: false },
-    tooltipOnHover: { type: Boolean, default: true },
-    tooltipOffset: { type: [String, Number], default: 0 },
-    showTooltip: { type: Boolean, default: true },
-  },
-
-  methods: {
-    updateValue() {
-      if (this.modelValue === undefined) { return; }
-      this.$emit('update:modelValue', !this.modelValue); 
-    },
-
-    handleAction() {
-      this.updateValue();
-      this.$emit('activate');
-    },
-
-    handleTouchStart() {
-      this.longPressTimeout = setTimeout(() => {
-        this.tooltip = true;
-      }, this.longPressTimeMs);
-    },
-
-    handleTouchEnd() {
-      if (this.longPressTimeout) {
-        clearTimeout(this.longPressTimeout);
-        this.longPressTimeout = null;
-      }
-      this.tooltip = false;
-    }
   },
 
   data() {
     return {
-      tooltip: false,
-      open: false,
       searchText: null as string | null,
-      longPressTimeout: null as ReturnType<typeof setTimeout> | null
     };
   },
 
@@ -129,11 +55,6 @@ export default defineComponent({
         "--focus-shadow": 'transparent',
       };
     },
-
-    buttonID() {
-      const id = this.$attrs['id'];
-      return id ? `${id}-button` : null;
-    }
   }
 
 });
@@ -153,6 +74,7 @@ export default defineComponent({
   pointer-events: auto;
   border-radius: 20px;
   gap: 8px;
+  position: relative;
 
   &:hover {
     cursor: pointer;
diff --git a/src/main.ts b/src/main.ts
index bbd8892f..377b5b42 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -63,7 +63,6 @@ import {
   faAnglesLeft,
   faAnglesRight,
   faMagnifyingGlass,
-  faCheck,
 
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -97,7 +96,6 @@ library.add(faGaugeHigh);
 library.add(faAnglesLeft);
 library.add(faAnglesRight);
 library.add(faMagnifyingGlass);
-library.add(faCheck);
 
 /** v-hide directive taken from https://www.ryansouthgate.com/2020/01/30/vue-js-v-hide-element-whilst-keeping-occupied-space/ */
 // Extract the function out, up here, so I'm not writing it twice

From 39e6abb7a248b3a81e1c75ffadc17637fdd92245 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Mar 2024 16:33:35 -0400
Subject: [PATCH 07/55] Move forward geocoding functionality back into main
 component.

---
 src/ForwardGeocodingInput.vue | 104 ----------------------------------
 src/SolarEclipse2024.vue      |  41 ++++++++++++--
 2 files changed, 35 insertions(+), 110 deletions(-)
 delete mode 100644 src/ForwardGeocodingInput.vue

diff --git a/src/ForwardGeocodingInput.vue b/src/ForwardGeocodingInput.vue
deleted file mode 100644
index bb9ecebe..00000000
--- a/src/ForwardGeocodingInput.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-<div
-  class="'forward-geocoding-wrapper"
-  :style="cssVars"
-  tabindex="0"
->
-  <v-text-field
-    v-model="searchText"
-    class="search-text-input"
-    label="Enter a location"
-  ></v-text-field>
-  <font-awesome-icon
-    icon="magnifying-glass"
-    size="lg"
-    class="fa-icon"
-    @click="() => $emit('text-update', searchText)"
-  ></font-awesome-icon>
-  <slot name="search-results"></slot>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { VTextField } from "vuetify/components/VTextField";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-export default defineComponent({
-
-  components: {
-    'v-text-field': VTextField,
-    'font-awesome-icon': FontAwesomeIcon
-  },
-
-  props: {
-    color: { type: String, default: "#ffffff" },
-    focusColor: { type: String, default: "#ffffff" },
-    backgroundColor: { type: String, default: "#040404" },
-  },
-
-  data() {
-    return {
-      searchText: null as string | null,
-    };
-  },
-
-  // Since our colors are used in compound values like e.g. box-shadows,
-  // we need to directly bind to CSS variables
-  computed: {
-    cssVars() {
-      return {
-        "--color": this.color,
-        "--background-color": this.backgroundColor,
-        "--focus-color": this.focusColor,
-        "--active-shadow": 'transparent',
-        "--focus-shadow": 'transparent',
-      };
-    },
-  }
-
-});
-</script>
-
-<style lang="less">
-.forward-geocoding-wrapper {
-  width: fit-content;
-  color: var(--color);
-  border-color: var(--color);
-  background: var(--background-color);
-  padding: 6px 8px;
-  border: 1px solid var(--color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: auto;
-  border-radius: 20px;
-  gap: 8px;
-  position: relative;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:focus {
-    color: var(--focus-color);
-    border-color: var(--focus-color);
-  }
-
-  &.active {
-    box-shadow: 0px 0px 10px 3px var(--active-shadow);
-
-    &:focus {
-      box-shadow: 0px 0px 10px 3px var(--focus-shadow);
-    }
-  }
-}
-
-.v-text-field {
-  width: 250px;
-
-  & .v-input__details {
-    display: none;
-  }
-}
-</style>
diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 76c497bf..045ea55e 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -625,6 +625,26 @@
     ></WorldWideTelescope>
     <div>
       <div id="left-buttons-wrapper" :class="[!showGuidedContent ?'budge' : '']">
+        <div
+          id="forward-geocoding-container"
+        >
+          <v-text-field
+            v-model="searchText"
+            class="forward-geocoding-input"
+            label="Enter a location"
+            :color="accentColor"
+            bg-color="black"
+          ></v-text-field>
+          <font-awesome-icon
+            icon="magnifying-glass"
+            size="lg"
+            @click="() => {
+              if (searchText !== null && searchText.length > 0) {
+                updateFromSearchText(searchText);
+              }
+            }"
+          ></font-awesome-icon>
+        </div>
         <icon-button
           id="share"
           fa-icon="share-nodes"
@@ -659,11 +679,6 @@
           }"
           faSize="1x"
         ></icon-button>
-        <forward-geocoding-input
-          :color="accentColor"
-          :focusColor="accentColor"
-          @text-update="(searchText: string) => updateFromSearchText(searchText)"
-        ></forward-geocoding-input>
       </div>
       <div id="location-progress" :class="[!showGuidedContent ?'budge' : '']">
         <geolocation-button
@@ -1654,7 +1669,7 @@ export default defineComponent({
       positionSet: false,
       imagesetFolder: null as Folder | null,
 
-      showSearchInput: false,
+      searchText: null as string | null,
       showMapTooltip: false,
       showTextTooltip: false,
       showMapSelector: false,
@@ -5288,4 +5303,18 @@ a {
 .icon-wrapper {
   width: fit-content;
 }
+
+#forward-geocoding-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 10px;
+  padding: 0px 10px;
+  align-items: center;
+  width: fit-content;
+  color: var(--accent-color);
+  background-color: black;
+  border: 1px solid var(--accent-color);
+  border-radius: 10px;
+}
 </style>

From 6d198ce8937158d34c78e9ca990bfd22c115f194 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Mar 2024 16:51:43 -0400
Subject: [PATCH 08/55] Selecting a location from the search results is
 functional. Need to clean up the display.

---
 src/SolarEclipse2024.vue | 56 +++++++++++++++++++---------------------
 src/main.ts              |  2 --
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 045ea55e..b16ea7b7 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -640,10 +640,21 @@
             size="lg"
             @click="() => {
               if (searchText !== null && searchText.length > 0) {
-                updateFromSearchText(searchText);
+                forwardGeocodingSearch(searchText);
               }
             }"
           ></font-awesome-icon>
+          <div
+            id="forward-geocoding-results"
+          >
+            <div
+              v-for="(feature, index) in searchResults?.features ?? []"
+              :key="index"
+              @click="locationDeg = { longitudeDeg: feature.center[0], latitudeDeg: feature.center[1] }"
+            >
+              {{ feature.place_name }}
+            </div>
+          </div>
         </div>
         <icon-button
           id="share"
@@ -1420,10 +1431,12 @@ const R2D = 180 / Math.PI;
 export interface MapBoxFeature {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   place_type: string[];
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  place_name: string;
   text: string;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   properties: { short_code: string; };
-  center?: [number, number];
+  center: [number, number];
 }
 
 export interface MapBoxFeatureCollection {
@@ -1670,6 +1683,7 @@ export default defineComponent({
       imagesetFolder: null as Folder | null,
 
       searchText: null as string | null,
+      searchResults: null as MapBoxFeatureCollection | null,
       showMapTooltip: false,
       showTextTooltip: false,
       showMapSelector: false,
@@ -3298,34 +3312,21 @@ export default defineComponent({
       }
     },
 
-    async geocodingInfoForSearch(searchText: string): Promise<ForwardGeocodingInfo | null> {
+    async geocodingInfoForSearch(searchText: string): Promise<MapBoxFeatureCollection | null> {
       const accessToken = process.env.VUE_APP_MAPBOX_ACCESS_TOKEN;
       const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${accessToken}`;
-      const geocodingInfo = await fetch(url)
+      return fetch(url)
         .then(response => response.json())
         .then((result: MapBoxFeatureCollection) => {
-          const center = result.features[0]?.center;
-          if (result.features.length === 0 || !center) {
-            return null;
-          }
-          console.log(result);
-          console.log(this.mapboxLocationText(result));
-          return {
-            location: center,
-            text: this.mapboxLocationText(result)
-          };
+          return result;
         })
         .catch((_err) => null);
-
-      return geocodingInfo;
     },
 
-    updateFromSearchText(searchText: string) {
+    forwardGeocodingSearch(searchText: string) {
       this.geocodingInfoForSearch(searchText).then((info) => {
         console.log(info);
-        if (info === null) { return; }
-        this.locationDeg = { longitudeDeg: info.location[0], latitudeDeg: info.location[1] };
-        this.selectedLocationText = info.text;
+        this.searchResults = info;
       });
     },
     
@@ -3359,15 +3360,6 @@ export default defineComponent({
       this.selectedLocationText = await this.textForLocation(this.locationDeg.longitudeDeg, this.locationDeg.latitudeDeg);
     },
 
-    async updateFromForwardGeocoding(searchText: string) {
-      const info = await this.geocodingInfoForSearch(searchText);
-      if (info === null) {
-        return;
-      }
-      this.locationDeg = { latitudeDeg: info.location[0], longitudeDeg: info.location[1] };
-      this.selectedLocationText = info.text;
-    },
-    
     niceRound(val: number) {
       // rounding routine specifically for the playback rate
       const abs = Math.abs(val);
@@ -5305,16 +5297,22 @@ a {
 }
 
 #forward-geocoding-container {
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   gap: 10px;
   padding: 0px 10px;
   align-items: center;
+  justify-content: center;
   width: fit-content;
   color: var(--accent-color);
   background-color: black;
   border: 1px solid var(--accent-color);
   border-radius: 10px;
+
+  .v-text-field {
+    width: 250px;
+  }
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index 377b5b42..3e9cdce5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,7 +13,6 @@ import HoverTooltip from "./HoverTooltip.vue";
 import CloudCover from "./CloudCover.vue";
 import DefineTerm from "./DefineTerm.vue";
 import PlaybackControl from "./PlaybackControl.vue";
-import ForwardGeocodingInput from "./ForwardGeocodingInput.vue";
 
 import "./polyfills";
 
@@ -146,6 +145,5 @@ createApp(SolarEclipse2023, {
   .component('cloud-cover', CloudCover)
   .component('define-term', DefineTerm)
   .component('playback-control', PlaybackControl)
-  .component('forward-geocoding-input', ForwardGeocodingInput)
   // Mount
   .mount("#app");

From b3a13ca7383e6b8092d37d2ea671ea0a98c89cae Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Mar 2024 17:16:09 -0400
Subject: [PATCH 09/55] Set up UI for search results and do some minor
 refactoring.

---
 src/SolarEclipse2024.vue | 113 +++++++++++++++++++++++++++------------
 1 file changed, 80 insertions(+), 33 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index b16ea7b7..50adc78e 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -628,31 +628,34 @@
         <div
           id="forward-geocoding-container"
         >
-          <v-text-field
-            v-model="searchText"
-            class="forward-geocoding-input"
-            label="Enter a location"
-            :color="accentColor"
-            bg-color="black"
-          ></v-text-field>
-          <font-awesome-icon
-            icon="magnifying-glass"
-            size="lg"
-            @click="() => {
-              if (searchText !== null && searchText.length > 0) {
-                forwardGeocodingSearch(searchText);
-              }
-            }"
-          ></font-awesome-icon>
           <div
-            id="forward-geocoding-results"
+            id="forward-geocoding-input-row"
           >
+            <v-text-field
+              v-model="searchText"
+              class="forward-geocoding-input"
+              label="Enter a location"
+              :color="accentColor"
+              bg-color="black"
+              @keyup.enter="() => performForwardGeocodingSearch()"
+            ></v-text-field>
+            <font-awesome-icon
+              icon="magnifying-glass"
+              size="lg"
+              @click="() => performForwardGeocodingSearch()"
+            ></font-awesome-icon>
             <div
-              v-for="(feature, index) in searchResults?.features ?? []"
-              :key="index"
-              @click="locationDeg = { longitudeDeg: feature.center[0], latitudeDeg: feature.center[1] }"
+              id="forward-geocoding-results"
+              v-if="searchResults !== null"
             >
-              {{ feature.place_name }}
+              <div
+                v-for="(feature, index) in searchResults.features"
+                class="forward-geocoding-result"
+                :key="index"
+                @click="() => setLocationFromSearchFeature(feature)"
+              >
+                {{ feature.place_name }}
+              </div>
             </div>
           </div>
         </div>
@@ -3314,7 +3317,7 @@ export default defineComponent({
 
     async geocodingInfoForSearch(searchText: string): Promise<MapBoxFeatureCollection | null> {
       const accessToken = process.env.VUE_APP_MAPBOX_ACCESS_TOKEN;
-      const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${accessToken}`;
+      const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${accessToken}&types=place`;
       return fetch(url)
         .then(response => response.json())
         .then((result: MapBoxFeatureCollection) => {
@@ -3323,12 +3326,32 @@ export default defineComponent({
         .catch((_err) => null);
     },
 
-    forwardGeocodingSearch(searchText: string) {
-      this.geocodingInfoForSearch(searchText).then((info) => {
-        console.log(info);
-        this.searchResults = info;
+    performForwardGeocodingSearch() {
+      if (this.searchText === null || this.searchText.length === 0) {
+        return;
+      }
+      this.geocodingInfoForSearch(this.searchText).then((info) => {
+        if (info !== null && info.features?.length === 1) {
+          this.setLocationFromSearchFeature(info.features[0]);
+        } else {
+          this.searchResults = info;
+        }
       });
     },
+
+    setLocationFromFeature(feature: MapBoxFeature) {
+      this.locationDeg = { longitudeDeg: feature.center[0], latitudeDeg: feature.center[1] };
+    },
+
+    clearSearchData() {
+      this.searchResults = null;
+      this.searchText = null;
+    },
+
+    setLocationFromSearchFeature(feature: MapBoxFeature) {
+      this.setLocationFromFeature(feature);
+      this.clearSearchData();
+    },
     
     decreasePlaybackRate() {
       this.forceRate = false;
@@ -5298,13 +5321,6 @@ a {
 
 #forward-geocoding-container {
   position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  gap: 10px;
-  padding: 0px 10px;
-  align-items: center;
-  justify-content: center;
   width: fit-content;
   color: var(--accent-color);
   background-color: black;
@@ -5313,6 +5329,37 @@ a {
 
   .v-text-field {
     width: 250px;
+    height: 75px;
+  }
+
+  #forward-geocoding-input-row {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    padding: 0px 10px;
+    align-items: center;
+  }
+
+  #forward-geocoding-results {
+    position: absolute;
+    top: 75px;
+    left: 0;
+    width: 100%;
+    background: black;
+    border: 1px solid var(--accent-color);
+    border-radius: 10px;
+    padding: 0px 10px;
+
+    .forward-geocoding-result {
+      border-bottom: 1px solid var(--accent-color);
+      border-top: 1px solid var(--accent-color);
+      font-size: 10pt;
+      pointer-events: auto;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
   }
 }
 </style>

From 525cf21b747bc098e62c352c9a143b812d54ba47 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Mar 2024 17:57:30 -0400
Subject: [PATCH 10/55] More adjustments to the forward geocoding UI.

---
 src/SolarEclipse2024.vue | 59 +++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 50adc78e..03f7459e 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -635,27 +635,29 @@
               v-model="searchText"
               class="forward-geocoding-input"
               label="Enter a location"
-              :color="accentColor"
               bg-color="black"
+              :color="accentColor"
               @keyup.enter="() => performForwardGeocodingSearch()"
+              :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon
               icon="magnifying-glass"
               size="lg"
+              :color="searchText && searchText.length > 2 ? accentColor : 'gray'"
               @click="() => performForwardGeocodingSearch()"
             ></font-awesome-icon>
+          </div>
+          <div
+            id="forward-geocoding-results"
+            v-if="searchResults !== null"
+          >
             <div
-              id="forward-geocoding-results"
-              v-if="searchResults !== null"
+              v-for="(feature, index) in searchResults.features"
+              class="forward-geocoding-result"
+              :key="index"
+              @click="() => setLocationFromSearchFeature(feature)"
             >
-              <div
-                v-for="(feature, index) in searchResults.features"
-                class="forward-geocoding-result"
-                :key="index"
-                @click="() => setLocationFromSearchFeature(feature)"
-              >
-                {{ feature.place_name }}
-              </div>
+              {{ feature.place_name }}
             </div>
           </div>
         </div>
@@ -1687,6 +1689,8 @@ export default defineComponent({
 
       searchText: null as string | null,
       searchResults: null as MapBoxFeatureCollection | null,
+      searchErrorMessage: null as string | null,
+
       showMapTooltip: false,
       showTextTooltip: false,
       showMapSelector: false,
@@ -3303,7 +3307,9 @@ export default defineComponent({
           }
           return this.mapboxLocationText(result);
         })
-        .catch((_err) => null);
+        .catch((_err) => {
+          this.searchErrorMessage = "An error occurred while searching";
+        });
       if (mapBoxText) {
         return mapBoxText;
       } else {
@@ -3327,12 +3333,15 @@ export default defineComponent({
     },
 
     performForwardGeocodingSearch() {
-      if (this.searchText === null || this.searchText.length === 0) {
+      if (this.searchText === null || this.searchText.length < 3) {
         return;
       }
       this.geocodingInfoForSearch(this.searchText).then((info) => {
+        console.log(info);
         if (info !== null && info.features?.length === 1) {
           this.setLocationFromSearchFeature(info.features[0]);
+        } else if (info !== null && info.features?.length == 0) {
+          this.searchErrorMessage = "No matching places were found";
         } else {
           this.searchResults = info;
         }
@@ -3346,6 +3355,7 @@ export default defineComponent({
     clearSearchData() {
       this.searchResults = null;
       this.searchText = null;
+      this.searchErrorMessage = null;
     },
 
     setLocationFromSearchFeature(feature: MapBoxFeature) {
@@ -3539,6 +3549,12 @@ export default defineComponent({
       }
     },
 
+    searchText(_text: string | null) {
+      if (this.searchErrorMessage) {
+        this.searchErrorMessage = null;
+      }
+    },
+
     playing(play: boolean) {
       console.log(`${play ? 'Playing:' : 'Stopping:'} at ${this.playbackRate}x real time`);
       this.setClockSync(play);
@@ -5329,7 +5345,7 @@ a {
 
   .v-text-field {
     width: 250px;
-    height: 75px;
+    height: 80px;
   }
 
   #forward-geocoding-input-row {
@@ -5340,20 +5356,25 @@ a {
     align-items: center;
   }
 
+  // For some reason setting width: 100% makes the search results 2px too small
+  // It's probably some Vuetify styling thing
+  // Maybe there's a better workaround, but this gets the job done for now
   #forward-geocoding-results {
     position: absolute;
-    top: 75px;
-    left: 0;
-    width: 100%;
+    top: 70px;
+    left: -1px;
+    width: calc(100% + 2px);
     background: black;
     border: 1px solid var(--accent-color);
-    border-radius: 10px;
+    border-top: 0px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
     padding: 0px 10px;
 
     .forward-geocoding-result {
       border-bottom: 1px solid var(--accent-color);
       border-top: 1px solid var(--accent-color);
-      font-size: 10pt;
+      font-size: 12pt;
       pointer-events: auto;
 
       &:hover {

From bdeeee0731be6408c2639b865cb19697aee32d7a Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 11:15:50 -0400
Subject: [PATCH 11/55] Use a single text-creation algorithm for both forward
 and backward geocoding.

---
 src/SolarEclipse2024.vue | 88 ++++++++++++++++++++++++++--------------
 1 file changed, 58 insertions(+), 30 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 03f7459e..3de0b898 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -638,6 +638,7 @@
               bg-color="black"
               :color="accentColor"
               @keyup.enter="() => performForwardGeocodingSearch()"
+              @blur="searchResults = null"
               :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon
@@ -1438,10 +1439,11 @@ export interface MapBoxFeature {
   place_type: string[];
   // eslint-disable-next-line @typescript-eslint/naming-convention
   place_name: string;
-  text: string;
+  text?: string;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   properties: { short_code: string; };
   center: [number, number];
+  context: MapBoxContextItem[];
 }
 
 export interface MapBoxFeatureCollection {
@@ -1449,9 +1451,14 @@ export interface MapBoxFeatureCollection {
   features: MapBoxFeature[];
 }
 
-export interface ForwardGeocodingInfo {
-  location: [number, number];
+export interface MapBoxContextItem {
+  id: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  mapbox_id: string;
   text: string;
+  wikidata: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  short_code?: string;
 }
 
 
@@ -2750,9 +2757,6 @@ export default defineComponent({
         return;
       }
       this.locationDeg = location;
-      this.textForLocation(this.locationDeg.longitudeDeg, this.locationDeg.latitudeDeg).then((text) => {
-        this.selectedLocationText = text;
-      });
     },
 
     onTimeSliderChange() {
@@ -3264,38 +3268,61 @@ export default defineComponent({
       }
       
     },
-    
 
-    mapboxLocationText(location: MapBoxFeatureCollection): string {
-      const relevantFeatures = location.features.filter(feature => RELEVANT_FEATURE_TYPES.some(type => feature.place_type.includes(type)));
-      const placeFeature = relevantFeatures.find(feature => feature.place_type.includes("place")) ?? (relevantFeatures.find(feature => feature.place_type.includes("postcode")) ?? null);
-      const pieces: string[] = [];
-      if (placeFeature && placeFeature.text) {
-        pieces.push(placeFeature.text);
+    findBestFeature(collection: MapBoxFeatureCollection): MapBoxFeature | null {
+      const relevantFeatures = collection.features.filter(feature => RELEVANT_FEATURE_TYPES.some(type => feature.place_type.includes(type)));
+      const placeFeature = relevantFeatures.find(feature => feature.place_type.includes("place")) ?? (relevantFeatures.find(feature => feature.place_type.includes("postcode")) ?? undefined);
+      if (placeFeature !== undefined) {
+        return placeFeature;
+      }
+      const regionFeature = relevantFeatures.find(feature => feature.place_type.includes("region"));
+      if (regionFeature !== undefined) {
+        return regionFeature;
       }
       const countryFeature = relevantFeatures.find(feature => feature.place_type.includes("country"));
-      if (countryFeature) {
-        let countryText: string | null = countryFeature.text;
-        if (NA_COUNTRIES.includes(countryText)) {
-          countryText = null;
-          const regionFeature = relevantFeatures.find(feature => feature.place_type.includes("region"));
-          if (regionFeature) {
-            let stateCode = regionFeature.properties.short_code as string;
-            if (stateCode) {
-              if (NA_ABBREVIATIONS.some(abbr => stateCode.startsWith(abbr))) {
-                stateCode = stateCode.substring(3);
-              }
-              pieces.push(stateCode);
-            }
+      if (countryFeature !== undefined) {
+        return countryFeature;
+      }
+      return null;
+    },
+
+    textForMapboxFeature(feature: MapBoxFeature): string {
+      const pieces: string[] = [];
+      if (feature.text) {
+        pieces.push(feature.text);
+      }
+      feature.context.forEach(item => {
+        const itemType = item.id.split(".")[0];
+        if (!RELEVANT_FEATURE_TYPES.includes(itemType)) {
+          return;
+        }
+        let text = null as string | null;
+        const shortCode = item.short_code;
+        if (itemType === "region" && shortCode != null) {
+          if (NA_ABBREVIATIONS.some(abbr => shortCode.startsWith(abbr))) {
+            text = shortCode.substring(3);
+          }
+        } else if (itemType === "country") {
+          const itemText = item.text;
+          if (!NA_COUNTRIES.includes(itemText)) {
+            text = itemText; 
           }
         }
-        if (countryText) {
-          pieces.push(countryText);
+        if (text !== null) {
+          pieces.push(text);
         }
-      }
+      });
       return pieces.join(", ");
     },
 
+    textForMapboxResults(results: MapBoxFeatureCollection): string {
+      const feature = this.findBestFeature(results);
+      if (feature === null) {
+        return "";
+      }
+      return this.textForMapboxFeature(feature);
+    },
+    
     async textForLocation(longitudeDeg: number, latitudeDeg: number): Promise<string> {
       const accessToken = process.env.VUE_APP_MAPBOX_ACCESS_TOKEN;
       const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${longitudeDeg},${latitudeDeg}.json?access_token=${accessToken}`;
@@ -3305,7 +3332,7 @@ export default defineComponent({
           if (result.features.length === 0) {
             return null;
           }
-          return this.mapboxLocationText(result);
+          return this.textForMapboxResults(result);
         })
         .catch((_err) => {
           this.searchErrorMessage = "An error occurred while searching";
@@ -3525,6 +3552,7 @@ export default defineComponent({
       this.playing = false;
       // this.sunOffset = null;
       this.updateWWTLocation();
+      this.updateSelectedLocationText();
 
       // We need to let the location update before we redraw the horizon and overlay
       // Not a huge fan of having to do this, but we really need a frame render to update e.g. sun/moon positions

From 540945d992735389bb37983028bfedbba6ab03f2 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 11:52:34 -0400
Subject: [PATCH 12/55] Some more tweaking of the forward geocoding
 functionality.

---
 src/SolarEclipse2024.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 3de0b898..b1af3fc7 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -638,7 +638,6 @@
               bg-color="black"
               :color="accentColor"
               @keyup.enter="() => performForwardGeocodingSearch()"
-              @blur="searchResults = null"
               :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon
@@ -2757,6 +2756,7 @@ export default defineComponent({
         return;
       }
       this.locationDeg = location;
+      this.updateSelectedLocationText();
     },
 
     onTimeSliderChange() {
@@ -3364,7 +3364,6 @@ export default defineComponent({
         return;
       }
       this.geocodingInfoForSearch(this.searchText).then((info) => {
-        console.log(info);
         if (info !== null && info.features?.length === 1) {
           this.setLocationFromSearchFeature(info.features[0]);
         } else if (info !== null && info.features?.length == 0) {
@@ -3377,6 +3376,9 @@ export default defineComponent({
 
     setLocationFromFeature(feature: MapBoxFeature) {
       this.locationDeg = { longitudeDeg: feature.center[0], latitudeDeg: feature.center[1] };
+      this.textForLocation(feature.center[0], feature.center[1]).then((text) => {
+        this.selectedLocationText = text;
+      });
     },
 
     clearSearchData() {
@@ -3552,7 +3554,6 @@ export default defineComponent({
       this.playing = false;
       // this.sunOffset = null;
       this.updateWWTLocation();
-      this.updateSelectedLocationText();
 
       // We need to let the location update before we redraw the horizon and overlay
       // Not a huge fan of having to do this, but we really need a frame render to update e.g. sun/moon positions
@@ -5400,7 +5401,6 @@ a {
     padding: 0px 10px;
 
     .forward-geocoding-result {
-      border-bottom: 1px solid var(--accent-color);
       border-top: 1px solid var(--accent-color);
       font-size: 12pt;
       pointer-events: auto;

From 7523495bee08ca33f9e46ab1c7425f2dccf9ed6e Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 11 Mar 2024 19:58:07 -0400
Subject: [PATCH 13/55] improve css and HTML outline. presentable on mobile

---
 src/AdvancedWeatherView.vue | 382 +++++++++++++++++++-----------------
 1 file changed, 197 insertions(+), 185 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index ce66dbe6..87c9d0f4 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -6,9 +6,9 @@
     >
     <v-card id="advanced-weather-view">
       <v-card-text>
-        <h1 style="padding:0.5em 0.5em">Just how cloudy is it in {{ locationName }} in April?
+        <h1>Just how cloudy is it in {{ locationName }} in April?
         <define-term 
-          width="80ch"
+          width="50%"
           definition='<p class="intro">
           NASAs <a href="https://modis.gsfc.nasa.gov/" target="_blank">MODIS Aqua and Terra</a> satellites 
           provide daily views of the entire surface of the Earth and measure the cloud cover.
@@ -21,136 +21,97 @@
             <v-icon>mdi-help-circle</v-icon>
           </template>
         </define-term>
-      </h1>
+        </h1>
         <!-- top row -->
-        <v-row class="">
-          <v-col cols="5" >
-            <v-row>              
-              <v-col cols="12">
-                
-                <v-col class="sentence-query" col="12">
-                  <label for="statistics">Show me</label>
+        <v-row>
+          
+          <v-col cols="12" sm="4" >
+            <v-row id="query-constructor">              
+              <v-col class="sentence-query" col="12">
+                <label for="statistics">Show me</label>
+                <select 
+                  class="select-box"
+                  name="statistics" 
+                  id="select-statistics" 
+                  v-model="selectedStat"
+                  >
+                  <option disabled value="">Select one</option>
+                  <option value="mean">the Mean</option>
+                  <option value="median">the Median</option>
+                  <option value="singleyear">a Single Year</option>
+                </select>
+                  <label for="years">of the cloud cover for </label>
                   <select 
+                    v-if="selectedStat !== 'singleyear'"
                     class="select-box"
-                    name="statistics" 
-                    id="select-statistics" 
-                    v-model="selectedStat"
+                    name="years" 
+                    id="select-years" 
+                    v-model="dataSubset"
                     >
                     <option disabled value="">Select one</option>
-                    <option value="mean">the Mean</option>
-                    <option value="median">the Median</option>
-                    <option value="singleyear">a Single Year</option>
+                    <option
+                      v-for="[key, value] in mapSubsets" :key="key" :value="key">{{ value }}</option>
+                  </select>
+                  <select 
+                    v-else
+                    class="select-box"
+                    name="years" 
+                    id="select-years" 
+                    v-model="selectedYear"
+                    >
+                    <option disabled value="">Select one</option>
+                    <option
+                      v-for="year in availableYears" :key="year" :value="year">{{ year }}
+                    </option>
                   </select>
-                    <label for="years">of the cloud cover for </label>
-                    <select 
-                      v-if="selectedStat !== 'singleyear'"
-                      class="select-box"
-                      name="years" 
-                      id="select-years" 
-                      v-model="dataSubset"
-                      >
-                      <option disabled value="">Select one</option>
-                      <option
-                        v-for="[key, value] in mapSubsets" :key="key" :value="key">{{ value }}</option>
-                    </select>
-                    <select 
-                      v-else
-                      class="select-box"
-                      name="years" 
-                      id="select-years" 
-                      v-model="selectedYear"
-                      >
-                      <option disabled value="">Select one</option>
-                      <option
-                        v-for="year in availableYears" :key="year" :value="year">{{ year }}
-                      </option>
-                    </select>
-                  </v-col>
-                
               </v-col>
-              <v-col class="d-flex align-center justify-center">
+            </v-row>
+            
+            <v-row id="modis-radio-group">
               <v-btn 
-                class="elevation-5 force-vuetify-small-font"
+                class="elevation-5"
                 variant="flat"
                 :disabled="!(needToUpdate || !showCloudCover)"
-                size="large"
                 color="#eac402" 
-                @click="updateData()">{{ displayData ? (needToUpdate ? 'Update Map' : 'Shown on Map') : 'Show on Map'  }}</v-btn>
+                @click="updateData()"
+                >
+                {{ displayData ? (needToUpdate ? 'Update Map' : 'Shown on Map') : 'Show on Map'  }}
+              </v-btn>
+                
               <v-radio-group 
-                class="force-vuetify-small-font"
+                class="modis-radio"
                 v-model="modisDataSet"  
-                inline
-                density="comfortable"
+                density="compact"
                 persistent-hint
+                inline
                 hint="MODIS Aqua Data Set"
               >
-              <v-radio
-                v-for="[key, value] in modisTimes"
-                class="force-vuetify-small-font"
-                :key="key"
-                :label="value"
-                :value="key"
-                :disabled="false"
-                color="#eac402"
-                hint="MODIS Aqua Data Set"
-              ></v-radio>
-            </v-radio-group>
-              </v-col>
+                <v-radio
+                  v-for="[key, value] in modisTimes"
+                  :key="key"
+                  :label="value"
+                  :value="key"
+                  :disabled="false"
+                  color="#eac402"
+                  density="compact"
+                  hint="MODIS Aqua Data Set"
+                ></v-radio>
+              </v-radio-group>
             </v-row>
             
-            <v-row id="chart-intro" v-if="!displayCharts && displayData">
+            <v-row id="awv-chart-placeholder" v-if="!displayCharts && displayData">
               <hr style="width:100%; margin-block: 1rem;">
-              <h3>Show cloud cover statistics for currently selected location: <strong class="attention">{{ locationName }}</strong></h3>
+              <h4>Show cloud cover statistics for currently selected location: <strong class="attention">{{ locationName }}</strong></h4>
               <v-btn 
-                size="large"
                 density="compact"
                 color="#eac402"
                 append-icon="mdi-chevron-triple-right"
                 @click="displayCharts = true">Show details</v-btn>
-                
             </v-row>
-            <v-row v-if="displayCharts">
-              
-              <div id="awv-cloud-cover-display" class="">
-                <div v-if="true">
-                  <!-- <hr> -->
-                  <h3 v-if="selectedStat !== 'singleyear'"> Cloud Cover for <strong class="attention">{{ locationName }}</strong> for <strong class="attention">{{ mapSubsets.get(dataSubset) }}</strong>:</h3>
-                  <h3 v-else> Cloud Cover for {{ locationName }} in {{ selectedYear }}:</h3>
-
-                  <cloud-cover-line
-                    :value="locationValue"
-                    :label="selectedStat === 'singleyear' ? 'Cloud Cover' : statText.get(selectedStat) ?? 'Cloud Cover'"
-                    :codes="skyCoverCodes"
-                    :ranges="skyCoverCodeRanges"
-                    :icons="skyCoverIcons"
-                    variant="bold"
-                    />
-                </div>
-                <hr>
-                <h3>Cloud Cover for <strong class="attention">{{ locationName }}</strong> for all years:</h3>
-                <!-- cloud cover for all years at location -->
-                <cloud-cover-line
-                  :value="median(cloudDataNearLocation)"
-                  label="Median"
-                  :codes="skyCoverCodes"
-                  :ranges="skyCoverCodeRanges"
-                  :icons="skyCoverIcons"
-                  />
-                
-                <cloud-cover-line
-                  :value="mean(cloudDataNearLocation)"
-                  label="Mean"
-                  :codes="skyCoverCodes"
-                  :ranges="skyCoverCodeRanges"
-                  :icons="skyCoverIcons"
-                  />
-              </div>
-            </v-row>
-              
           </v-col>
           
-          <v-col cols="7">
-            <v-container aspect-ratio="1">
+
+          <v-col id="awv-map" cols="12" sm="8">
             <span id="awv-map-description"> {{ mapDescriptionText }} </span>
             <div class="map-colorbar">
             <location-selector
@@ -180,89 +141,128 @@
                 v-model="showCloudCover"
                 label="Show Cloud Cover"
                 color="#eac402"
-                hint="Show the cloud cover on the map"
+                density="compact"
+                hide-details
                 />
             </div>
-            </v-container>
           </v-col>  
+          
+        </v-row>
+        
+        <v-row v-if="displayCharts">
+          
+          <div id="awv-cloud-cover-display" class="">
+            <div>
+              <!-- <hr> -->
+              <h3 v-if="selectedStat !== 'singleyear'"> Cloud Cover for <strong class="attention">{{ mapSubsets.get(dataSubset) }}</strong>:</h3>
+              <h3 v-else> Cloud Cover for {{ locationName }} in {{ selectedYear }}:</h3>
+
+              <cloud-cover-line
+                :value="locationValue"
+                :label="selectedStat === 'singleyear' ? `${selectedYear}` : statText.get(selectedStat) ?? 'Cloud Cover'"
+                :codes="skyCoverCodes"
+                :ranges="skyCoverCodeRanges"
+                :icons="skyCoverIcons"
+                variant="bold"
+                />
+            </div>
+            <hr>
+            <h3>Cloud Cover for all years:</h3>
+            <!-- cloud cover for all years at location -->
+            <cloud-cover-line
+              :value="median(cloudDataNearLocation)"
+              label="Median"
+              :codes="skyCoverCodes"
+              :ranges="skyCoverCodeRanges"
+              :icons="skyCoverIcons"
+              />
+            
+            <cloud-cover-line
+              :value="mean(cloudDataNearLocation)"
+              label="Mean"
+              :codes="skyCoverCodes"
+              :ranges="skyCoverCodeRanges"
+              :icons="skyCoverIcons"
+              />
+          </div>
         </v-row>
         
-        <v-row v-if="displayCharts" class="">
+        <v-row v-if="displayCharts">
           <v-col cols="12" sm="6" class="graph-col">
-          <bar-chart
-            id="cloud-histogram"
-            class="elevation-5"
-            :labels="skyCoverCodes.map((v) => v.includes('/') ? [v.split('/')[0] + '/', v.split('/')[1]]: v)"
-            :data-label="hideHistogramSubset ? 'All Years' : 'Other Years'"
-            :histogram-data="cloudDataHistogram.map((v, _i) => locationHistogram.length > 0 ? v - locationHistogram[_i] : v)"
-            :colors="hideHistogramSubset ? colorMap : ['#aaa']"
-            :options = "{scales: {y: {beginAtZero: true, max:20}}}"
-            :bar-annotations="false"
-            :bar-offset="1"
-            :barAnnotationLabel="(v:number) => (v * 100/20).toFixed(0) + '%'"
-            stacked
-            :title="`Cloud Conditions for ${locationName} ${allYears[0]} - ${allYears[allYears.length - 1]}`"
-            :other-datasets="hideHistogramSubset ? [] : [
-              {
-                label: mapSubsets.get(dataSubset),
-                data: locationHistogram,
-                backgroundColor: colorMap, //'#c51b8a',
-                borderColor: 'black', //'#c51b8a',
-                borderWidth: 1,
-              }
-            ]"
-            />
+            <bar-chart
+              id="cloud-histogram"
+              class="elevation-5"
+              :labels="skyCoverCodes.map((v) => v.includes('/') ? [v.split('/')[0] + '/', v.split('/')[1]]: v)"
+              :data-label="hideHistogramSubset ? 'All Years' : 'Other Years'"
+              :histogram-data="cloudDataHistogram.map((v, _i) => locationHistogram.length > 0 ? v - locationHistogram[_i] : v)"
+              :colors="hideHistogramSubset ? colorMap : ['#aaa']"
+              :options = "{scales: {y: {beginAtZero: true, max:20}}}"
+              :bar-annotations="false"
+              :bar-offset="1"
+              :barAnnotationLabel="(v:number) => (v * 100/20).toFixed(0) + '%'"
+              stacked
+              :title="`Cloud Conditions for ${locationName} ${allYears[0]} - ${allYears[allYears.length - 1]}`"
+              :other-datasets="hideHistogramSubset ? [] : [
+                {
+                  label: mapSubsets.get(dataSubset),
+                  data: locationHistogram,
+                  backgroundColor: colorMap, //'#c51b8a',
+                  borderColor: 'black', //'#c51b8a',
+                  borderWidth: 1,
+                }
+              ]"
+              />
           </v-col>
           <v-col cols="12" sm="6" class="graph-col">
-          <line-chart
-            class="elevation-5"
-            :title="`Percent Cloud Cover for ${locationName}`"
-            :scatter-data="cloudDataNearLocation"
-            :scatter-options="{radius: 4 }"
-            :scatter-label="!subsetSelected ? 'All Years' : 'Other Years'"
-            :subsets="!subsetSelected ? [] :
-              [allYears.map((year) => selectedYears.includes(year))]"
-            :subset-styles="[{backgroundColor: 'red', radius: 5}]"
-            :y-range="[-.1,1.1]"
-            :x-range="[new Date(2003, 1, 8), new Date(2023, 7, 8)]"
+            <line-chart
+              class="elevation-5"
+              :title="`Percent Cloud Cover for ${locationName}`"
+              :scatter-data="cloudDataNearLocation"
+              :scatter-options="{radius: 4 }"
+              :scatter-label="!subsetSelected ? 'All Years' : 'Other Years'"
+              :subsets="!subsetSelected ? [] :
+                [allYears.map((year) => selectedYears.includes(year))]"
+              :subset-styles="[{backgroundColor: 'red', radius: 5}]"
+              :y-range="[-.1,1.1]"
+              :x-range="[new Date(2003, 1, 8), new Date(2023, 7, 8)]"
 
-            :y-axis-options="{
-              ticks: {callback: (value: number, index: number) => {
-                        if (value < 0 || value > 1) {return;}
-                        return (value * 100).toFixed(0) + '%';
-                        }}}"
-            timeseries
-            color="grey"
-            show-scatter
-            :annotations="[...skyCoverCodeRanges.map(([_,[min,max]],i) => {
-              return {
-                type: 'box',
-                yMin: min/100,
-                yMax: max/100,
-                backgroundColor: colorMap[i],
-                drawTime: 'beforeDraw',
-                borderColor: colorMap[i]
-              }
-            }),
-            ...skyCoverCodeRanges.map(([label,[min,max]],i) => {
-              return {
-                type: 'line',
-                borderWidth: 0,
-                drawTime: 'beforeDatasetsDraw',
-                
-                label: {
-                  display: true,
-                  color: 'black',
-                  backgroundColor: 'transparent',
-                  content: skyCoverCodes[i],
-                },
-                xMin: new Date(2023, 1, 8),
-                yMin: (min + max) / 200,
-                yMax: (min + max) / 200,
-              };
-            })
-          ]"
-            />
+              :y-axis-options="{
+                ticks: {callback: (value: number, index: number) => {
+                          if (value < 0 || value > 1) {return;}
+                          return (value * 100).toFixed(0) + '%';
+                          }}}"
+              timeseries
+              color="grey"
+              show-scatter
+              :annotations="[...skyCoverCodeRanges.map(([_,[min,max]],i) => {
+                return {
+                  type: 'box',
+                  yMin: min/100,
+                  yMax: max/100,
+                  backgroundColor: colorMap[i],
+                  drawTime: 'beforeDraw',
+                  borderColor: colorMap[i]
+                }
+              }),
+              ...skyCoverCodeRanges.map(([label,[min,max]],i) => {
+                return {
+                  type: 'line',
+                  borderWidth: 0,
+                  drawTime: 'beforeDatasetsDraw',
+                  
+                  label: {
+                    display: true,
+                    color: 'black',
+                    backgroundColor: 'transparent',
+                    content: skyCoverCodes[i],
+                  },
+                  xMin: new Date(2023, 1, 8),
+                  yMin: (min + max) / 200,
+                  yMax: (min + max) / 200,
+                  };
+                })
+              ]"
+              />
           </v-col>
         </v-row>
         
@@ -501,7 +501,7 @@ export default defineComponent({
       mapDescriptionText: '',
       locationName: '',
       inBounds: false,
-      displayData: false,
+      displayData: true,
       displayCharts: false,
       showCloudCover: true,
       transferFunction: this.transferFunction8,
@@ -1211,6 +1211,11 @@ export default defineComponent({
 #advanced-weather-view {
   --color: #eac402;
   font-size: var(--default-font-size);
+  --smaller-font: calc(0.8 * var(--default-font-size));
+  
+  h1 {
+    font-size: 1.5em;
+  }
   
   p.intro {
     font-size: 1em;
@@ -1218,17 +1223,24 @@ export default defineComponent({
   
   strong.attention {
     font-weight: bold;
-    font-size: 1em;
     color: var(--color);
   }
   
-  #chart-intro {
-    
-  }
     
   .graph-col {
     height: 300px;
   }
+  
+  .v-btn {
+    font-size: var(--smaller-font);
+  }
+  
+  .modis-radio {
+    margin-top: 0.125em;
+  }
+  .v-label {
+    font-size: var(--smaller-font);
+  }
 
   #awv-map-description {
     font-size: 1em;
@@ -1254,7 +1266,7 @@ export default defineComponent({
     font-size: 1.125em;
     
     
-    > * {
+    >label, >select {
       margin: 0.25em auto;
     }
     

From 09d9686975d879e3eced7794d7377e655da1653d Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 11 Mar 2024 20:03:20 -0400
Subject: [PATCH 14/55] remove show map checkbox and give larger map

---
 src/AdvancedWeatherView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 87c9d0f4..2272643e 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -135,7 +135,7 @@
                 :cmap="(x: number) => [`hsla(0,0%,100%, 1)`, transferFunction(x)]"
                 />
             </div>
-              <div class="d-flex align-center justify-end">
+              <div v-if="false" class="d-flex align-center justify-end">
               <v-checkbox
                 v-if="displayData"
                 v-model="showCloudCover"
@@ -1254,7 +1254,7 @@ export default defineComponent({
   
   .map-container {
     contain: strict;
-    aspect-ratio: 2;
+    aspect-ratio: 1.5;
   }
   
   .force-vuetify-small-font {

From 4d091213bbf25a48e6d0a4ca83122d8891d722ac Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 11 Mar 2024 20:09:51 -0400
Subject: [PATCH 15/55] minor fixes

---
 src/AdvancedWeatherView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 2272643e..18c9d692 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -501,7 +501,7 @@ export default defineComponent({
       mapDescriptionText: '',
       locationName: '',
       inBounds: false,
-      displayData: true,
+      displayData: false,
       displayCharts: false,
       showCloudCover: true,
       transferFunction: this.transferFunction8,

From 95a369112bb57b97099bc6635938838193474a31 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 12:02:46 -0400
Subject: [PATCH 16/55] Make location input box smaller.

---
 src/SolarEclipse2024.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index b1af3fc7..b9da5dfb 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -111,6 +111,7 @@
                 class="mr-2 mb-2"
                 v-if="infoPage==1"
                 density="compact"
+                hide-details
                 :color="accentColor"
                 @click="infoPage++"
                 @keyup.enter="infoPage++"
@@ -636,8 +637,12 @@
               class="forward-geocoding-input"
               label="Enter a location"
               bg-color="black"
+              density="compact"
+              hide-details
+              clearable
               :color="accentColor"
               @keyup.enter="() => performForwardGeocodingSearch()"
+              @keyup.esc="searchResults = null"
               :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon
@@ -5373,15 +5378,14 @@ a {
   border-radius: 10px;
 
   .v-text-field {
-    width: 250px;
-    height: 80px;
+    min-width: 200px;
   }
 
   #forward-geocoding-input-row {
     display: flex;
     flex-direction: row;
     gap: 10px;
-    padding: 0px 10px;
+    padding: 5px 10px;
     align-items: center;
   }
 
@@ -5390,7 +5394,7 @@ a {
   // Maybe there's a better workaround, but this gets the job done for now
   #forward-geocoding-results {
     position: absolute;
-    top: 70px;
+    top: 42px;
     left: -1px;
     width: calc(100% + 2px);
     background: black;

From c95984ea3f62bc89901e1aff9775b4fba42c4a6c Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 12:04:02 -0400
Subject: [PATCH 17/55] Clear search results when input is cleared.

---
 src/SolarEclipse2024.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index b9da5dfb..25e96774 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -643,6 +643,7 @@
               :color="accentColor"
               @keyup.enter="() => performForwardGeocodingSearch()"
               @keyup.esc="searchResults = null"
+              @click:clear="searchResults = null"
               :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon

From 2106560702ca99ac351b04be658f112e282a1d5f Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 12:05:31 -0400
Subject: [PATCH 18/55] Also clear search results when input is empty.

---
 src/SolarEclipse2024.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 25e96774..fbae8969 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -3584,10 +3584,13 @@ export default defineComponent({
       }
     },
 
-    searchText(_text: string | null) {
+    searchText(text: string | null) {
       if (this.searchErrorMessage) {
         this.searchErrorMessage = null;
       }
+      if (!text || text.length === 0) {
+        this.searchResults = null;
+      }
     },
 
     playing(play: boolean) {

From 0985b929a91c822ec3fe52c799dbec96b4a30217 Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Wed, 13 Mar 2024 12:47:32 -0400
Subject: [PATCH 19/55] Announce location search on splash screen

---
 src/SolarEclipse2024.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index fbae8969..e253c6b7 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -809,6 +809,10 @@
         
         <div id="splash-screen-guide">
           <v-row>
+            <v-col cols="12">
+              <v-icon icon="mdi-creation" size="small" class="bullet-icon"></v-icon>
+              New! Location Search
+            </v-col>
             <v-col cols="12">
               <font-awesome-icon
                 icon="location-dot"
@@ -4233,9 +4237,9 @@ body {
   }
 
   #splash-screen-guide {
-    margin-block: 1.5em;
+    margin-block: 1em;
     font-size: min(5vw, 4vh);
-    line-height: 140%;
+    line-height: 160%;
     width: 75%;
 
     .v-col{

From f755ae67fd928ce16a8f156c33798a0be79d896e Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 13:52:47 -0400
Subject: [PATCH 20/55] Make search box collapsible. Open by default on desktop
 but not mobile.

---
 src/SolarEclipse2024.vue | 54 ++++++++++++++++++++++++++++++++++------
 src/main.ts              |  3 ++-
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index e253c6b7..8013e9d4 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -628,11 +628,13 @@
       <div id="left-buttons-wrapper" :class="[!showGuidedContent ?'budge' : '']">
         <div
           id="forward-geocoding-container"
+          :style="forwardGeocodingCss"
         >
           <div
             id="forward-geocoding-input-row"
           >
             <v-text-field
+              v-show="searchOpen"
               v-model="searchText"
               class="forward-geocoding-input"
               label="Enter a location"
@@ -640,17 +642,36 @@
               density="compact"
               hide-details
               clearable
+              variant="solo"
               :color="accentColor"
+              @keydown.stop
               @keyup.enter="() => performForwardGeocodingSearch()"
               @keyup.esc="searchResults = null"
               @click:clear="searchResults = null"
               :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon
-              icon="magnifying-glass"
-              size="lg"
-              :color="searchText && searchText.length > 2 ? accentColor : 'gray'"
-              @click="() => performForwardGeocodingSearch()"
+              v-show="searchOpen"
+              icon="close"
+              :size="searchOpen ? 'xl' : '1x'"
+              :color="accentColor"
+              @click="() => {
+                searchOpen = false;
+                clearSearchData();
+              }"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              id="search-icon"
+              :icon="searchOpen ? 'check' : 'magnifying-glass'"
+              :size="searchOpen ? 'xl' : '1x'"
+              :color="!searchOpen || (searchText && searchText.length > 2) ? accentColor : 'gray'"
+              @click="() => {
+                if (searchOpen) {
+                  performForwardGeocodingSearch();
+                } else {
+                  searchOpen = true;
+                }
+              }"
             ></font-awesome-icon>
           </div>
           <div
@@ -1703,6 +1724,7 @@ export default defineComponent({
       positionSet: false,
       imagesetFolder: null as Folder | null,
 
+      searchOpen: false,
       searchText: null as string | null,
       searchResults: null as MapBoxFeatureCollection | null,
       searchErrorMessage: null as string | null,
@@ -1872,6 +1894,10 @@ export default defineComponent({
     queryData.splash = splashQuery !== "false";
   },
 
+  created() {
+    this.searchOpen = !this.mobile;
+  },
+
   mounted() {
     
     if (queryData.latitudeDeg !== undefined && queryData.longitudeDeg !== undefined) {
@@ -2112,6 +2138,11 @@ export default defineComponent({
         '--moon-color': this.moonColor,
       };
     },
+    forwardGeocodingCss() {
+      return {
+        '--fg-container-padding': this.searchOpen ? '5px 10px 12px 10px' : '0px',
+      };
+    },
     wwtControl(): WWTControl {
       return WWTControl.singleton;
     },
@@ -5382,21 +5413,28 @@ a {
   width: fit-content;
   color: var(--accent-color);
   background-color: black;
-  border: 1px solid var(--accent-color);
-  border-radius: 10px;
+  border: 2px solid var(--accent-color);
+  border-radius: 20px;
+  padding: var(--fg-container-padding);
 
   .v-text-field {
-    min-width: 200px;
+    min-width: 150px;
+    width: min(200px, 20vw);
   }
 
   #forward-geocoding-input-row {
     display: flex;
     flex-direction: row;
+    justify-content: space-around;
     gap: 10px;
-    padding: 5px 10px;
     align-items: center;
   }
 
+  #search-icon {
+    padding-inline: calc(0.3 * var(--default-line-height));
+    padding-block: calc(0.4 * var(--default-line-height));
+  }
+
   // For some reason setting width: 100% makes the search results 2px too small
   // It's probably some Vuetify styling thing
   // Maybe there's a better workaround, but this gets the job done for now
diff --git a/src/main.ts b/src/main.ts
index 3e9cdce5..a3aa705e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -62,7 +62,7 @@ import {
   faAnglesLeft,
   faAnglesRight,
   faMagnifyingGlass,
-
+  faCheck,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(faBookOpen);
@@ -95,6 +95,7 @@ library.add(faGaugeHigh);
 library.add(faAnglesLeft);
 library.add(faAnglesRight);
 library.add(faMagnifyingGlass);
+library.add(faCheck);
 
 /** v-hide directive taken from https://www.ryansouthgate.com/2020/01/30/vue-js-v-hide-element-whilst-keeping-occupied-space/ */
 // Extract the function out, up here, so I'm not writing it twice

From bce12df2b1d281acdb6204e5847bd2dd5c647524 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 14:34:36 -0400
Subject: [PATCH 21/55] Remove search field clear button and make search field
 open by default on mobile.

---
 src/SolarEclipse2024.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 8013e9d4..f509815c 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -641,7 +641,6 @@
               bg-color="black"
               density="compact"
               hide-details
-              clearable
               variant="solo"
               :color="accentColor"
               @keydown.stop
@@ -1724,7 +1723,7 @@ export default defineComponent({
       positionSet: false,
       imagesetFolder: null as Folder | null,
 
-      searchOpen: false,
+      searchOpen: true,
       searchText: null as string | null,
       searchResults: null as MapBoxFeatureCollection | null,
       searchErrorMessage: null as string | null,
@@ -1894,10 +1893,6 @@ export default defineComponent({
     queryData.splash = splashQuery !== "false";
   },
 
-  created() {
-    this.searchOpen = !this.mobile;
-  },
-
   mounted() {
     
     if (queryData.latitudeDeg !== undefined && queryData.longitudeDeg !== undefined) {

From 9d6bff6c13adaba34228c5bac6cd67870fcacdbb Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Wed, 13 Mar 2024 15:50:55 -0400
Subject: [PATCH 22/55] Modify icons and positioning of forward geocoding
 icons.

---
 src/SolarEclipse2024.vue | 31 ++++++++++++++++++-------------
 src/main.ts              |  4 ++--
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index f509815c..3c71a516 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -650,18 +650,8 @@
               :error-messages="searchErrorMessage"
             ></v-text-field>
             <font-awesome-icon
-              v-show="searchOpen"
-              icon="close"
-              :size="searchOpen ? 'xl' : '1x'"
-              :color="accentColor"
-              @click="() => {
-                searchOpen = false;
-                clearSearchData();
-              }"
-            ></font-awesome-icon>
-            <font-awesome-icon
-              id="search-icon"
-              :icon="searchOpen ? 'check' : 'magnifying-glass'"
+              id="geocoding-search-icon"
+              icon="magnifying-glass"
               :size="searchOpen ? 'xl' : '1x'"
               :color="!searchOpen || (searchText && searchText.length > 2) ? accentColor : 'gray'"
               @click="() => {
@@ -672,6 +662,17 @@
                 }
               }"
             ></font-awesome-icon>
+            <font-awesome-icon
+              id="geocoding-close-icon"
+              v-show="searchOpen"
+              icon="circle-xmark"
+              :size="searchOpen ? 'xl' : '1x'"
+              color="gray"
+              @click="() => {
+                searchOpen = false;
+                clearSearchData();
+              }"
+            ></font-awesome-icon>
           </div>
           <div
             id="forward-geocoding-results"
@@ -5425,11 +5426,15 @@ a {
     align-items: center;
   }
 
-  #search-icon {
+  #geocoding-search-icon {
     padding-inline: calc(0.3 * var(--default-line-height));
     padding-block: calc(0.4 * var(--default-line-height));
   }
 
+  #geocoding-search-icon:hover, #geocoding-close-icon:hover {
+    cursor: pointer;
+  }
+
   // For some reason setting width: 100% makes the search results 2px too small
   // It's probably some Vuetify styling thing
   // Maybe there's a better workaround, but this gets the job done for now
diff --git a/src/main.ts b/src/main.ts
index a3aa705e..924a6089 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -62,7 +62,7 @@ import {
   faAnglesLeft,
   faAnglesRight,
   faMagnifyingGlass,
-  faCheck,
+  faCircleXmark,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(faBookOpen);
@@ -95,7 +95,7 @@ library.add(faGaugeHigh);
 library.add(faAnglesLeft);
 library.add(faAnglesRight);
 library.add(faMagnifyingGlass);
-library.add(faCheck);
+library.add(faCircleXmark);
 
 /** v-hide directive taken from https://www.ryansouthgate.com/2020/01/30/vue-js-v-hide-element-whilst-keeping-occupied-space/ */
 // Extract the function out, up here, so I'm not writing it twice

From 5e06481b99c301983392e4241a2378dd5e4d1973 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Wed, 13 Mar 2024 17:43:15 -0400
Subject: [PATCH 23/55] improve mobile layout

---
 src/AdvancedWeatherView.vue | 99 +++++++++++++++++++------------------
 src/main.ts                 |  2 +-
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 18c9d692..20f36bc9 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -23,9 +23,9 @@
         </define-term>
         </h1>
         <!-- top row -->
-        <v-row>
-          
-          <v-col cols="12" sm="4" >
+        <v-row class="flex-row-reverse">
+
+          <v-col cols="12" sm="4" :order="2" :order-lg="1">
             <v-row id="query-constructor">              
               <v-col class="sentence-query" col="12">
                 <label for="statistics">Show me</label>
@@ -69,15 +69,16 @@
             
             <v-row id="modis-radio-group">
               <v-btn 
-                class="elevation-5"
+                class="elevation-5 my-2 mb-4"
                 variant="flat"
+                size="small"
                 :disabled="!(needToUpdate || !showCloudCover)"
                 color="#eac402" 
                 @click="updateData()"
                 >
                 {{ displayData ? (needToUpdate ? 'Update Map' : 'Shown on Map') : 'Show on Map'  }}
               </v-btn>
-                
+              
               <v-radio-group 
                 class="modis-radio"
                 v-model="modisDataSet"  
@@ -108,10 +109,47 @@
                 append-icon="mdi-chevron-triple-right"
                 @click="displayCharts = true">Show details</v-btn>
             </v-row>
+            
+            <v-row v-if="displayCharts">  
+              <div id="awv-cloud-cover-display" class="">
+                <div>
+                  <!-- <hr> -->
+                  <h3 v-if="selectedStat !== 'singleyear'"> Cloud Cover for <strong class="attention">{{ mapSubsets.get(dataSubset) }}</strong>:</h3>
+                  <h3 v-else> Cloud Cover for {{ locationName }} in {{ selectedYear }}:</h3>
+
+                  <cloud-cover-line
+                    :value="locationValue"
+                    :label="selectedStat === 'singleyear' ? `${selectedYear}` : statText.get(selectedStat) ?? 'Cloud Cover'"
+                    :codes="skyCoverCodes"
+                    :ranges="skyCoverCodeRanges"
+                    :icons="skyCoverIcons"
+                    variant="bold"
+                    />
+                </div>
+                <hr>
+                <h3>Cloud Cover for all years:</h3>
+                <!-- cloud cover for all years at location -->
+                <cloud-cover-line
+                  :value="median(cloudDataNearLocation)"
+                  label="Median"
+                  :codes="skyCoverCodes"
+                  :ranges="skyCoverCodeRanges"
+                  :icons="skyCoverIcons"
+                  />
+                
+                <cloud-cover-line
+                  :value="mean(cloudDataNearLocation)"
+                  label="Mean"
+                  :codes="skyCoverCodes"
+                  :ranges="skyCoverCodeRanges"
+                  :icons="skyCoverIcons"
+                  />
+              </div>
+            </v-row>
           </v-col>
-          
 
-          <v-col id="awv-map" cols="12" sm="8">
+
+          <v-col id="awv-map" cols="12" sm="8" :order="1" :order-lg="2">
             <span id="awv-map-description"> {{ mapDescriptionText }} </span>
             <div class="map-colorbar">
             <location-selector
@@ -135,9 +173,9 @@
                 :cmap="(x: number) => [`hsla(0,0%,100%, 1)`, transferFunction(x)]"
                 />
             </div>
-              <div v-if="false" class="d-flex align-center justify-end">
+              <div class="d-flex align-center justify-end">
               <v-checkbox
-                v-if="displayData"
+                v-if="displayData || true"
                 v-model="showCloudCover"
                 label="Show Cloud Cover"
                 color="#eac402"
@@ -146,46 +184,8 @@
                 />
             </div>
           </v-col>  
-          
         </v-row>
         
-        <v-row v-if="displayCharts">
-          
-          <div id="awv-cloud-cover-display" class="">
-            <div>
-              <!-- <hr> -->
-              <h3 v-if="selectedStat !== 'singleyear'"> Cloud Cover for <strong class="attention">{{ mapSubsets.get(dataSubset) }}</strong>:</h3>
-              <h3 v-else> Cloud Cover for {{ locationName }} in {{ selectedYear }}:</h3>
-
-              <cloud-cover-line
-                :value="locationValue"
-                :label="selectedStat === 'singleyear' ? `${selectedYear}` : statText.get(selectedStat) ?? 'Cloud Cover'"
-                :codes="skyCoverCodes"
-                :ranges="skyCoverCodeRanges"
-                :icons="skyCoverIcons"
-                variant="bold"
-                />
-            </div>
-            <hr>
-            <h3>Cloud Cover for all years:</h3>
-            <!-- cloud cover for all years at location -->
-            <cloud-cover-line
-              :value="median(cloudDataNearLocation)"
-              label="Median"
-              :codes="skyCoverCodes"
-              :ranges="skyCoverCodeRanges"
-              :icons="skyCoverIcons"
-              />
-            
-            <cloud-cover-line
-              :value="mean(cloudDataNearLocation)"
-              label="Mean"
-              :codes="skyCoverCodes"
-              :ranges="skyCoverCodeRanges"
-              :icons="skyCoverIcons"
-              />
-          </div>
-        </v-row>
         
         <v-row v-if="displayCharts">
           <v-col cols="12" sm="6" class="graph-col">
@@ -501,8 +501,8 @@ export default defineComponent({
       mapDescriptionText: '',
       locationName: '',
       inBounds: false,
-      displayData: false,
-      displayCharts: false,
+      displayData: true,
+      displayCharts: true,
       showCloudCover: true,
       transferFunction: this.transferFunction8,
     };
@@ -1210,6 +1210,7 @@ export default defineComponent({
 
 #advanced-weather-view {
   --color: #eac402;
+  --default-font-size: clamp(0.7rem, min(1.7vh, 1.7vw), 1.1rem);
   font-size: var(--default-font-size);
   --smaller-font: calc(0.8 * var(--default-font-size));
   
diff --git a/src/main.ts b/src/main.ts
index 70941e21..b57b273f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -101,7 +101,7 @@ library.add(faAnglesRight);
 // Extract the function out, up here, so I'm not writing it twice
 const update = (el: HTMLElement, binding: Vue.DirectiveBinding) => el.style.visibility = (binding.value) ? "hidden" : "";
 
-createApp(SolarEclipse2023, {
+createApp(AdvancedWeatherView, {
   wwtNamespace: "wwt-minids-solar-eclipse-2024",
   // wtml: { // use this just as a test for the sun
   //   eclipse: "https://raw.githubusercontent.com/patudom/star-life-cycle/master/content/BUACStellarLifeCycles.wtml",

From 5359058c795b266d790e6e08d1ff8b829e22ea55 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:18:24 -0400
Subject: [PATCH 24/55] make display more responsive on in between sizes

---
 src/AdvancedWeatherView.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 20f36bc9..0840f130 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -25,10 +25,10 @@
         <!-- top row -->
         <v-row class="flex-row-reverse">
 
-          <v-col cols="12" sm="4" :order="2" :order-lg="1">
+          <v-col cols="12" sm="4" :order="2" :order-lg="2">
             <v-row id="query-constructor">              
-              <v-col class="sentence-query" col="12">
-                <label for="statistics">Show me</label>
+              <v-col class="sentence-query mb-2" col="12">
+                <label class="d-inline d-sm-block d-xl-inline" for="statistics">Show me</label>
                 <select 
                   class="select-box"
                   name="statistics" 
@@ -40,7 +40,7 @@
                   <option value="median">the Median</option>
                   <option value="singleyear">a Single Year</option>
                 </select>
-                  <label for="years">of the cloud cover for </label>
+                  <label class="d-inline d-sm-block d-md-inline" for="years">of the cloud cover for </label>
                   <select 
                     v-if="selectedStat !== 'singleyear'"
                     class="select-box"
@@ -67,7 +67,7 @@
               </v-col>
             </v-row>
             
-            <v-row id="modis-radio-group">
+            <v-row class="mb-2" id="modis-radio-group">
               <v-btn 
                 class="elevation-5 my-2 mb-4"
                 variant="flat"
@@ -149,7 +149,7 @@
           </v-col>
 
 
-          <v-col id="awv-map" cols="12" sm="8" :order="1" :order-lg="2">
+          <v-col id="awv-map" cols="12" sm="8" :order="1" :order-lg="1">
             <span id="awv-map-description"> {{ mapDescriptionText }} </span>
             <div class="map-colorbar">
             <location-selector
@@ -1266,6 +1266,10 @@ export default defineComponent({
     font-weight: bold;
     font-size: 1.125em;
     
+    @media (max-width: 600px) {
+      font-size: 1.25em;
+    }
+    
     
     >label, >select {
       margin: 0.25em auto;
@@ -1275,6 +1279,7 @@ export default defineComponent({
       display: block;
       color:#eac402;
       font-size: 1.1em;
+      
     }
     
     > select {
@@ -1295,6 +1300,13 @@ export default defineComponent({
     margin-left: 1rem;
     margin-bottom: 1rem;
     font-size: 1em;
+    
+    @media (max-width: 810px) {
+      .label-icon-value-text-container {
+        width: max-content;
+      }
+    }
+    
   }
   
   .bold .label-icon-value-text-label {

From b58a269443914aed821eddfa99406ff1f65b7717 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:18:54 -0400
Subject: [PATCH 25/55] reset main

---
 src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index b57b273f..70941e21 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -101,7 +101,7 @@ library.add(faAnglesRight);
 // Extract the function out, up here, so I'm not writing it twice
 const update = (el: HTMLElement, binding: Vue.DirectiveBinding) => el.style.visibility = (binding.value) ? "hidden" : "";
 
-createApp(AdvancedWeatherView, {
+createApp(SolarEclipse2023, {
   wwtNamespace: "wwt-minids-solar-eclipse-2024",
   // wtml: { // use this just as a test for the sun
   //   eclipse: "https://raw.githubusercontent.com/patudom/star-life-cycle/master/content/BUACStellarLifeCycles.wtml",

From 34595413d242f1ac02731c52a5cff2f09f47ea89 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 18:10:00 -0400
Subject: [PATCH 26/55] provide a better fit

---
 src/AdvancedWeatherView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 0840f130..834efe4c 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -25,7 +25,7 @@
         <!-- top row -->
         <v-row class="flex-row-reverse">
 
-          <v-col cols="12" sm="4" :order="2" :order-lg="2">
+          <v-col cols="12" sm="5" :order="2" :order-lg="2">
             <v-row id="query-constructor">              
               <v-col class="sentence-query mb-2" col="12">
                 <label class="d-inline d-sm-block d-xl-inline" for="statistics">Show me</label>
@@ -149,7 +149,7 @@
           </v-col>
 
 
-          <v-col id="awv-map" cols="12" sm="8" :order="1" :order-lg="1">
+          <v-col id="awv-map" cols="12" sm="7" :order="1" :order-lg="1">
             <span id="awv-map-description"> {{ mapDescriptionText }} </span>
             <div class="map-colorbar">
             <location-selector
@@ -501,8 +501,8 @@ export default defineComponent({
       mapDescriptionText: '',
       locationName: '',
       inBounds: false,
-      displayData: true,
-      displayCharts: true,
+      displayData: false,
+      displayCharts: false,
       showCloudCover: true,
       transferFunction: this.transferFunction8,
     };

From b10ab45b498fc9bf0e0b1d58f44d056d0e718c65 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 21:44:09 -0400
Subject: [PATCH 27/55] only updateCloudCover after

---
 src/LocationSelector.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/LocationSelector.vue b/src/LocationSelector.vue
index e6573358..e9d2f4c0 100644
--- a/src/LocationSelector.vue
+++ b/src/LocationSelector.vue
@@ -330,13 +330,11 @@ export default defineComponent({
       const initialZoom = this.mapOptions.initialZoom ?? 4;
       const zoom = initial ? initialZoom : (this.map?.getZoom() ?? initialZoom);
       const map = L.map(mapContainer, {renderer: new L.Canvas()}).setView(location, zoom);
-      
+
       const options = { ...defaultMapOptions, ...this.mapOptions };
       this.basemap = L.tileLayer(options.templateUrl, options);
       this.basemap.addTo(map);
 
-      this.updateCloudCover(this.showCloudCover);
-      this.bringLocationAndPathToFront();
 
       this.placeCircles = this.places.map(place => this.circleForPlace(place));
       this.placeCircles.forEach((circle, index) => {
@@ -412,6 +410,9 @@ export default defineComponent({
       this.selectedCircle?.bringToFront();
       
       this.map = map;
+      
+      this.updateCloudCover(this.showCloudCover);
+      this.bringLocationAndPathToFront();
     },
 
     updateValue(value: LocationDeg) {

From 00f2537b6349db060c68fd7fb961fe78bc361c69 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 21:58:55 -0400
Subject: [PATCH 28/55] fix some legends and font-sizes

---
 src/AdvancedWeatherView.vue | 19 ++++++++++---------
 src/BarChart.vue            | 10 ++++++++--
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 99d1d4ee..016fa40f 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -5,7 +5,7 @@
     close-on-back
     >
     <v-card id="advanced-weather-view">
-      <v-card-text>
+      <v-card-text class="overflow-auto">
         <h1>Just how cloudy is it in {{ locationName }} in April?
         <define-term 
           no-click
@@ -15,7 +15,7 @@
         </p>'
           >
           <template #term>
-            <v-btn elevation="0" icon="mdi-help-circle" @click="explainerOpen = true"></v-btn>
+            <v-btn style="font-size: 1em;" elevation="1" icon="mdi-help-circle" @click="explainerOpen = true"></v-btn>
           </template>
         </define-term>
         <cloud-data-explainer
@@ -69,8 +69,7 @@
             
             <v-row class="mb-2" id="modis-radio-group">
               <v-btn 
-                class="elevation-5 my-2 mb-4"
-                variant="flat"
+                class="elevation-5 my-2 mb-4 mr-2"
                 size="small"
                 :disabled="!(needToUpdate || !showCloudCover)"
                 color="#eac402" 
@@ -176,7 +175,7 @@
                 />
             </div>
               <div class="d-flex align-center justify-space-between">
-              <span class="align-self-start" id="awv-map-description"> {{ mapDescriptionText }} </span>
+              <span class="align-self-start text-right" id="awv-map-description"> {{ mapDescriptionText }} </span>
               <v-checkbox
                 v-if="displayData || true"
                 v-model="showCloudCover"
@@ -205,6 +204,7 @@
               :bar-offset="1"
               :barAnnotationLabel="(v:number) => (v * 100/20).toFixed(0) + '%'"
               stacked
+              :show-legend="dataSubset !== 'allYears'"
               :title="`Cloud Conditions for ${locationName} ${allYears[0]} - ${allYears[allYears.length - 1]}`"
               :other-datasets="hideHistogramSubset ? [] : [
                 {
@@ -219,7 +219,7 @@
           </v-col>
           <v-col cols="12" sm="6" class="graph-col">
           <line-chart
-            show-legend
+            :show-legend="dataSubset !== 'allYears'"
             class="elevation-5"
             :title="`Percent Cloud Cover for ${locationName}`"
             :scatter-data="cloudDataNearLocation"
@@ -1155,7 +1155,7 @@ export default defineComponent({
   
   watch: {
     modelValue(value: boolean) {
-      if (value) {
+      if (value && Object.keys(this.allModisData['8day']).length === 0) {
         console.log('loading data');
         this.loadEightDayData().then(() => {
           console.log('finished loading data');
@@ -1164,6 +1164,7 @@ export default defineComponent({
         });
       } else {
         console.log('closing AWV view');
+        this.needToUpdate = true;
         // this.displayData = false;
       }
     }, 
@@ -1269,6 +1270,7 @@ export default defineComponent({
   .map-container {
     contain: strict;
     aspect-ratio: 1.5;
+    max-height: 350px;
   }
   
   .force-vuetify-small-font {
@@ -1329,5 +1331,4 @@ export default defineComponent({
   
 
 }
-</style>
-./utils
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/BarChart.vue b/src/BarChart.vue
index 4dac8fdf..38bb5d76 100644
--- a/src/BarChart.vue
+++ b/src/BarChart.vue
@@ -157,7 +157,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
       required: false
-    }
+    },
+    
+    showLegend: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
     
     
   },
@@ -232,7 +238,7 @@ export default defineComponent({
           },
           // https://www.chartjs.org/docs/latest/configuration/legend.html
           legend: {
-            display: true
+            display: this.showLegend,
           },
           
           tooltip: {

From f11cded7ec535d8223e5880f3a4b376636517ec4 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 22:01:39 -0400
Subject: [PATCH 29/55] update

---
 src/AdvancedWeatherView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 016fa40f..fc7b029d 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -671,7 +671,6 @@ export default defineComponent({
     
     
     locationValue(): number | null {
-      console.log('locationValue');
       if (!this.inBounds) {return null;}
       
       if (this.selectedStat === 'mean') {

From 133933e6ab86a013ee403cbc111e6ac6bde00f80 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 22:11:18 -0400
Subject: [PATCH 30/55] fullscreen on small displays

---
 src/AdvancedWeatherView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index fc7b029d..f0d27ee4 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -3,6 +3,7 @@
   <v-dialog 
     v-model="showValue" 
     close-on-back
+    :fullscreen="$vuetify.display.width < 450"
     >
     <v-card id="advanced-weather-view">
       <v-card-text class="overflow-auto">

From 01d586fd04b535e40d8bc2d3bac69becb9d98d6b Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 22:13:43 -0400
Subject: [PATCH 31/55] allow smaller fonts

---
 src/AdvancedWeatherView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index f0d27ee4..149e824a 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -1220,7 +1220,7 @@ export default defineComponent({
 
 #advanced-weather-view {
   --color: #eac402;
-  --default-font-size: clamp(0.7rem, min(1.7vh, 1.7vw), 1.1rem);
+  --default-font-size: clamp(10px, min(1.7vh, 1.7vw), 1.1rem);
   font-size: var(--default-font-size);
   --smaller-font: calc(0.8 * var(--default-font-size));
   

From d642533db64d279b2b392c3fb25907919c6cadf3 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Thu, 14 Mar 2024 22:26:51 -0400
Subject: [PATCH 32/55] apply max width to map-colorbar

---
 src/AdvancedWeatherView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 149e824a..171c5491 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -1265,6 +1265,7 @@ export default defineComponent({
   
   .map-colorbar {
     display: flex;
+    max-width: 99%;
   }
   
   .map-container {

From d2c6bc726d9b1ffbaf2ea61ea10edf6b9ac97b0b Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 08:08:31 -0400
Subject: [PATCH 33/55] add awv query param

---
 src/AdvancedWeatherView.vue | 26 ++++++++++++++++++++++----
 src/SolarEclipse2024.vue    | 12 ++++++++++--
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 171c5491..32253121 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -3,7 +3,7 @@
   <v-dialog 
     v-model="showValue" 
     close-on-back
-    :fullscreen="$vuetify.display.width < 450"
+    :fullscreen="$vuetify.display.width < 450 || fullscreen"
     >
     <v-card id="advanced-weather-view">
       <v-card-text class="overflow-auto">
@@ -428,7 +428,25 @@ export default defineComponent({
       type: Object as PropType<CityLocation> | undefined,
       default: cityBoston,
       required: true,
-    }
+    },
+    
+    showOnMap: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    
+    showCharts: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    
+    fullscreen: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   
   data() {
@@ -506,8 +524,8 @@ export default defineComponent({
       mapDescriptionText: '',
       locationName: '',
       inBounds: false,
-      displayData: false,
-      displayCharts: false,
+      displayData: this.showOnMap,
+      displayCharts: this.showCharts,
       showCloudCover: true,
       transferFunction: this.transferFunction8,
       
diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index ef6b68fe..7e93c316 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -656,6 +656,9 @@
       showAdvancedWeather = false;
       }"
     :default-location="locationDeg"
+    :show-on-map="showAWVMapByDefault"
+    :show-charts="showAWVChartsByDefault"
+    :fullscreen="showAWVFullScreen"
     />
   <div
     id="main-content"
@@ -1518,7 +1521,7 @@ type OptionalFieldsShallow<T> = {
   [P in keyof T]?: T[P]
 };
 
-type QueryData = OptionalFieldsShallow<LocationDeg & { splash: boolean }>;
+type QueryData = OptionalFieldsShallow<LocationDeg & { splash: boolean } & {awv: boolean}>;
 
 let queryData: QueryData = {};
 const UUID_KEY = "eclipse-mini-uuid" as const;
@@ -1728,7 +1731,10 @@ export default defineComponent({
       geolocationPermission: '' as 'granted' | 'denied' | 'prompt',
       
       showWWTGuideSheet: false,
-      showAdvancedWeather: false,
+      showAdvancedWeather: queryData.awv ?? false,
+      showAWVMapByDefault: queryData.awv ?? false,
+      showAWVChartsByDefault: queryData.awv ?? false,
+      showAWVFullScreen: false,
       
       selectionProximity: 4,
       pointerMoveThreshold: 6,
@@ -1883,6 +1889,8 @@ export default defineComponent({
     }
     const splashQuery = searchParams.get("splash");
     queryData.splash = splashQuery !== "false";
+    const awv = searchParams.get("awv");
+    queryData.awv = awv === "true";
   },
 
   mounted() {

From f455663707874f64e4998eb08a9e81c465974496 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 08:31:13 -0400
Subject: [PATCH 34/55] fix auto open data display behavior

---
 src/AdvancedWeatherView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 32253121..26243eca 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -524,7 +524,7 @@ export default defineComponent({
       mapDescriptionText: '',
       locationName: '',
       inBounds: false,
-      displayData: this.showOnMap,
+      displayData: false,
       displayCharts: this.showCharts,
       showCloudCover: true,
       transferFunction: this.transferFunction8,
@@ -544,7 +544,7 @@ export default defineComponent({
       this.loadEightDayData().then(() => {
         console.log('preloading data');
         this.dataloaded = true;
-        this.updateData(false);
+        this.updateData(this.showOnMap);
         this.updateMapDescriptionText();
       });
     }

From 764a7038897db8bb3690e80dc58965399dc82230 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 08:33:20 -0400
Subject: [PATCH 35/55] turn back on detect location as it is in the main view
 if we initialize to this view so data is immediately relevant

---
 src/AdvancedWeatherView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 26243eca..4e727fbe 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -155,7 +155,7 @@
           <v-col id="awv-map" cols="12" sm="7" :order="1" :order-lg="1">
             <div class="map-colorbar">
             <location-selector
-              :detect-location="false"
+              :detect-location="showOnMap"
               v-model="location"
               label="Location"
               :map-options="mapOptions"

From bf1f3abf40df8ad254ba67ccff1152274243422d Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 08:39:14 -0400
Subject: [PATCH 36/55] make close obvious when awv is default

---
 src/AdvancedWeatherView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 4e727fbe..2f39c4b0 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -273,7 +273,7 @@
       </v-card-text>
       <v-card-actions style="border-top: 1px solid white; margin-top: 10px;">
         <v-spacer></v-spacer>
-        <v-btn @click="close()">Close</v-btn>
+        <v-btn :size="showOnMap ? 'large' : 'default'" :color="showOnMap ? '#eac402' : ''" :variant="showOnMap ? 'flat' : 'plain'" @click="close()">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

From 645283e86e439b0925bfbf85b53abd1b2e02ed34 Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 09:36:22 -0400
Subject: [PATCH 37/55] Ok if I put it back to standard variant? I think tonal
 is too subtle.

---
 src/SolarEclipse2024.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 7e93c316..835d4abb 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -160,7 +160,7 @@
                     <p> Explore whether phenomena like El Niño historically impacted cloud cover patterns.</p>
                   </div>
                   <div>
-                    <div class="my-2">Open the <v-btn :color="accentColor" density="compact" variant="tonal" @click="showAdvancedWeather = true">Cloud Date Explorer</v-btn></div>
+                    <div class="my-2">Open the <v-btn :color="accentColor" density="compact"  @click="showAdvancedWeather = true">Cloud Data Explorer</v-btn></div>
                   </div>
                 </div>
               </span>

From 01c13538be96acbcad586eb7ed5c24edf3282bb1 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:43:34 -0400
Subject: [PATCH 38/55] fix color on line and border on hist

---
 src/AdvancedWeatherView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 2f39c4b0..9614dded 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -198,7 +198,7 @@
               :labels="skyCoverCodes.map((v) => v.includes('/') ? [v.split('/')[0] + '/', v.split('/')[1]]: v)"
               :data-label="hideHistogramSubset ? 'All Years' : 'Other Years'"
               :histogram-data="cloudDataHistogram.map((v, _i) => locationHistogram.length > 0 ? v - locationHistogram[_i] : v)"
-              :border-width="[0]"
+              :border-width="hideHistogramSubset ? [1] : [0]"
               :colors="hideHistogramSubset ? colorMap : ['#aaa']"
               :options = "{scales: {y: {beginAtZero: true, max:20}}}"
               :bar-annotations="false"
@@ -775,7 +775,7 @@ export default defineComponent({
         return [{
           type: 'scatter',
           label: this.mapSubsets.get(this.dataSubset)  as string,
-          backgroundColor: data.map(_v => 'goldenrod'),
+          backgroundColor: data.map(_v => '#eac402'),
           data: data,
           pointRadius: 6,
           borderColor: 'black',

From c5dc7cbbfcaa62125032ed48f2c0dcee89108528 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:51:10 -0400
Subject: [PATCH 39/55] fix spacing around select box

---
 src/AdvancedWeatherView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 9614dded..750968b5 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -29,7 +29,7 @@
           <v-col cols="12" sm="5" :order="2" :order-lg="2">
             <v-row id="query-constructor">              
               <v-col class="sentence-query mb-2" col="12">
-                <label class="d-inline d-sm-block d-xl-inline" for="statistics">Show me</label>
+                <label class="d-inline d-sm-block d-xl-inline" for="statistics">Show me </label>
                 <select 
                   class="select-box"
                   name="statistics" 
@@ -41,7 +41,7 @@
                   <option value="median">the Median</option>
                   <option value="singleyear">a Single Year</option>
                 </select>
-                  <label class="d-inline d-sm-block d-md-inline" for="years">of the cloud cover for </label>
+                  <label class="d-inline d-sm-block d-md-inline" for="years"> of the cloud cover for </label>
                   <select 
                     v-if="selectedStat !== 'singleyear'"
                     class="select-box"
@@ -1306,7 +1306,7 @@ export default defineComponent({
     
     
     >label, >select {
-      margin: 0.25em auto;
+      margin: 0.25em 0.5ch;
     }
     
     > label {

From 015e4fc6fc207e16ee8d2a125e314d8b6b5cc033 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:37:34 -0400
Subject: [PATCH 40/55] fix main cloud data explorer button

---
 src/SolarEclipse2024.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 835d4abb..8ec7eb08 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -160,7 +160,7 @@
                     <p> Explore whether phenomena like El Niño historically impacted cloud cover patterns.</p>
                   </div>
                   <div>
-                    <div class="my-2">Open the <v-btn :color="accentColor" density="compact"  @click="showAdvancedWeather = true">Cloud Data Explorer</v-btn></div>
+                    <div class="my-2">Open the <v-btn :class="[smallSize ? 'text-caption' : '']" :color="accentColor" density="compact"  @click="showAdvancedWeather = true">Cloud Data Explorer</v-btn></div>
                   </div>
                 </div>
               </span>

From 3b79a694b3037ed9c67a72167baf617e25487eda Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:37:51 -0400
Subject: [PATCH 41/55] update CDE styling

---
 src/AdvancedWeatherView.vue | 10 +++-------
 src/CloudDataExplainer.vue  | 36 ++++++++++++++++++------------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 750968b5..0bf72d7a 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -21,6 +21,7 @@
         </define-term>
         <cloud-data-explainer
           v-model="explainerOpen"
+          :fullscreen="$vuetify.display.width < 450 || fullscreen"
           />
       </h1>
         <!-- top row -->
@@ -104,7 +105,6 @@
               <hr style="width:100%; margin-block: 1rem;">
               <h4>Show cloud cover statistics for currently selected location: <strong class="attention">{{ locationName }}</strong></h4>
               <v-btn 
-                class="force-vuetify-small-font"
                 density="compact"
                 color="#eac402"
                 append-icon="mdi-chevron-triple-right"
@@ -273,7 +273,7 @@
       </v-card-text>
       <v-card-actions style="border-top: 1px solid white; margin-top: 10px;">
         <v-spacer></v-spacer>
-        <v-btn :size="showOnMap ? 'large' : 'default'" :color="showOnMap ? '#eac402' : ''" :variant="showOnMap ? 'flat' : 'plain'" @click="close()">Close</v-btn>
+        <v-btn :size="showOnMap ? 'large' : 'default'" color="#eac402" variant="flat" @click="close()">Close</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -1240,7 +1240,7 @@ export default defineComponent({
   --color: #eac402;
   --default-font-size: clamp(10px, min(1.7vh, 1.7vw), 1.1rem);
   font-size: var(--default-font-size);
-  --smaller-font: calc(0.8 * var(--default-font-size));
+  --smaller-font: calc(1 * var(--default-font-size));
   
   h1 {
     font-size: 1.5em;
@@ -1292,10 +1292,6 @@ export default defineComponent({
     max-height: 350px;
   }
   
-  .force-vuetify-small-font {
-    font-size: 0.8em!important;
-  }
-  
   .sentence-query {
     font-weight: bold;
     font-size: 1.125em;
diff --git a/src/CloudDataExplainer.vue b/src/CloudDataExplainer.vue
index 36990e2e..ea22341e 100644
--- a/src/CloudDataExplainer.vue
+++ b/src/CloudDataExplainer.vue
@@ -3,8 +3,8 @@
     v-model="value"
     close-on-back
     close-on-esc
-    max-height="90%"
     scrollable
+    :fullscreen="fullscreen"
   >
   <v-card
     class="align-self-center"
@@ -17,22 +17,11 @@
   
       <!-- create tab like buttons which set the tab -->
       <v-card-title>
-        <v-btn-toggle class="button-tabs flex-wrap" density="default" v-model="tab" color="primary">
-          <v-btn class="no-text-transform" density="default" value="cloud-data">About Cloud Cover Data</v-btn>
-          <v-btn class="no-text-transform" density="default" value="stats">Statistical Concepts</v-btn>
-          <v-btn class="no-text-transform" density="default" value="weather">Weather Patterns</v-btn>
-        </v-btn-toggle>
-        <!-- <v-icon class="close-button" @click="value = false">mdi-close</v-icon> -->
-        <font-awesome-icon
-              size="xl"
-              class="close-button"
-              color="#eac402"
-              icon='square-xmark'
-              @click="value = !value"
-              @keyup.enter="value = !value"
-              tabindex="0"
-              tooltip-location="start"
-            /> 
+        <v-tabs selected-class="selected-tab" height="1.5rem" v-model="tab" :direction="$vuetify.display.width < 765 ? 'vertical' : 'horizontal'">
+          <v-tab class="no-text-transform" value="cloud-data">About Cloud Cover Data</v-tab>
+          <v-tab class="no-text-transform" value="stats">Statistical Concepts</v-tab>
+          <v-tab class="no-text-transform" value="weather">Weather Patterns</v-tab>
+        </v-tabs>
       </v-card-title>
       <v-card-text>
         <v-window v-model="tab">
@@ -205,7 +194,7 @@
     
     <v-card-actions>
       <v-spacer></v-spacer>
-      <v-btn @click="value = false">Close</v-btn>
+      <v-btn color="#eac402" variant="flat" @click="value = false">Close</v-btn>
     </v-card-actions>
     
   </v-card>
@@ -230,6 +219,11 @@ export default defineComponent({
     initialTab: {
       type: String as () => Tab,
       default: 'intro'
+    },
+    
+    fullscreen: {
+      type: Boolean,
+      default: false
     }
   },
   
@@ -306,6 +300,9 @@ details.faq {
 
 .no-text-transform {
   text-transform: none !important;
+  height: 1rem;
+  text-align: left;
+  white-space: pre-wrap;
 }
 
 
@@ -316,5 +313,8 @@ details.faq {
   right: 0.125em;
 }
 
+.selected-tab {
+  background-color: #eac3021d;
+}
 
 </style>
\ No newline at end of file

From b61503ed6b32c01e919bca6d35996e0d2c3dc1ca Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 12:57:40 -0400
Subject: [PATCH 42/55] give user a reminder to update data on map

---
 src/AdvancedWeatherView.vue | 49 ++++++++++++++++++++++++++++++++++---
 src/LocationSelector.vue    |  3 ++-
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 0bf72d7a..842f8be4 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -152,7 +152,13 @@
           </v-col>
 
 
-          <v-col id="awv-map" cols="12" sm="7" :order="1" :order-lg="1">
+          <v-col 
+            :class="[
+              needToUpdate || !displayData || loadingNewMap ? 'show-after' : '',
+              needToUpdate ? 'need-to-update' : '', 
+              !displayData ? 'no-data-shown' : '',
+              ]" 
+            id="awv-map" cols="12" sm="7" :order="1" :order-lg="1">
             <div class="map-colorbar">
             <location-selector
               :detect-location="showOnMap"
@@ -167,6 +173,7 @@
               @dataclick="selectedDataIndex = $event.index; selectedDataCloudCover = $event.cloudCover"
               :cloud-cover-opacity-function="transferFunction"
               :geo-json-files="eclipsePaths"
+              @finishLoading="loadingNewMap = false"
               />
               <color-bar
                 name="cloud-cover"
@@ -528,6 +535,7 @@ export default defineComponent({
       displayCharts: this.showCharts,
       showCloudCover: true,
       transferFunction: this.transferFunction8,
+      loadingNewMap: false,
       
     };
   },
@@ -1024,9 +1032,10 @@ export default defineComponent({
       this.displayData = display;
       if (display){
         this.needToUpdate = false;
+        this.loadingNewMap = true;
       }
       this.updateMapDescriptionText();
-      
+
       if (this.modisDataSet === '1day') {
         this.transferFunction = this.transferFunction1;
       }
@@ -1286,6 +1295,40 @@ export default defineComponent({
     max-width: 99%;
   }
   
+  #awv-map {
+    &.show-after .map-container::after {
+      content: " ";
+      
+      display:flex;
+      width: 100%;
+      min-height: 2.5em;
+      height: max-content;
+      align-items: center;
+      justify-content: center;
+      font-size: calc(1 * var(--default-font-size));
+      
+      position: absolute;
+      top: 0;
+      left: 0;
+      
+      color: black;
+      background-color: #cccccc77;
+      z-index: 500;
+      
+      backdrop-filter: blur(5px) saturate(50%);
+    }
+    
+    &.show-after.need-to-update .map-container::after {
+      content: "Press 'Update Map' to view new selection";
+    }
+    
+    &.show-after.no-data-shown .map-container::after {
+      content: "Press 'Show on Map' to view data";
+    }
+    
+    
+  }
+  
   .map-container {
     contain: strict;
     aspect-ratio: 1.5;
@@ -1344,6 +1387,6 @@ export default defineComponent({
     font-size: 1.12em;
   }
   
-
+  
 }
 </style>
\ No newline at end of file
diff --git a/src/LocationSelector.vue b/src/LocationSelector.vue
index e9d2f4c0..b0bb254e 100644
--- a/src/LocationSelector.vue
+++ b/src/LocationSelector.vue
@@ -51,7 +51,7 @@ interface CloudData {
 
 export default defineComponent({
 
-  emits: ["place", "update:modelValue", "error", "dataclick"],
+  emits: ["place", "update:modelValue", "error", "dataclick", "finishLoading"],
 
   props: {
     
@@ -203,6 +203,7 @@ export default defineComponent({
         return;
       }
       this.cloudCoverRectangles.addTo(this.map as Map); // Not sure why, but TS is cranky w/o the Map cast
+      this.$emit('finishLoading');
     },
 
     

From d603be6aca419c2f674dcf8e060f253f8e04f66e Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 13:21:56 -0400
Subject: [PATCH 43/55] Text and formatting updates for data info box.

---
 src/CloudDataExplainer.vue | 94 +++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 41 deletions(-)

diff --git a/src/CloudDataExplainer.vue b/src/CloudDataExplainer.vue
index 36990e2e..03cfcc40 100644
--- a/src/CloudDataExplainer.vue
+++ b/src/CloudDataExplainer.vue
@@ -39,11 +39,7 @@
           
           <v-window-item value="cloud-data">
             <p>
-              NASAs <a href="https://modis.gsfc.nasa.gov/" target="_blank">MODIS Aqua and Terra</a> satellites 
-                provide daily views of the entire surface of the Earth and measure the cloud cover.
-                This is provided as the <strong>cloud cover fraction - <em>the percentage of the sky at a given location that is covered 
-                by clouds</em></strong>. We are using MODIS Aqua cloud cover data product as provided by the 
-                  <a href="https://neo.gsfc.nasa.gov/view.php?datasetId=MYDAL2_E_CLD_FR" target="_blank">NASA Near Earth Observations (NEO)</a> website.
+              NASA's Aqua and Terra satellites provide daily views of the entire surface of Earth. The <a href="https://modis.gsfc.nasa.gov/" target="_blank">MODIS</a> instruments on these satellites help scientists learn about conditions in our atmosphere and oceans. We display calculated <strong>cloud cover fraction</strong>&#8212;the percentage of the sky at a given location that is covered by clouds&#8212;from MODIS on the Aqua satellite, provided by the NASA Near Earth Observations (<a href="https://neo.gsfc.nasa.gov/view.php?datasetId=MYDAL2_E_CLD_FR" target="_blank">NEO</a>) website.
                 <!-- The daily data can have gaps and processing artefacts, so the 8-day average 
                 provies a more reliable measure of the cloud cover for a given time. -->
             </p>
@@ -55,22 +51,34 @@
                 NASA provides the cloud cover data in 1-day, 8-day (and, not included, 30-day) averages. 
                 <ul>
                   <li>The <strong>1-day (daily)</strong> data maps display historic cloud cover for each April 8<sup>th</sup> from 2003 to 2023. </li>
-                  <li>The <strong>8-day average</strong> gives average of the 1-day data from April 7-14 from 2003 to 2023. </li>
+                  <li>The <strong>8-day</strong> maps display an average of the 1-day data from April 7-14 from 2003 to 2023. </li>
                 </ul>
-                The daily data can have gaps and processing artefacts, so the 8-day average provides a more reliable measure of the cloud cover at every location on the map. 
-                <!-- Also, the 8-day average gives us more data to draw conclusions from. -->
-                Because weather can vary considerably from hour-to-hour and day-to-day, the longer interval of the 8-day average gives us more data 
-                  from which we can draw better conclusions about the possible weather conditions in a given location. 
-                <!-- (MODIS also offers month-long averages of the data, but we opted not to include that here to improve performance and data load times.) -->
+              </p>
+            </details>
+            <details class="faq">
+              <summary>What can I learn from the 1-day maps?</summary>
+              <p>
+                If you compare the 1-day vs. the 8-day maps, you'll notice that the 1-day maps often have more data at the extreme ends, either mostly clear or cloudy. The 8-day maps tend to have more data concentrated in the middle bins of partly cloudy or mostly cloudy. If you average together days that are clear and cloudy, you will end up with something in the middle. The 1-day maps are not subject to this "smearing" effect of averaging over many days of data.
+              </p>
+            </details>
+            <details class="faq">
+              <summary>What can I learn from the 8-day maps?</summary>
+              <p>
+                The daily data can have gaps and processing artefacts, so the 8-day average provides a more reliable measure of the cloud cover at every location on the map. Because weather can vary considerably from hour-to-hour and day-to-day, the longer interval of the 8-day average gives us more data from which we can draw better conclusions about the possible weather conditions in a given location. 
+              </p>
+            </details>
+            <details class="faq">
+              <summary>Why are 30-day maps not available?</summary>
+              <p>
+                MODIS offers month-long averages of the data, but we opted not to include that here to improve performance and data load times.
               </p>
 
             </details>
             
-            
             <details class="faq">
               <summary>How does the percent cloud cover relate to what I might see in a weather report?</summary>
               <p>
-                We group the percent cloud cover based on the <a href="https://www.weather.gov/mrx/pfm_explain" target="_blank">bins from the National Weather Service</a>:
+                We group the percent cloud cover based on the <a href="https://www.weather.gov/mrx/pfm_explain" target="_blank">bins</a> from the National Weather Service:
                 <table>
                   <tr>
                     <th>Percentage</th>
@@ -100,10 +108,17 @@
             <details class="faq">
               <summary>Why is 2022 missing from the year list?</summary>
               <p>
-                Sometimes satellites go offline or there are issues transmitting data back to Earth. 
-                On March 31, 2022 the MODIS Aqua satellite entered SAFE mode, only returning to normal operations on April 17, 2022.
+                Sometimes satellites go offline, or there are issues transmitting data back to Earth. 
+                On March 31, 2022 the Aqua satellite entered SAFE mode, only returning to normal operations on April 17, 2022.
                 <!-- https://mcst.gsfc.nasa.gov/iot/pm1weekly2022-0852022-091, Event summary https://mcst.gsfc.nasa.gov/news/aqua-safe-mode-event -->
-                No cloud cover data is available from Mar 31 - Apr 16, 2022. <a href="https://mcst.gsfc.nasa.gov/news/aqua-safe-mode-event" target="_blank">View event summary</a>. 
+                No cloud cover data is available from Mar 31 - Apr 16, 2022. View the event <a href="https://mcst.gsfc.nasa.gov/news/aqua-safe-mode-event" target="_blank">summary</a>. 
+              </p>
+            </details>
+
+            <details class="faq">
+              <summary>Why use data from the Aqua satellite instead of Terra?</summary>
+              <p>
+                We use data from the Aqua satellite because its cloud cover measurements are taken in the afternoon, which corresponds better to the time of day of the April Eclipse.
               </p>
             </details>
             
@@ -118,7 +133,7 @@
             <details class="faq">
               <summary>What is a mean?</summary>
               <p>
-                The mean is the average of all values in the dataset. It is calculated by adding all the values together and dividing by the number of values. This is the statistic people are probably more familiar with and is often interpreted as a single value that “best” represents an entire data set.
+                The mean is the average of all values in the dataset. It is calculated by adding all the values together and dividing by the number of values. This is the statistical term people are probably more familiar with and is often interpreted as a single value that “best” represents an entire data set.
               </p>
             </details>
             
@@ -141,53 +156,51 @@
             
             
             <details class="faq">
-              <summary><v-icon>mdi-chart-bar</v-icon> What is in the bar chart on the  {{ smAndUp ? 'left' : 'top' }}?</summary>
+              <summary><v-icon>mdi-chart-bar</v-icon> What is in the chart on the  {{ smAndUp ? 'left' : 'top' }}?</summary>
               <p>
-                The left hand graph is called a histogram. For your selected location, it tells you how many years since 2003 were Clear, Partly Cloudy, Mostly Cloudy, or Cloudy at this location. If you have filtered the data by El Nino, Neutral, or La Nina years, your chosen subset will be colored with the blue to white gradient, while the rest of the years will appear gray.
+                The left hand graph is called a histogram. For your selected location, it tells you how many years since 2003 were Clear, Partly Cloudy, Mostly Cloudy, or Cloudy at this location. If you have filtered the data by El Niño, Neutral, or La Niña years, your chosen subset will be colored with the blue to white gradient, while the rest of the years will appear gray.
               </p>
             </details>
 
             <details class="faq">
               <summary><v-icon>mdi-chart-scatter-plot</v-icon> What is in the graph on the {{ smAndUp ? 'right' : 'bottom' }}?</summary>
               <p>
-                The right hand graph is a scatter plot showing the cloud cover for your chosen location for each year since 2003. If you have filtered the data by El Nino, Neutral, or La Nina years, or for a single year, those data points will be displayed in yellow. The background of the graph shows what cloud cover values correspond to the weather conditions of Clear, Partly Cloudy, etc.
+                The right hand graph is a scatter plot showing the cloud cover for your chosen location for each year since 2003. If you have filtered the data by El Niño, Neutral, or La Niña years, or for a single year, those data points will be displayed in yellow. The background of the graph shows what cloud cover values correspond to the weather conditions of Clear, Partly Cloudy, etc.
               </p>
             </details>
           </v-window-item>
           
           <v-window-item value="weather">
 
-            <details class="faq">
-              <summary> What is El Niño / La Niña?</summary>
-                You might have heard the terms El Niño or La Niña. 
-                They refer to weather patterns that are associated with a slight warming (“El Niño”) or cooling (“La Niña”) of 
-                  the surface water in the Pacific Ocean relative to normal (“Neutral”). These are part of what is called the El Niño Southern Oscillation (ENSO) cycle.
-                These different conditions can impact weather worldwide, so we provide the option of filtering the historical cloud data based on these classifications. 
-                <a href="https://oceanservice.noaa.gov/facts/ninonina.html" target="_blank">Learn more about these fascinating weather phenomena</a> from the NOAA National Ocean Service. 
-            </details>
+            <p>
+              You might have heard the terms <strong>El Niño</strong> or <strong>La Niña</strong>. They refer to weather patterns that are associated with a slight warming (“El Niño”) or cooling (“La Niña”) of the surface water in the Pacific Ocean relative to normal (“Neutral”). These are part of what is called the El Niño Southern Oscillation (ENSO) cycle. These different conditions can impact weather worldwide, so we provide the option of filtering the historical cloud data based on these classifications. <a href="https://oceanservice.noaa.gov/facts/ninonina.html" target="_blank">Learn more</a> about these fascinating weather phenomena from the NOAA National Ocean Service. 
+            </p>
             
             <details class="faq">
-              <summary> What years are El Niño, La Niña, or Neutral?</summary>
-              We use the <a href="https://psl.noaa.gov/enso/past_events.html" target="_blank">NOAA list of past ENSO events</a> to classify years as El Niño, La Niña, or Neutral.
-              Their list is based on the presence of an active El Niño or La Niña pattern during the months of December, January, and February. 
-              As an ENSO typiclly last several months (or even years), this provides a decent indication a how likely April is to have the same pattern.
-              
-              <p> We duplicate a portion of the list below:</p>
+              <summary> What years are considered El Niño, La Niña, or Neutral?</summary>
+              <p>
+                We use NOAA's <a href="https://psl.noaa.gov/enso/past_events.html" target="_blank">list</a> of past ENSO events to classify years as El Niño, La Niña, or Neutral. As that page explains, there is not a single accepted way to define which of these categories we are in.
+                Their list is based on the presence of an active El Niño or La Niña pattern during the months of December, January, and February. As an ENSO typically last several months (or even years), this provides a decent indication a how likely April is to have the same pattern.
+              </p>
+              <p> For the years included in our data set, they classify them as follows:
               <table>
                 <tr>
-                  <td> El Niño</td>
+                  <td> <strong>El Niño</strong>: </td>
                   <td>2003, 2007, 2010, 2016</td>
                 </tr>
                 <tr>
-                  <td> La Niña</td>
-                  <td>2008, 2011, 2012, 2021, 2022</td>
+                  <td> <strong>Neutral</strong>: </td>
+                  <td>2004, 2005, 2006, 2009, 2013, 2014, 2015, 2017, 2018</td>
                 </tr>
-                
                 <tr>
-                  <td> Neutral</td>
-                  <td>2004, 2005, 2006, 2009, 2013, 2014, 2015, 2017, 2018</td>
+                  <td> <strong>La Niña</strong>: </td>
+                  <td>2008, 2011, 2012, 2021, 2022, 2023</td>
                 </tr>
               </table>
+            </p>
+              <p>
+              If you want to see what the ENSO conditions were in March/April in the past, see the "MEI.v2 Values" at this NOAA <a href="https://psl.noaa.gov/enso/mei/" target="_blank">website</a>. 
+            </p>
             </details>
 
 
@@ -265,7 +278,6 @@ export default defineComponent({
 
 strong {
   font-weight: bold;
-  color: #eac402;
 }
 
 h3 {

From 7651681fa91ec9cfdf165babd5c5bdd0f4595aea Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 13:53:47 -0400
Subject: [PATCH 44/55] tiny grammar changes

---
 src/CloudDataExplainer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CloudDataExplainer.vue b/src/CloudDataExplainer.vue
index f5c1b820..0df87f07 100644
--- a/src/CloudDataExplainer.vue
+++ b/src/CloudDataExplainer.vue
@@ -28,7 +28,7 @@
           
           <v-window-item value="cloud-data">
             <p>
-              NASA's Aqua and Terra satellites provide daily views of the entire surface of Earth. The <a href="https://modis.gsfc.nasa.gov/" target="_blank">MODIS</a> instruments on these satellites help scientists learn about conditions in our atmosphere and oceans. We display calculated <strong>cloud cover fraction</strong>&#8212;the percentage of the sky at a given location that is covered by clouds&#8212;from MODIS on the Aqua satellite, provided by the NASA Near Earth Observations (<a href="https://neo.gsfc.nasa.gov/view.php?datasetId=MYDAL2_E_CLD_FR" target="_blank">NEO</a>) website.
+              NASA's Aqua and Terra satellites provide daily views of the entire surface of Earth. The <a href="https://modis.gsfc.nasa.gov/" target="_blank">MODIS</a> instrument on these satellites helps scientists learn about conditions in our atmosphere and oceans. We display the calculated <strong>cloud cover fraction</strong>&#8212;the percentage of the sky at a given location that is covered by clouds&#8212;from MODIS (on the Aqua satellite), as provided by the NASA Near Earth Observations (<a href="https://neo.gsfc.nasa.gov/view.php?datasetId=MYDAL2_E_CLD_FR" target="_blank">NEO</a>) website.
                 <!-- The daily data can have gaps and processing artefacts, so the 8-day average 
                 provies a more reliable measure of the cloud cover for a given time. -->
             </p>

From d31c9ea4eb4018e796b2cdfe614946454fd983de Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:39:12 -0400
Subject: [PATCH 45/55] add 2023 as la nina

---
 src/AdvancedWeatherView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 842f8be4..50953c25 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -475,7 +475,7 @@ export default defineComponent({
         2018, 2019, 2020, 2021, 2023
       ],
       elNinoYears: [2003, 2007, 2010, 2016],
-      laNinaYears: [2000, 2008, 2011, 2012, 2021, 2022],
+      laNinaYears: [2000, 2008, 2011, 2012, 2021, 2022, 2023],
       neutralYears: [2001, 2002, 2004, 2005, 2006, 2009, 2013, 2014, 2015, 2017, 2018],
       selectedYear: 2021,
       selectedStat: 'median' as Statistics,

From ce270a3c4936a2d0f9727616ca801fb20c3323d4 Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 14:42:26 -0400
Subject: [PATCH 46/55] Reorder per John's good suggestion

---
 src/CloudDataExplainer.vue | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/CloudDataExplainer.vue b/src/CloudDataExplainer.vue
index 0df87f07..21aea4d2 100644
--- a/src/CloudDataExplainer.vue
+++ b/src/CloudDataExplainer.vue
@@ -43,27 +43,13 @@
                   <li>The <strong>8-day</strong> maps display an average of the 1-day data from April 7-14 from 2003 to 2023. </li>
                 </ul>
               </p>
-            </details>
-            <details class="faq">
-              <summary>What can I learn from the 1-day maps?</summary>
               <p>
                 If you compare the 1-day vs. the 8-day maps, you'll notice that the 1-day maps often have more data at the extreme ends, either mostly clear or cloudy. The 8-day maps tend to have more data concentrated in the middle bins of partly cloudy or mostly cloudy. If you average together days that are clear and cloudy, you will end up with something in the middle. The 1-day maps are not subject to this "smearing" effect of averaging over many days of data.
               </p>
-            </details>
-            <details class="faq">
-              <summary>What can I learn from the 8-day maps?</summary>
               <p>
                 The daily data can have gaps and processing artefacts, so the 8-day average provides a more reliable measure of the cloud cover at every location on the map. Because weather can vary considerably from hour-to-hour and day-to-day, the longer interval of the 8-day average gives us more data from which we can draw better conclusions about the possible weather conditions in a given location. 
               </p>
-            </details>
-            <details class="faq">
-              <summary>Why are 30-day maps not available?</summary>
-              <p>
-                MODIS offers month-long averages of the data, but we opted not to include that here to improve performance and data load times.
-              </p>
-
-            </details>
-            
+            </details>            
             <details class="faq">
               <summary>How does the percent cloud cover relate to what I might see in a weather report?</summary>
               <p>
@@ -93,6 +79,12 @@
               </p>
 
             </details>
+            <details class="faq">
+              <summary>Why use data from the Aqua satellite instead of Terra?</summary>
+              <p>
+                We use data from the Aqua satellite because its cloud cover measurements are taken in the afternoon, which corresponds better to the time of day of the April Eclipse.
+              </p>
+            </details>
             
             <details class="faq">
               <summary>Why is 2022 missing from the year list?</summary>
@@ -103,13 +95,13 @@
                 No cloud cover data is available from Mar 31 - Apr 16, 2022. View the event <a href="https://mcst.gsfc.nasa.gov/news/aqua-safe-mode-event" target="_blank">summary</a>. 
               </p>
             </details>
-
             <details class="faq">
-              <summary>Why use data from the Aqua satellite instead of Terra?</summary>
+              <summary>Why are 30-day maps not available?</summary>
               <p>
-                We use data from the Aqua satellite because its cloud cover measurements are taken in the afternoon, which corresponds better to the time of day of the April Eclipse.
+                MODIS offers month-long averages of the data, but we opted not to include that here to improve performance and data load times.
               </p>
             </details>
+
             
           </v-window-item>
           

From 6a70f02332cb09d3f78a330b31b85459dca9a23d Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:46:19 -0400
Subject: [PATCH 47/55] fix plot boundaries and off by one month dates cuz js
 zero indexed months

---
 src/AdvancedWeatherView.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 50953c25..1107f894 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -235,7 +235,7 @@
             :scatter-label="!subsetSelected ? 'All Years' : 'Other Years'"
             :other-data="subsetData"
             :y-range="[-.1,1.1]"
-            :x-range="[new Date(2003, 1, 8), new Date(2023, 7, 8)]"
+            :x-range="[new Date(2002, 9, 8), new Date(2023, 11, 8)]"
 
               :y-axis-options="{
                 ticks: {callback: (value: number, index: number) => {
@@ -267,7 +267,7 @@
                     backgroundColor: 'transparent',
                     content: skyCoverCodes[i],
                   },
-                  xMin: new Date(2023, 1, 8),
+                  xMin: new Date(2023, 0, 8),
                   yMin: (min + max) / 200,
                   yMax: (min + max) / 200,
                   };
@@ -628,7 +628,7 @@ export default defineComponent({
       // show the lat lon of index
       
       this.allYears.map((year) => {
-        allData.push({'x': new Date(year, 4, 8), 'y':this.allCloudData[year][index].cloudCover});
+        allData.push({'x': new Date(year, 3, 8), 'y':this.allCloudData[year][index].cloudCover});
       });
       // console.log('index', index, this.latitudes[index], this.longitudes[index], allData.map(d => d.y));
       return allData;
@@ -682,7 +682,7 @@ export default defineComponent({
         if (index === -1 || index === null) {
           return;
         }
-        allData.push({'x':new Date(year, 4, 8), 'y':data[index].cloudCover});
+        allData.push({'x':new Date(year, 3, 8), 'y':data[index].cloudCover});
       });
 
       return allData;
@@ -1271,6 +1271,7 @@ export default defineComponent({
     
   .graph-col {
     height: 300px;
+    padding: 6px;
   }
   
   .v-btn {

From 31722f541aed52f9c605e25bf7c50ffbc1bcbd0c Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:48:09 -0400
Subject: [PATCH 48/55] hide show cloud cover until data is displayed

---
 src/AdvancedWeatherView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 1107f894..c31dac2d 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -185,7 +185,7 @@
               <div class="d-flex align-center justify-space-between">
               <span class="align-self-start text-right" id="awv-map-description"> {{ mapDescriptionText }} </span>
               <v-checkbox
-                v-if="displayData || true"
+                v-if="displayData"
                 v-model="showCloudCover"
                 label="Show Cloud Cover"
                 color="#eac402"

From be14b5280f6a963c65b88a1667517c614b07b5f7 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:56:31 -0400
Subject: [PATCH 49/55] a few fixes

---
 src/AdvancedWeatherView.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index c31dac2d..4963e3e7 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -184,6 +184,7 @@
             </div>
               <div class="d-flex align-center justify-space-between">
               <span class="align-self-start text-right" id="awv-map-description"> {{ mapDescriptionText }} </span>
+              <div style="display:inline-block; width: 100px;" v-if="!displayData"></div>
               <v-checkbox
                 v-if="displayData"
                 v-model="showCloudCover"
@@ -227,7 +228,7 @@
           </v-col>
           <v-col cols="12" sm="6" class="graph-col">
           <line-chart
-            :show-legend="dataSubset !== 'allYears'"
+            :show-legend="subsetSelected"
             class="elevation-5"
             :title="`Percent Cloud Cover for ${locationName}`"
             :scatter-data="cloudDataNearLocation"
@@ -582,7 +583,7 @@ export default defineComponent({
     
     subsetSelected() {
       // return !this.allYears.every(y => this.selectedYears.includes(y));
-      return (this.selectedYears.length < this.allYears.length);
+      return (this.selectedYears.length < this.allYears.length) || this.selectedStat === 'singleyear';
     },
     
     hideHistogramSubset() {
@@ -782,7 +783,7 @@ export default defineComponent({
         }
         return [{
           type: 'scatter',
-          label: this.mapSubsets.get(this.dataSubset)  as string,
+          label: this.selectedStat !== 'singleyear' ? this.mapSubsets.get(this.dataSubset)  as string : `${this.selectedYear}`,
           backgroundColor: data.map(_v => '#eac402'),
           data: data,
           pointRadius: 6,
@@ -1158,7 +1159,8 @@ export default defineComponent({
       // Displaying {{ selectedStat === 'singleyear' ? '' : statText.get(selectedStat)?.toLowerCase() }}  cloud cover for {{ selectedStat === 'singleyear' ? selectedYear : mapSubsets.get(dataSubset) }}.
       const stat = this.selectedStat === 'singleyear' ? '' : this.statText.get(this.selectedStat);
       const subset = this.selectedStat === 'singleyear' ? this.selectedYear : this.mapSubsets.get(this.dataSubset);
-      this.mapDescriptionText = `Displaying ${stat} cloud cover for ${subset}.`;
+      const modis = this.modisDataSet === '1day' ? 'MODIS 1-day' : 'MODIS 8-day average';
+      this.mapDescriptionText = `Displaying ${stat} ${modis} cloud cover for ${subset}.`;
     },
     
     getCloudCoverText(val: number | null): [number | null, string | undefined] {

From fabead5f9e56d717dc0e46b858723145bc86db1c Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 15:00:22 -0400
Subject: [PATCH 50/55] Update intro dialog

---
 src/SolarEclipse2024.vue | 41 +++++++++-------------------------------
 1 file changed, 9 insertions(+), 32 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 8ec7eb08..c246dc8d 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -914,7 +914,13 @@
                   <template v-slot:prepend>
                     <font-awesome-icon icon="cloud-sun" size="xl" class="bullet-icon"></font-awesome-icon>
                   </template>
-                    <strong>View historical cloud data</strong> for the week of April 8th from 2003&#8211;2023. <span class="text-red">New</span>: View detailed 0.5<sup>o</sup> cloud data including by presence of  El Niño/La Niña climate patterns.
+                    <strong>View historical cloud data</strong> for the week of April 8th from 2003&#8211;2023. 
+                </v-list-item>
+                <v-list-item density="compact">
+                  <template v-slot:prepend>
+                    <font-awesome-icon icon="chart-column" size="xl" class="bullet-icon"></font-awesome-icon>
+                  </template>
+                  <v-icon icon="mdi-creation" size="small" class="bullet-icon"></v-icon><strong>NEW! Explore historical cloud data</strong> as individual years or filter by El Niño/La Niña climate patterns.
                 </v-list-item>
                 <v-list-item density="compact">
                   <template v-slot:prepend>
@@ -939,35 +945,6 @@
               </p> 
             </div>
           </v-window-item>
-
-          <v-window-item :value="3">
-            <div class="intro-text mb-3">
-              <h4 class="mb-3">
-                Check back soon for:
-              </h4>
-              
-              <ul>
-                <v-list-item density="compact">
-                  <template v-slot:prepend>
-                    <v-icon icon="mdi-view-grid-compact" class="bullet-icon"></v-icon>
-                  </template>
-                  Higher resolution historical cloud data
-                </v-list-item>
-                <v-list-item density="compact">
-                  <template v-slot:prepend>
-                    <v-icon icon="mdi-baby-face-outline" class="bullet-icon"></v-icon>
-                  </template>
-                  Filter cloud data by El Ni&#241;o years
-                </v-list-item>
-                <v-list-item density="compact">
-                  <template v-slot:prepend>
-                    <v-icon icon="mdi-tools" class="bullet-icon"></v-icon>
-                  </template>
-                  More advanced tools for cloud data exploration
-                </v-list-item>
-              </ul> 
-            </div>
-          </v-window-item>
         </v-window>
 
         <div id="intro-bottom-controls">
@@ -991,7 +968,7 @@
             @keyup.enter="introSlide++"
             elevation="0"
             >
-            {{ introSlide < 3 ? 'Next' : 'Get Started' }}
+            {{ introSlide < 2 ? 'Next' : 'Get Started' }}
           </v-btn>
         </div>
       </div>
@@ -3585,7 +3562,7 @@ export default defineComponent({
     },
     
     introSlide(val: number) {
-      this.inIntro = val < 4;
+      this.inIntro = val < 3;
       return;
     },
 

From 25819f6cec503d2000ec125e987988f47b366694 Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 15:53:58 -0400
Subject: [PATCH 51/55] Simplify map description text to make it easier to read

---
 src/AdvancedWeatherView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue
index 4963e3e7..d1c56ac4 100644
--- a/src/AdvancedWeatherView.vue
+++ b/src/AdvancedWeatherView.vue
@@ -1159,8 +1159,8 @@ export default defineComponent({
       // Displaying {{ selectedStat === 'singleyear' ? '' : statText.get(selectedStat)?.toLowerCase() }}  cloud cover for {{ selectedStat === 'singleyear' ? selectedYear : mapSubsets.get(dataSubset) }}.
       const stat = this.selectedStat === 'singleyear' ? '' : this.statText.get(this.selectedStat);
       const subset = this.selectedStat === 'singleyear' ? this.selectedYear : this.mapSubsets.get(this.dataSubset);
-      const modis = this.modisDataSet === '1day' ? 'MODIS 1-day' : 'MODIS 8-day average';
-      this.mapDescriptionText = `Displaying ${stat} ${modis} cloud cover for ${subset}.`;
+      const modis = this.modisDataSet === '1day' ? '1-day' : '8-day';
+      this.mapDescriptionText = `Displaying ${modis} ${stat} cloud cover for ${subset}.`;
     },
     
     getCloudCoverText(val: number | null): [number | null, string | undefined] {

From 485d10c574470d17be7edef8d543d7d9786308ff Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 16:31:52 -0400
Subject: [PATCH 52/55] Update user guide to describe updated ui

---
 src/SolarEclipse2024.vue | 87 +++++++++++++++++++++++++++++-----------
 1 file changed, 63 insertions(+), 24 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 66d1ae48..74993fce 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -463,53 +463,81 @@
                   >                   
                     <h4 class="user-guide-header">Time Controls:</h4>
                     <p  class="mb-3">(Bottom-left of the screen)</p>
+                    <p>
+                      By default, time is moving forward at 100x the real speed. Time slows down to 10x the real speed as the eclipse approaches totality.
+                    </p>
                     <ul class="text-list">
                       <li>
                         {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
                               class="bullet-icon"
-                              icon="play"
+                              icon="angles-left"
                               size="lg" 
                             ></font-awesome-icon>
-                        to move time forward at 100x the real speed. Time slows down to 10x the real speed as the eclipse approaches totality.
+                        to reverse time, or to increase speed by 10x if time was already reversed. 
                       </li>
                       <li>
-                        If playing, {{ touchscreen ? "tap" : "click" }} <font-awesome-icon
-                              class="bullet-icon"
-                              icon="pause"
-                              size="lg" 
-                            ></font-awesome-icon>
-                        to pause time.
+                        {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
+                          class="bullet-icon"
+                          icon="play"
+                          size="lg" 
+                        ></font-awesome-icon>/
+                        <font-awesome-icon
+                          class="bullet-icon"
+                          icon="pause"
+                          size="lg" 
+                        ></font-awesome-icon>
+                        to play or pause time. 
                       </li>
                       <li>
                         {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
-                              class="bullet-icon"
-                              icon="angle-double-down"
-                              size="lg" 
-                            ></font-awesome-icon>
-                        to decrease speed by 10x.                        
+                          class="bullet-icon"
+                          icon="angles-right"
+                          size="lg" 
+                        ></font-awesome-icon>
+                        to increase speed by 10x, or to move time forward if time was reversed.                        
                       </li>
                       <li>
                         {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
                               class="bullet-icon"
-                              icon="angle-double-up"
+                              icon="rotate"
                               size="lg" 
                             ></font-awesome-icon>
-                        to increase speed by 10x. 
+                        to reset starting time and speed. 
                       </li>
                       <li>
                         {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
                               class="bullet-icon"
-                              icon="rotate"
+                              icon="gauge-high"
                               size="lg" 
                             ></font-awesome-icon>
-                        to reset time, view, and speed. 
+                        to open more speed controls. 
                       </li>
+                        <ul>
+                          <li class="ml-5">
+                            {{ touchscreen ? "Tap" : "Click" }} 
+                            <v-icon
+                              class="bullet-icon"
+                              icon="mdi-step-forward-2"
+                              size="medium">
+                            </v-icon>
+                            or
+                            <v-icon
+                              class="bullet-icon"
+                              icon="mdi-step-backward-2"
+                              size="medium">
+                            </v-icon>
+                            to move time forward and backward.
+                          </li>
+                          <li class="ml-5">
+                            Use the slider to fine-tune desired speed.
+                          </li>
+                        </ul>
                       <li>
                         Drag <v-icon
                           class="bullet-icon"
                           icon="mdi-circle"
                           size="medium" 
-                        ></v-icon> along the slider to move to any time.
+                        ></v-icon> along the main slider to move to any time.
                       </li>
                     </ul>
 
@@ -520,21 +548,22 @@
                     <ul class="text-list">
                       <li class="mb-2">
                         The <span 
+                        v-if="mobile"
                         style="color: blue; background-color: white;
                         padding-inline: 0.7em;
                         border-radius: 20px;
-                        font-weight: bold ">selected location</span>   
+                        font-weight: bold ">historical cloud cover</span><span v-if="mobile">, </span>
                         <span 
-                        v-if="mobile"
                         style="color: blue; background-color: white;
                         padding-inline: 0.7em;
                         border-radius: 20px;
-                        font-weight: bold ">historical cloud cover</span>  
-                        and <span 
+                        font-weight: bold ">date/time</span><span v-if="mobile">,</span> and
+                        <span 
                         style="color: blue; background-color: white;
                         padding-inline: 0.7em;
                         border-radius: 20px;
-                        font-weight: bold ">date/time</span> are displayed under the map.
+                        font-weight: bold ">selected location</span>   
+                        are displayed under the map.
                       </li>
                       <li class="switch-bullets">
                         <v-switch
@@ -571,6 +600,9 @@
                     <h4 class="user-guide-header">Display Options:</h4>
                     <p  class="mb-3">(Bottom-right of the screen)</p>
                     <ul class="text-list">
+                      <li>
+                        <span class="user-guide-emphasis-white">Center Sun:</span> Recenter view on Sun.
+                      </li>
                       <li>
                         <span class="user-guide-emphasis-white">Sky Grid:</span> Display altitude/azimuth grid with cardinal directions.
                       </li>
@@ -590,6 +622,13 @@
                     <h4 class="user-guide-header">Location Options:</h4>
                     <p  class="mb-3">(Top-left of the screen)</p>
                     <ul class="text-list">
+                      <li>
+                        {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
+                              class="bullet-icon"
+                              icon="magnifying-glass"
+                              size="lg" 
+                            ></font-awesome-icon> to search for a specific location name.
+                      </li>
                       <li>
                         {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon
                               class="bullet-icon"
@@ -1286,7 +1325,7 @@
                     :fa-icon="playbackVisible ? 'times' : 'gauge-high'"
                     :color="accentColor"
                     :focus-color="accentColor"
-                    tooltip-text="Time Controls"
+                    tooltip-text="Speed Controls"
                     tooltip-location="top"
                     tooltip-offset="5px"
                     faSize="1x"

From f11ad9ba26816febb71de352716e1c3e7b33ffb7 Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 16:44:04 -0400
Subject: [PATCH 53/55] Update splash screen and re-label section to include
 "detailed"

---
 src/SolarEclipse2024.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index 74993fce..e4a4fd2e 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -56,7 +56,7 @@
                 >View Historical Cloud Data
               </span>
               <span v-if="learnerPath=='CloudDetail'"
-                >Explore Historical Cloud Data
+                >Explore Detailed Cloud Data
               </span>
             </div>
 
@@ -929,7 +929,9 @@
               /> View historical cloud data
             </v-col>
             <v-col cols="12">
-            <img class="svg-inline--fa rounded-lg bg-red"  style="height:1.2em;margin-inline:10px" src="./assets/new-rectangle-solid-svgrepo-com.svg"> <span class="text-red">Detailed Cloud Data View</span>
+              <font-awesome-icon
+                icon="chart-column"
+              />New! Detailed cloud explorer
             </v-col>
             <v-col cols="12">
               <font-awesome-icon
@@ -4380,7 +4382,7 @@ body {
 
   #splash-screen-guide {
     margin-block: 1em;
-    font-size: min(5vw, 4vh);
+    font-size: min(4.5vw, 3.6vh);
     line-height: 160%;
     width: 75%;
 
@@ -4395,9 +4397,9 @@ body {
   }
 
   #splash-screen-acknowledgements {
-    font-size: calc(1.7 * var(--default-font-size));
-    line-height: calc(1.5 * var(--default-line-height));
-    width: 60%; 
+    font-size: calc(1.3 * var(--default-font-size));
+    line-height: calc(1.2 * var(--default-line-height));
+    width: 80%; 
   }
 
   #splash-screen-logos {

From 6cefb46980a58ff2b0ac672209086946e2979a76 Mon Sep 17 00:00:00 2001
From: Pat Udomprasert <pudompra@cfa.harvard.edu>
Date: Fri, 15 Mar 2024 16:54:20 -0400
Subject: [PATCH 54/55] Correct description of modis/aqua

---
 src/SolarEclipse2024.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index e4a4fd2e..5e22efcc 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -140,7 +140,7 @@
               <span class="description">
                 <div class=".d-flex">
                   <div>
-                    This map shows historical cloud cover data for the week of April 8 for the years 2003&#8211;2023 from the <a href="https://modis.gsfc.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA MODIS</a> Aqua satellite.
+                    This map shows historical cloud cover data for the week of April 8 for the years 2003&#8211;2023 from <a href="https://modis.gsfc.nasa.gov/" target="_blank" rel="noopener noreferrer">MODIS</a> on NASA's Aqua satellite.
                     {{ touchscreen ? "Tap" : "Click" }} the map to display the <define-term term="median" definition="For <strong>half</strong> of the years from 2003–2023 on April 8, the cloud cover amount was <strong>less</strong> than the median value. For the other <strong>half</strong> of the years, the cloud cover was <strong>more</strong> than the median value."/> cloud coverage for a particular location (within about 100 km).
                   </div>
                   <div>

From c18f2ad210246dc10f56cd5f0f7b3cd2eb4f1644 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:55:15 -0400
Subject: [PATCH 55/55] fix typo

---
 src/SolarEclipse2024.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue
index e4a4fd2e..efb8205a 100644
--- a/src/SolarEclipse2024.vue
+++ b/src/SolarEclipse2024.vue
@@ -473,7 +473,7 @@
                               icon="angles-left"
                               size="lg" 
                             ></font-awesome-icon>
-                        to reverse time, or to increase speed by 10x if time was already reversed. 
+                        to reverse time, or to increase reverse speed by 10x if time was already reversed. 
                       </li>
                       <li>
                         {{ touchscreen ? "Tap" : "Click" }} <font-awesome-icon