Merge pull request #31 from concord-consortium/186866310-codap-select…

…-station 186866310 codap select station
concord-consortium · Jan 26, 2024 · 768c385 · 768c385
2 parents acfb495 + ee77717
commit 768c385
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 17 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -7,12 +7,14 @@ import { AttributeFilter } from "./attribute-filter";
 import { InfoModal } from "./info-modal";
 import { useStateContext } from "../hooks/use-state";
 import { adjustStationDataset, getWeatherStations } from "../utils/getWeatherStations";
-import { createStationsDataset } from "../utils/codapHelpers";
+import { addNotificationHandler, createStationsDataset } from "../utils/codapHelpers";
 import InfoIcon from "../assets/images/icon-info.svg";
 import { useCODAPApi } from "../hooks/use-codap-api";
 import { dataTypeStore } from "../utils/noaaDataTypes";
 import { composeURL, formatData } from "../utils/noaaApiHelper";
 import { IDataType } from "../types";
+import { StationDSName } from "../constants";
+import { geoLocSearch } from "../utils/geonameSearch";
 import { DataReturnWarning } from "./data-return-warning";
 
 import "./App.scss";
@@ -34,6 +36,30 @@ export const App = () => {
 
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
+
+
+    const stationSelectionHandler = async(req: any) =>{
+      if (req.values.operation === "selectCases") {
+        const result = req.values.result;
+        const myCase = result && result.cases && result.cases[0];
+        if (myCase) {
+          const station = myCase.values;
+          const {latitude, longitude} = station;
+          const locationName = await geoLocSearch(latitude, longitude);
+          setState((draft) => {
+            draft.weatherStation = station;
+            draft.location = {name: locationName, latitude, longitude};
+            draft.weatherStationDistance = 0;
+          });
+        }
+      }
+    };
+
+    addNotificationHandler("notify",
+      `dataContextChangeNotice[${StationDSName}]`, async (req: any) => {
+        stationSelectionHandler(req);
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -111,7 +137,7 @@ export const App = () => {
 
   const handleGetData = async () => {
     const { location, startDate, endDate, weatherStation, frequencies,
-      selectedFrequency, timezone } = state;
+      selectedFrequency, timezone, units } = state;
     const attributes = frequencies[selectedFrequency].attrs.map(attr => attr.name);
     const allDefined = (startDate && endDate && location && weatherStation && timezone);
 
@@ -125,7 +151,8 @@ export const App = () => {
           frequency: selectedFrequency,
           weatherStation,
           attributes,
-          gmtOffset: timezone.gmtOffset
+          gmtOffset: timezone.gmtOffset,
+          units
         });
         try {
           const tRequest = new Request(tURL);

diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import classnames from "classnames";
-import { createMap, selectStations } from "../utils/codapHelpers";
 import { autoComplete, geoLocSearch } from "../utils/geonameSearch";
-import { kStationsCollectionName, geonamesUser, kOffsetMap, timezoneServiceURL } from "../constants";
+import { geonamesUser, kOffsetMap, timezoneServiceURL } from "../constants";
 import { useStateContext } from "../hooks/use-state";
 import { IPlace, IStation } from "../types";
 import { convertDistanceToStandard, findNearestActiveStations } from "../utils/getWeatherStations";
@@ -31,9 +30,10 @@ export const LocationPicker = () => {
   const stationSelectionListElRef = useRef<HTMLUListElement>(null);
   const firstStationListedRef = useRef<HTMLSpanElement>(null);
   const unitDistanceText = units === "standard" ? "mi" : "km";
-  const stationDistance = weatherStationDistance && units === "standard" ? convertDistanceToStandard(weatherStationDistance) : weatherStationDistance;
-
-
+  const stationDistance =
+          weatherStationDistance === undefined
+            ? 0 : units === "standard" ? convertDistanceToStandard(weatherStationDistance)
+                                        : weatherStationDistance;
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (event.target) {
@@ -212,6 +212,7 @@ export const LocationPicker = () => {
         placeNameSelected(locationPossibilities[selectedLocIdx]);
         setState(draft=>{
           draft.location = locationPossibilities[selectedLocIdx];
+          draft.zoomMap = true;
         });
       }
     }
@@ -220,7 +221,9 @@ export const LocationPicker = () => {
   const handlePlaceNameSelectionKeyDown = (e: React.KeyboardEvent<HTMLLIElement>, index: number) => {
     if (e.key === "Enter") {
       placeNameSelected(locationPossibilities[index-1]);
-
+      setState(draft => {
+        draft.zoomMap = true;
+      });
     }
   };
 
@@ -237,6 +240,9 @@ export const LocationPicker = () => {
         });
       }
       setShowStationSelectionList(false);
+      setState(draft => {
+        draft.zoomMap = false;
+      });
     }
   };
 
@@ -249,6 +255,9 @@ export const LocationPicker = () => {
         draft.weatherStationDistance = stationPossibilities[index].distance;
       });
       setShowStationSelectionList(false);
+      setState(draft => {
+        draft.zoomMap = false;
+      });
     }
   };
 
@@ -277,10 +286,10 @@ export const LocationPicker = () => {
 
   const handleOpenMap = () => {
     if (weatherStation) {
-      createMap(kStationsCollectionName, {width: 500, height: 350}, [weatherStation.latitude, weatherStation.longitude], 7);
-      selectStations([weatherStation.name]);
-    } else if (location) {
-      createMap(kStationsCollectionName, {width: 500, height: 350}, [location.latitude, location.longitude], 7);
+      setState((draft) => {
+        draft.isMapOpen = true;
+        draft.zoomMap = true;
+      });
     }
   };
 

diff --git a/src/hooks/use-codap-api.tsx b/src/hooks/use-codap-api.tsx
@@ -1,11 +1,21 @@
 import { Attribute, Collection, DataContext, IDataType, IItem } from "../types";
 import { IResult, codapInterface, createItems, getDataContext } from "@concord-consortium/codap-plugin-api";
-import { DSCollection1, DSCollection2, DSName } from "../constants";
+import { DSCollection1, DSCollection2, DSName, kStationsCollectionName } from "../constants";
 import { useStateContext } from "./use-state";
+import { useEffect } from "react";
+import { createMap, selectStations } from "../utils/codapHelpers";
 
 export const useCODAPApi = () => {
   const {state} = useStateContext();
 
+  useEffect(() => {
+    if (state.weatherStation && state.isMapOpen) {
+      const zoom = state.zoomMap ? 7 : null;
+      createMap(kStationsCollectionName, {width: 500, height: 350}, [state.weatherStation.latitude, state.weatherStation.longitude], zoom);
+      selectStations([state.weatherStation.name]);
+    }
+  }, [state.isMapOpen, state.weatherStation, state.zoomMap]);
+
   const getNoaaDataContextSetupObject = () => {
     return {
         name: DSName,

diff --git a/src/types.ts b/src/types.ts
@@ -119,6 +119,8 @@ export interface IState {
   showModal?: "info" | "data-return-warning";
   timezone?: ITimeZone;
   didUserSelectDate: boolean;
+  isMapOpen: boolean;
+  zoomMap: boolean;
 }
 
 export const unitMap: UnitMap = {
@@ -157,6 +159,8 @@ export const DefaultState: IState = {
                 monthly: {attrs: dailyMonthlyAttrMap, filters: []}},
   units: "standard",
   didUserSelectDate: false,
+  isMapOpen: false,
+  zoomMap: false,
 };
 
 interface IDataTypeUnits {

diff --git a/src/utils/codapHelpers.ts b/src/utils/codapHelpers.ts
@@ -20,7 +20,7 @@ const hasDataset = async (name: string) => {
    return result.success === true;
 };
 
-const createMap = async (name: string, dimensions: IDimensions, center: ILatLong, zoom: number) => {
+const createMap = async (name: string, dimensions: IDimensions, center: ILatLong, zoom: number | null) => {
    let map;
 
    let componentListResult = await codapInterface.sendRequest({

diff --git a/src/utils/noaaApiHelper.ts b/src/utils/noaaApiHelper.ts
@@ -84,10 +84,11 @@ interface IComposeURL {
   attributes: string[];
   weatherStation: IWeatherStation;
   gmtOffset: string;
+  units: IUnits;
 }
 
 export const composeURL = (props: IComposeURL) => {
-  const { startDate, endDate, frequency, attributes, weatherStation, gmtOffset } = props;
+  const { startDate, endDate, frequency, attributes, weatherStation, gmtOffset, units } = props;
   const database = frequencyToReportTypeMap[frequency];
   const format = "YYYY-MM-DDThh:mm:ss";
   let sDate = dayjs(startDate);
@@ -108,7 +109,7 @@ export const composeURL = (props: IComposeURL) => {
   const tDataTypeIDClause = `dataTypes=${dataTypes.join()}`;
   const tStartDateClause = `startDate=${startDateString}`;
   const tEndDateClause = `endDate=${endDateString}`;
-  const tUnitClause = `units=metric`;
+  const tUnitClause = `units=${units}`;
   const tFormatClause = "format=json";
 
   let tURL = [nceiBaseURL, [tDatasetIDClause, tStationIDClause, tStartDateClause, tEndDateClause, tFormatClause, tDataTypeIDClause, tUnitClause].join(