Merge branch 'main' into 186866310-codap-select-station

src/components/App.scss

@@ -1,10 +1,6 @@
-.body {
-  width: 360px;
-}
-
 .App {
   padding: 12px;
-  box-sizing: border-box;
+  box-sizing: content-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,6 +20,10 @@
     background-color: #fff;
   }
 
+  .info-icon {
+    cursor: pointer;
+  }
+
   .header-divider {
     width: 313px;
     border: solid 1px #979797;

src/components/App.tsx

@@ -6,33 +6,34 @@ import { AttributesSelector } from "./attribute-selector";
 import { AttributeFilter } from "./attribute-filter";
 import { InfoModal } from "./info-modal";
 import { useStateContext } from "../hooks/use-state";
-import { adjustStationDataset } from "../utils/getWeatherStations";
-import { addNotificationHandler, createStationsDataset } from "../utils/codapHelpers";
-import weatherStations from "../assets/data/weather-stations.json";
+import { adjustStationDataset, getWeatherStations } from "../utils/getWeatherStations";
+import { 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";
 
 const kPluginName = "NOAA Weather Station Data";
 const kVersion = "0014";
 const kInitialDimensions = {
   width: 360,
-  height: 495
+  height: 650
 };
 
 export const App = () => {
   const { state, setState } = useStateContext();
-  const { createNOAAItems } = useCODAPApi();
+  const { filterItems, createNOAAItems } = useCODAPApi();
   const [statusMessage, setStatusMessage] = useState("");
   const [isFetching, setIsFetching] = useState(false);
   // const [listenerNotification, setListenerNotification] = useState<string>();
   const { showModal } = state;
+  const weatherStations = getWeatherStations();
 
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
@@ -65,7 +66,7 @@ export const App = () => {
   useEffect(() => {
     adjustStationDataset(weatherStations); //change max data to "present"
     createStationsDataset(weatherStations); //send weather station data to CODAP
-  },[]);
+  },[weatherStations]);
 
   const handleOpenInfo = () => {
     setState(draft => {
@@ -82,23 +83,29 @@ export const App = () => {
   };
 
   const fetchSuccessHandler = async (data: any) => {
-    const {stationTimezoneOffset, weatherStation, selectedFrequency, startDate, endDate, units} = state;
-    if (data && weatherStation) {
+    const {startDate, endDate, units, selectedFrequency,
+      weatherStation, timezone} = state;
+    const allDefined = (startDate && endDate && units && selectedFrequency &&
+      weatherStation && timezone);
+
+    if (data && allDefined) {
       const formatDataProps = {
         data,
-        stationTimezoneOffset,
+        timezone,
         weatherStation,
         frequency: selectedFrequency,
         startDate,
         endDate,
         units
       };
       const dataRecords = formatData(formatDataProps);
+      const items = Array.isArray(dataRecords) ? dataRecords : [dataRecords];
+      const filteredItems = filterItems(items);
       setStatusMessage("Sending weather records to CODAP");
-      await createNOAAItems(dataRecords, getSelectedDataTypes()).then(
+      await createNOAAItems(filteredItems, getSelectedDataTypes()).then(
         function (result: any) {
           setIsFetching(false);
-          setStatusMessage(`Retrieved ${dataRecords.length} cases`);
+          setStatusMessage(`Retrieved ${filteredItems.length} cases`);
           return result;
         },
         function (msg: string) {
@@ -130,9 +137,12 @@ export const App = () => {
   };
 
   const handleGetData = async () => {
-    const { location, startDate, endDate, selectedFrequency, weatherStation, stationTimezoneOffset } = state;
-    const attributes = state.frequencies[selectedFrequency].attrs.map(attr => attr.name);
-    if (location && attributes && startDate && endDate && weatherStation && selectedFrequency) {
+    const { location, startDate, endDate, weatherStation, frequencies,
+      selectedFrequency, timezone } = state;
+    const attributes = frequencies[selectedFrequency].attrs.map(attr => attr.name);
+    const allDefined = (startDate && endDate && location && weatherStation && timezone);
+
+    if (allDefined) {
       const isEndDateAfterStartDate = endDate.getTime() >= startDate.getTime();
       if (isEndDateAfterStartDate) {
         setStatusMessage("Fetching weather records from NOAA");
@@ -142,7 +152,7 @@ export const App = () => {
           frequency: selectedFrequency,
           weatherStation,
           attributes,
-          stationTimezoneOffset
+          gmtOffset: timezone.gmtOffset
         });
         try {
           const tRequest = new Request(tURL);
@@ -175,7 +185,7 @@ export const App = () => {
     <div className="App">
       <div className="header">
         <span>Retrieve weather data from observing stations.</span>
-        <InfoIcon title="Get further information about this CODAP plugin" onClick={handleOpenInfo}/>
+        <InfoIcon className="info-icon" title="Get further information about this CODAP plugin" onClick={handleOpenInfo}/>
       </div>
       <div className="header-divider" />
       <LocationPicker />
@@ -191,6 +201,7 @@ export const App = () => {
         <button className="get-data-button" disabled={isFetching} onClick={handleGetData}>Get Data</button>
       </div>
       {showModal === "info" && <InfoModal />}
+      {showModal === "data-return-warning" && <DataReturnWarning />}
     </div>
   );
 };

src/components/attribute-filter.scss

@@ -3,7 +3,7 @@ $filter-background-green: rgba(90, 249, 90, 0.25);
 $filter-green: #2dbe5e;
 
 .attribute-filter-container {
-
+  padding-bottom: 16px;
   .table-header {
     color: rgba(0, 0, 0, 0.48);
     font-size: 10px;
@@ -26,6 +26,7 @@ $filter-green: #2dbe5e;
     &.units-header {
       min-width: 36px;
       background-color: rgba(126, 126, 126, 0.3);
+      cursor: pointer;
     }
     &.filter-header {
       width: 41px;
@@ -60,6 +61,7 @@ $filter-green: #2dbe5e;
       color: #177991;
       font-size: 10px;
       box-sizing: border-box;
+      cursor: pointer;
 
       &.filtering {
         background-color: $filter-background-green;
@@ -86,7 +88,7 @@ $filter-green: #2dbe5e;
   }
 }
 
-table tr:nth-child(odd) {
+table tr:nth-child(even) {
   background-color: rgba(216, 216, 216, 0.3);
 }
 
@@ -130,6 +132,7 @@ table tr:nth-child(odd) {
         text-align: right;
         color: #177991;
         margin: 0 3px;
+        cursor: pointer;
       }
       svg {
         margin-right: 3px;
@@ -205,27 +208,33 @@ table tr:nth-child(odd) {
   }
 
   .filter-operator-selection-container {
-    width: 148px;
-    height: 190px;
-    padding: 9px;
+    width: 165px;
+    max-height: 190px;
+    padding: 9px 12px 5px 9px;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
     background-color: #fff;
     position: relative;
-    right: -22px;
+    right: -5px;
     top: -50px;
     box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     .operator-selection {
       border: none;
       width: 100%;
+      height: 176px;
       outline: none;
+      box-sizing: border-box;
 
       option {
         font-family: "Montserrat", sans-serif;
         font-size: 10px;
         font-weight: 500;
         color: #000;
         padding: 2px 0;
+        height: 12px;
+
         &:hover {
           background-color: $teal-medium;
         }