Merge pull request #13 from concord-consortium/years-warning-pop-up

Show warning if user selects years unavailable for selected attributes (PT-185951219)

.eslintrc.js

@@ -56,7 +56,7 @@ module.exports = {
     "import/no-extraneous-dependencies": "warn",
     "import/no-useless-path-segments": "warn",
     "jsx-quotes": ["error", "prefer-double"],
-    "max-len": ["warn", { code: 120, ignoreUrls: true }],
+    "max-len": ["off"],
     "no-bitwise": "error",
     "no-debugger": "off",
     "no-duplicate-imports": "error",

src/components/app.tsx

@@ -10,6 +10,9 @@ import { connect } from "../scripts/connect";
 import ProgressIndicator from "../assets/progress-indicator.svg";
 import Checkmark from "../assets/done.svg";
 import Error from "../assets/warning.svg";
+import { flatten } from "../scripts/utils";
+import { queryData } from "../constants/queryHeaders";
+import { strings } from "../constants/strings";
 
 import css from "./app.scss";
 
@@ -20,6 +23,7 @@ function App() {
   const [statusMessage, setStatusMessage] = useState<string>("");
   const [statusGraphic, setStatusGraphic] = useState<React.ReactElement>();
   const [showWarning, setShowWarning] = useState<boolean>(false);
+  const [warningMessage, setWarningMessage] = useState<JSX.Element>(<p/>);
 
   useEffect(() => {
     const init = async () => {
@@ -49,28 +53,56 @@ function App() {
   };
 
   const getData = async () => {
-    setStatusMessage("Fetching data...");
+    setStatusMessage(strings.fetchingMsg);
     setStatusGraphic(<ProgressIndicator/>);
     const res = await createTableFromSelections(selectedOptions);
     if (res !== "success") {
-      setStatusMessage("Fetch Error. Please retry.");
+      setStatusMessage(strings.fetchSuccess);
       setStatusGraphic(<Error/>);
     } else {
-      setStatusMessage("Fetched data.");
+      setStatusMessage(strings.fetchError);
       setStatusGraphic(<Checkmark/>);
     }
   };
 
   const handleGetData = async () => {
     const numberOfRows = getNumberOfItems(selectedOptions);
-    if (numberOfRows > 4000) {
+    const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key);
+    const selectedAttrKeys = attrKeys.filter((key) => selectedOptions[key].length > 0);
+    const allSelectedAttrs = flatten(selectedAttrKeys.map((key) => selectedOptions[key]));
+    const selectedYears = selectedOptions.years;
+    let showYearsWarning = false;
+
+    allSelectedAttrs.forEach((attr) => {
+      const attrInfo = queryData.find((q) => q.plugInAttribute === attr);
+      if (attrInfo) {
+        const availableYears = attrInfo.years[selectedOptions.geographicLevel];
+        for (let i = 0; i < selectedYears.length; i ++) {
+          const y = selectedYears[i];
+          if (!availableYears.includes(y)) {
+            showYearsWarning = true;
+            break;
+          }
+        }
+      }
+    });
+
+    if (showYearsWarning || numberOfRows > 4000) {
+      const warningMsg = showYearsWarning && numberOfRows > 4000 ?
+        <div>
+          <p>{strings.rowsWarning}</p>
+          <p>{strings.yearsWarning}</p>
+        </div> : showYearsWarning ? <p>{strings.yearsWarning}</p> :
+        <p>{strings.rowsWarning}</p>;
+      setWarningMessage(warningMsg);
       setShowWarning(true);
     } else {
       await getData();
     }
   };
 
   const handleCloseWarning = async (getDataAnyway: boolean) => {
+    setWarningMessage(<p/>);
     setShowWarning(false);
     if (getDataAnyway) {
       await getData();
@@ -85,10 +117,10 @@ function App() {
       <div className={css.introSection}>
         <div className={css.sectionHeaderLine}>
         <span className={css.sectionHeaderText}>
-          Retrieve data on U.S. agricultural statistics at the state or county level.
+          {strings.appDescription}
         </span>
         <span
-          title="Further information about this CODAP plugin"
+          title={strings.infoTitle}
           className={classnames(css.infoButton, {[css.disabled]: showInfo})}
           onClick={handleInfoClick}
         />
@@ -112,10 +144,15 @@ function App() {
           <div>{statusGraphic}</div>
           <div>{statusMessage}</div>
         </div>
-        <button className={css.getDataButton} disabled={getDataDisabled} onClick={handleGetData}>Get Data</button>
+        <button className={css.getDataButton} disabled={getDataDisabled} onClick={handleGetData}>
+          {strings.getData}
+        </button>
       </div>
       { showWarning &&
-        <Warning handleCloseWarning={handleCloseWarning}/>
+        <Warning
+          handleCloseWarning={handleCloseWarning}
+          message={warningMessage}
+        />
       }
     </div>
 

src/components/warning.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import WarningIcon from "../assets/warning.svg";
 import css from "./warning.scss";
 
 interface IProps {
-  handleCloseWarning: (getDataAnyway: boolean) => void
+  handleCloseWarning: (getDataAnyway: boolean) => void;
+  message: JSX.Element;
 }
 
 export const Warning: React.FC<IProps> = (props) => {
-  const {handleCloseWarning} = props;
+  const {handleCloseWarning, message} = props;
   return (
     <div className={css.popUp}>
       <div className={css.popUpContent}>
@@ -16,7 +16,7 @@ export const Warning: React.FC<IProps> = (props) => {
         </div>
         <div className={css.popUpBody}>
           <div className={css.text}>
-          The number of attributes you have selected is over 4000 rows and may lead to the program running slowly.
+            {message}
           </div>
         </div>
         <div className={css.popUpFooter}>

src/components/years-options.tsx

@@ -38,8 +38,7 @@ export const YearsOptions: React.FC<IProps> = (props) => {
       return years;
     }, new Set());
     const newSet: string[] = Array.from(newAvailableYears);
-    const sorted = newSet.sort().reverse();
-    setAvailableYearOptions(sorted);
+    setAvailableYearOptions(newSet);
 
     // if selected years includes years not in available options, remove them from selection
     const selectionsNotAvailable = selectedOptions.years.filter(year => !newSet.includes(year));

src/constants/strings.ts

@@ -0,0 +1,10 @@
+export const strings = {
+  appDescription: "Retrieve data on U.S. agricultural statistics at the state or county level.",
+  infoTitle: "Further information about this CODAP plugin",
+  getData: "Get Data",
+  yearsWarning: "Some of the attributes you selected are not available for all the years you selected.",
+  rowsWarning: "The number of attributes you have selected is over 4000 rows and may lead to the program running slowly.",
+  fetchingMsg: "Fetching data...",
+  fetchError: "Fetch Error. Please retry.",
+  fetchSuccess: "Fetched data."
+};