Merge remote-tracking branch 'origin/188181577-attr-categories'

src/components/header.scss

@@ -3,7 +3,7 @@
 $tab-height: 26px;
 $general-tab-width: 80px;
 $location-tab-width: 104px;
-$simulation-tab-width: 73px;
+$simulation-tab-width: 72px;
 $about-tab-width: 60px;
 $left-tab-margin: 3px;
 
@@ -22,7 +22,7 @@ $left-tab-margin: 3px;
   .tab {
     position: absolute;
     text-align: center;
-    padding: 4px $tab-padding;
+    padding: 4px 10px;
     color: #222;
     border: 1px solid #222;
     margin-right: -1px;

src/components/location-tab.scss

@@ -155,10 +155,48 @@
 
   .data-buttons.plugin-row {
     margin-top: -5px;
-    justify-content: flex-end;
+    justify-content: space-between;
 
-    button {
-      margin-left: 10px;
+    .button-container {
+      display: flex;
+      justify-content: flex-end;
+      flex-direction: row;
+
+      button {
+        margin-left: 10px;
+        white-space: nowrap;
+      }
+    }
+
+    .app-message div {
+      color: $teal-dark;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11.5px;
+
+      svg {
+        margin-right: 5px;
+      }
+
+      &.progress-indicator {
+        @keyframes rotateClockwise {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+
+        svg {
+          animation: rotateClockwise 1s linear infinite;
+        }
+      }
+
+      &.done, &.incomplete, &.error {
+        font-weight: 600;
+      }
     }
   }
 

src/components/location-tab.tsx

@@ -1,25 +1,30 @@
 import React, { useEffect, useState } from "react";
-import { useCodapData } from "../hooks/useCodapData";
+import { getDayLengthAndNASAData, clearData, updateAttributeVisibility } from "../utils/codap-utils";
 import { kAttrCategories, kChildCollectionAttributes } from "../constants";
 import { AttributeCategory, ILocation } from "../types";
 import { LocationPicker } from "./location-picker";
 import { formatLatLongNumber } from "../utils/daylight-utils";
 
+import ProgressIndicator from "../assets/images/progress-indicator.svg";
+import DoneIcon from "../assets/images/done.svg";
+import WarningIcon from "../assets/images/warning.svg";
+
 import "./location-tab.scss";
 import "./get-data-button.scss";
 
+type DataStatus = "" | "retrieving" | "retrieved" | "incomplete" | "error";
+
 export const LocationTab: React.FC = () => {
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
   const [locationSearch, setLocationSearch] = useState<string>("");
   const [selectedAttrCategories, setSelectedAttrCategories] = useState<AttributeCategory[]>(kAttrCategories);
-  const [requestInProgress, setRequestInProgress] = useState(false);
-  const [anyDataRequested, setAnyDataRequested] = useState(false);
-  const { handleClearData, getDayLengthAndNASAData, updateAttributeVisibility } = useCodapData();
+  const [dataStatus, setDataStatus] = useState<DataStatus>("");
+  const [anyDataToClear, setAnyDataToClear] = useState(false);
 
-  const enableGetData = latitude !== "" && longitude !== "" && startDate !== "" && endDate !== "" && !requestInProgress;
+  const enableGetData = latitude !== "" && longitude !== "" && startDate !== "" && endDate !== "" && dataStatus !== "retrieving";
 
   useEffect(() => {
     const updateEachAttrVisibility = () => {
@@ -32,7 +37,7 @@ export const LocationTab: React.FC = () => {
     };
 
     updateEachAttrVisibility();
-  }, [selectedAttrCategories, updateAttributeVisibility]);
+  }, [selectedAttrCategories]);
 
   const handleLatChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setLatitude(event.target.value);
@@ -71,7 +76,9 @@ export const LocationTab: React.FC = () => {
   };
 
   const handleClearDataClick = async () => {
-    await handleClearData();
+    await clearData();
+    setAnyDataToClear(false);
+    setDataStatus("");
   };
 
   const handleGetDataClick = async () => {
@@ -80,14 +87,14 @@ export const LocationTab: React.FC = () => {
     if (!latitude || !longitude || !startDate || !endDate) return;
 
     // if the location does not already exist, and we have params, get the data
-    setRequestInProgress(true);
+    setDataStatus("retrieving");
     try {
-      await getDayLengthAndNASAData(currentLocation, startDate, endDate, selectedAttrCategories);
-      setAnyDataRequested(true);
+      const { dataComplete } = await getDayLengthAndNASAData(currentLocation, startDate, endDate, selectedAttrCategories);
+      setAnyDataToClear(true);
+      setDataStatus(dataComplete ? "retrieved" : "incomplete");
     } catch (error: any) {
       window.alert(error.message);
-    } finally {
-      setRequestInProgress(false);
+      setDataStatus("error");
     }
   };
 
@@ -166,20 +173,37 @@ export const LocationTab: React.FC = () => {
         <hr className="light"/>
       </div>
       <div className="plugin-row data-buttons">
-        <button
-          className="clear-data-button"
-          disabled={!anyDataRequested}
-          onClick={handleClearDataClick}
-        >
-          Clear Data
-        </button>
-        <button
-          className="get-data-button"
-          disabled={!enableGetData}
-          onClick={handleGetDataClick}
-        >
-          Get Data
-        </button>
+        <div className="app-message">
+          {
+            dataStatus === "retrieving" &&
+            <div className="progress-indicator"><ProgressIndicator /> Retrieving data...</div>
+          }
+          {
+            dataStatus === "retrieved" && <div className="done"><DoneIcon /> Retrieved data</div>
+          }
+          {
+            dataStatus === "incomplete" && <div className="incomplete"><WarningIcon /> Some data requested are not available</div>
+          }
+          {
+            dataStatus === "error" && <div className="error"><WarningIcon /> Error retrieving data</div>
+          }
+        </div>
+        <div className="button-container">
+          <button
+            className="clear-data-button"
+            disabled={!anyDataToClear}
+            onClick={handleClearDataClick}
+          >
+            Clear Data
+          </button>
+          <button
+            className="get-data-button"
+            disabled={!enableGetData}
+            onClick={handleGetDataClick}
+          >
+            Get Data
+          </button>
+        </div>
       </div>
     </div>
   );