Detects if station selection came from CODAP map and calculates dista…

…nce of station from location lat long
concord-consortium · Jan 31, 2024 · a707cf3 · a707cf3
1 parent f2e20d2
commit a707cf3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -6,14 +6,14 @@ import { AttributesSelector } from "./attribute-selector";
 import { AttributeFilter } from "./attribute-filter";
 import { InfoModal } from "./info-modal";
 import { useStateContext } from "../hooks/use-state";
-import { adjustStationDataset, getWeatherStations } from "../utils/getWeatherStations";
+import { adjustStationDataset, calculateDistance, getWeatherStations } from "../utils/getWeatherStations";
 import { addNotificationHandler, createStationsDataset, guaranteeGlobal } from "../utils/codapHelpers";
 import InfoIcon from "../assets/images/icon-info.svg";
 import { useCODAPApi } from "../hooks/use-codap-api";
 import { composeURL, formatData } from "../utils/noaaApiHelper";
-import { IDataType } from "../types";
+// import { IDataType } from "../types";
 import { StationDSName, globalMaxDate, globalMinDate } from "../constants";
-import { geoLocSearch } from "../utils/geonameSearch";
+import { geoLocSearch, geoNameSearch } from "../utils/geonameSearch";
 import { DataReturnWarning } from "./data-return-warning";
 
 import "./App.scss";
@@ -44,11 +44,14 @@ export const App = () => {
           const station = myCase.values;
           const {latitude, longitude} = station;
           const locationName = await geoLocSearch(latitude, longitude);
+          const locale = await geoNameSearch(locationName, 1);
+          const distance = locale && calculateDistance(latitude, longitude, locale[0].latitude, locale[0].longitude);
           setState((draft) => {
             draft.weatherStation = station;
             draft.location = {name: locationName, latitude, longitude};
-            draft.weatherStationDistance = 0;
+            draft.weatherStationDistance = distance;
             draft.zoomMap = false;
+            draft.didUserSelectStationFromMap = true;
           });
         }
       }

diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
@@ -14,7 +14,7 @@ import "./location-picker.scss";
 
 export const LocationPicker = () => {
   const {state, setState} = useStateContext();
-  const {units, location, weatherStation, weatherStationDistance, startDate, endDate} = state;
+  const {units, location, weatherStation, weatherStationDistance, startDate, endDate, didUserSelectStationFromMap} = state;
   const [showMapButton, setShowMapButton] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [locationPossibilities, setLocationPossibilities] = useState<IPlace[]>([]);
@@ -71,7 +71,7 @@ export const LocationPicker = () => {
   useEffect(() => {
     const _startDate = startDate ? startDate : new Date( -5364662060); // 1/1/1750
     const _endDate = endDate ? endDate : new Date(Date.now());
-    if (location) {
+    if (location && !didUserSelectStationFromMap) {
       findNearestActiveStations(location.latitude, location.longitude, _startDate, _endDate)
         .then((stationList: IStation[]) => {
           if (stationList) {
@@ -110,7 +110,7 @@ export const LocationPicker = () => {
       });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  },[endDate, isEditing, location, startDate]);
+  },[endDate, isEditing, location, startDate, didUserSelectStationFromMap]);
 
   useEffect(() => {
     if (showStationSelectionList) {
@@ -137,6 +137,7 @@ export const LocationPicker = () => {
   const placeNameSelected = (place: IPlace | undefined) => {
     setState(draft => {
       draft.location = place;
+      draft.didUserSelectStationFromMap = false;
     });
     setShowSelectionList(false);
     setIsEditing(false);
@@ -149,6 +150,7 @@ export const LocationPicker = () => {
   const stationSelected = (station: IWeatherStation | undefined) => {
     setState(draft => {
       draft.weatherStation = station;
+      draft.didUserSelectStationFromMap = false;
     });
     setShowStationSelectionList(false);
     setStationHoveredIndex(null);
@@ -218,6 +220,7 @@ export const LocationPicker = () => {
         setState(draft=>{
           draft.location = locationPossibilities[selectedLocIdx];
           draft.zoomMap = true;
+          draft.didUserSelectStationFromMap = false;
         });
       }
     }
@@ -240,6 +243,7 @@ export const LocationPicker = () => {
         const selectedStation = stationPossibilities[selectedLocIdx].station;
         stationSelected(selectedStation);
         setState(draft => {
+          draft.didUserSelectStationFromMap = false;
           draft.weatherStation = selectedStation;
           draft.weatherStationDistance = stationPossibilities[selectedLocIdx].distance;
         });
@@ -273,6 +277,7 @@ export const LocationPicker = () => {
       geoLocSearch(lat, long).then((currPosName) => {
         setState(draft => {
           draft.location = {name: currPosName, latitude: lat, longitude: long};
+          draft.didUserSelectStationFromMap = false;
         });
         setShowMapButton(true);
         setIsEditing(false);

diff --git a/src/types.ts b/src/types.ts
@@ -124,6 +124,7 @@ export interface IState {
   didUserSelectDate: boolean;
   isMapOpen: boolean;
   zoomMap: boolean;
+  didUserSelectStationFromMap: boolean;
 }
 
 export const unitMap: UnitMap = {
@@ -164,6 +165,7 @@ export const DefaultState: IState = {
   didUserSelectDate: false,
   isMapOpen: false,
   zoomMap: false,
+  didUserSelectStationFromMap: false,
 };
 
 interface IDataTypeUnits {

diff --git a/src/utils/geonameSearch.ts b/src/utils/geonameSearch.ts
@@ -7,7 +7,7 @@ const kDefaultMaxRows = 4;
 const kGeonamesUser = "codap";
 
 
-async function geoNameSearch(searchString: string, maxRows?: number): Promise<IPlace[] | undefined> {
+export const geoNameSearch = async (searchString: string, maxRows?: number): Promise<IPlace[] | undefined> =>{
   const userClause = `username=${kGeonamesUser}`;
   const countryClause = "country=US";
   const maxRowsClause = `maxRows=${maxRows || kDefaultMaxRows}`;
@@ -34,7 +34,7 @@ async function geoNameSearch(searchString: string, maxRows?: number): Promise<IP
       });
     }
   }
-}
+};
 
 export const autoComplete = async(inputEl: HTMLInputElement) => {
   let thisQuery = inputEl.value;