Merge pull request #5 from concord-consortium/185986613-get-data

Query database and create CODAP table (PT-185986613)

src/components/app.scss

@@ -86,7 +86,7 @@ button {
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 500;
-  &:hover {
+  &:hover:not(:disabled) {
     cursor: pointer;
     background: $teal-light-12;
   }

src/components/app.tsx

@@ -2,19 +2,36 @@ import React, {useEffect, useState} from "react";
 import { Dropdown } from "./dropdown";
 import classnames from "classnames";
 import { Information } from "./information";
-import { categories, defaultSelectedOptions } from "./constants";
-import { IStateOptions } from "./types";
+import { attributeOptions, categories, defaultSelectedOptions } from "../constants/constants";
+import { IStateOptions } from "../constants/types";
+import { createTableFromSelections } from "../scripts/api";
+import { connect } from "../scripts/connect";
+
 
 import css from "./app.scss";
-import { runTestQuery } from "../scripts/api";
 
 function App() {
   const [showInfo, setShowInfo] = useState<boolean>(false);
   const [selectedOptions, setSelectedOptions] = useState<IStateOptions>(defaultSelectedOptions);
+  const [getDataDisabled, setGetDataDisabled] = useState<boolean>(true);
+
+  useEffect(() => {
+    const init = async () => {
+      await connect.initialize();
+    };
+    init();
+  }, []);
 
   useEffect(() => {
-    runTestQuery();
-  }, [])
+    const {geographicLevel, states, years} = selectedOptions;
+    const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key);
+    const selectedAttrKeys = attrKeys.filter((key) => selectedOptions[key].length > 0);
+    if (selectedAttrKeys.length && geographicLevel && states.length && years.length) {
+      setGetDataDisabled(false);
+    } else {
+      setGetDataDisabled(true);
+    }
+  }, [selectedOptions]);
 
   const handleSetSelectedOptions = (option: string, value: string | string[]) => {
     const newSelectedOptions = {...selectedOptions, [option]: value};
@@ -25,6 +42,10 @@ function App() {
     setShowInfo(true);
   };
 
+  const handleGetData = async () => {
+    await createTableFromSelections(selectedOptions);
+  };
+
   return (
     <div className={css.pluginContent}>
       { showInfo &&
@@ -52,12 +73,12 @@ function App() {
               handleSetSelectedOptions={handleSetSelectedOptions}
               selectedOptions={selectedOptions}
             />
-          )
+          );
         })}
       </div>
       <div className={css.summary}>
         <span className={css.statusGraphic}></span>
-        <button className={css.getDataButton}>Get Data</button>
+        <button className={css.getDataButton} disabled={getDataDisabled} onClick={handleGetData}>Get Data</button>
       </div>
     </div>
 

src/components/attribute-options.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Options } from "./options";
-import { attributeOptions } from "./constants";
+import { attributeOptions } from "../constants/constants";
 import classnames from "classnames";
-import { IStateOptions } from "./types";
+import { IStateOptions } from "../constants/types";
 
 import css from "./options.scss";
 
@@ -15,7 +15,6 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
   const {handleSetSelectedOptions, selectedOptions} = props;
 
   const commonProps = {
-    inputType: "checkbox" as "checkbox"|"radio",
     handleSetSelectedOptions,
     selectedOptions
   };
@@ -34,11 +33,16 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
         attributeOptions.map((attr) => {
           return (
             <>
-            {attr.label && <div key={`header-${attr.key}`} className={css.category}>{attr.label}</div>}
-            {attr.instructions && <div key={`instructions-${attr.key}`} className={css.instructions}>{attr.instructions}</div>}
+            {attr.label && <div key={`header-${attr.key}`} className={css.statisticcat_desc}>{attr.label}</div>}
+            {attr.instructions &&
+              <div key={`instructions-${attr.key}`} className={css.instructions}>
+                {attr.instructions}
+              </div>
+            }
             <div key={`options-container-${attr.key}`} className={classnames(getClasses(attr.key))}>
               <Options
                 key={`options-${attr.key}`}
+                inputType={attr.key === "cropUnits" ? "radio" : "checkbox"}
                 options={attr.options}
                 optionKey={attr.key}
                 {...commonProps}

src/components/dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import classnames from "classnames";
 import { PlaceOptions } from "./place-options";
-import { defaultSelectedOptions } from "./constants";
+import { defaultSelectedOptions } from "../constants/constants";
 import { AttributeOptions } from "./attribute-options";
 
 import css from "./dropdown.scss";
@@ -28,7 +28,7 @@ export const Dropdown: React.FC<IProps> = (props) => {
   const renderOptions = () => {
     return category === "Place" ? <PlaceOptions {...commonProps}/> :
     category === "Attributes" ? <AttributeOptions {...commonProps}/> :
-    <YearsOptions {...commonProps}/>
+    <YearsOptions {...commonProps}/>;
   };
 
   return (

src/components/information.tsx

@@ -13,7 +13,7 @@ export const Information: React.FC<IProps> = (props) => {
     <div className={css.popUp}>
       <div className={css.popUpContent}>
         <div className={css.popUpBody}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum velit, pellentesque eget turpis non, vestibulum egestas tellus. Fusce sed dolor hendrerit, rutrum ligula et, imperdiet est. Nam tincidunt leo a ultricies elementum. Quisque ornare eget massa ac congue. Curabitur et nisi orci. Nulla mollis lacus eu velit mollis, in vehicula lectus ultricies. Nulla facilisi.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum velit, pellentesque eget turpis.
         </div>
         <div className={css.popUpFooter}>
           <div className={css.controlRow}>

src/components/options.scss

@@ -68,7 +68,7 @@
   }
 }
 
-.category {
+.statisticcat_desc {
   font-weight: 600;
 }
 

src/components/options.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IStateOptions, OptionKey } from "./types";
+import { IStateOptions, OptionKey } from "../constants/types";
 
 import css from "./options.scss";
 
@@ -28,13 +28,30 @@ export const Options: React.FC<IOptions> = (props) => {
       let newArray = [...selectedOptions[optionKey]];
       if (e.currentTarget.checked) {
         newArray.push(e.target.value);
+        // If user selects "Age", "Gender", or "Race", auto-select "Total Farmers" as well
+        if (optionKey === "farmerDemographics" && !newArray.includes("Total Farmers")) {
+          newArray.push("Total Farmers");
+        }
+        // If user selects a state, de-select "All States"
+        if (optionKey === "states" && newArray.includes("All States")) {
+            newArray = newArray.filter((state) => state !== "All States");
+        }
         newArray.sort();
         if (optionKey === "years") {
           newArray.reverse();
         }
       } else {
         if (isOptionSelected(e.target.value)) {
-          newArray = newArray.filter((o) => o !== e.target.value);
+          const includes = (opt: string) => selectedOptions.farmerDemographics.includes(opt);
+          // "Total Farmers" can only be unselected if race, gender, and age are unselected
+          if (optionKey === "farmerDemographics" && e.target.value === "Total Farmers") {
+            const shouldFilter = !includes("Race") && !includes("Gender") && !includes("Age");
+            if (shouldFilter) {
+              newArray = newArray.filter((o) => o !== e.target.value);
+            }
+          } else {
+            newArray = newArray.filter((o) => o !== e.target.value);
+          }
         }
       }
       handleSetSelectedOptions(optionKey, newArray);

src/components/place-options.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { placeOptions } from "./constants";
-import { IStateOptions } from "./types";
+import { placeOptions } from "../constants/constants";
+import { IStateOptions } from "../constants/types";
 import { Options } from "./options";
 
 import css from "./options.scss";
@@ -12,13 +12,41 @@ interface IProps {
 
 export const PlaceOptions: React.FC<IProps> = (props) => {
   const {handleSetSelectedOptions, selectedOptions} = props;
+
+  const isAllStatesSelected = () => {
+    return selectedOptions.states[0] === "All States";
+  };
+
+  const handleSelectAllStates = () => {
+    handleSetSelectedOptions("states", ["All States"]);
+  };
+
   return (
     <>
       {placeOptions.map((placeOpt) => {
         return (
           <>
             <div key={`instructions-${placeOpt.key}`} className={css.instruction}>{placeOpt.instructions}:</div>
-            <div key={`options-container-${placeOpt.key}`} className={placeOpt.key === "geographicLevel" ? css.radioOptions : css.checkOptions}>
+            <div
+              key={`options-container-${placeOpt.key}`}
+              className={placeOpt.key === "geographicLevel" ? css.radioOptions : css.checkOptions}
+            >
+              {placeOpt.key === "states" &&
+                <div key={`radio-option-All-States`} className={css.option}>
+                  <input
+                    id={"All States"}
+                    className={css.radio}
+                    type={"radio"}
+                    key={`radio-All-States`}
+                    value={"All States"}
+                    checked={isAllStatesSelected()}
+                    onChange={handleSelectAllStates}
+                  />
+                  <label className={css.label} htmlFor={"All States"} key={`label-${"All States"}`}>
+                    {"All States"}
+                  </label>
+                </div>
+              }
               <Options
                 key={`options-${placeOpt.key}`}
                 options={placeOpt.options}

src/components/summary.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { IStateOptions } from "./types";
-import { attributeOptions } from "./constants";
+import { IStateOptions } from "../constants/types";
+import { attributeOptions } from "../constants/constants";
 
 interface IProps {
   category: string;
@@ -37,17 +37,17 @@ export const Summary: React.FC<IProps> = ({category, selectedOptions}) => {
             return null;
           }
         })
-        .filter((item) => item !== null)
+        .filter((item) => item !== null);
         const finalString = resultString.join(", ");
         return finalString;
     } else if (category === "Years") {
-      return selectedOptions.years.join(", ")
+      return selectedOptions.years.join(", ");
     }
-  }
+  };
 
   return (
     <div>
       {getSummaryText()}
     </div>
-  )
-}
+  );
+};

src/components/years-options.tsx

@@ -1,10 +1,11 @@
-import React from "react";
-import { attributeOptions, yearsOptions } from "./constants";
-import { IStateOptions } from "./types";
+import React, { useEffect, useState } from "react";
+import { attributeOptions, yearsOptions } from "../constants/constants";
+import { IStateOptions } from "../constants/types";
 import { Options } from "./options";
+import { queryData } from "../constants/queryHeaders";
+import { flatten } from "../scripts/utils";
 
 import css from "./options.scss";
-import { queryData } from "../scripts/query-headers";
 
 interface IProps {
   handleSetSelectedOptions: (option: string, value: string|string[]) => void;
@@ -13,47 +14,58 @@ interface IProps {
 
 export const YearsOptions: React.FC<IProps> = (props) => {
   const {handleSetSelectedOptions, selectedOptions} = props;
+  const [availableYearOptions, setAvailableYearOptions] = useState<string[]>([]);
 
-  const handleSelectYear = (yearKey: string, years: string|string[]) => {
-    handleSetSelectedOptions(yearKey, years);
-
-    // check if any attributeOption keys have values in selectedOptions
-    const attrKeys = attributeOptions.map((attr) => attr.key);
+  useEffect(() => {
+    const attrKeys = attributeOptions.filter((attr) => attr.key !== "cropUnits").map((attr) => attr.key);
     const selectedAttrKeys = attrKeys.filter((key) => selectedOptions[key].length > 0);
-    const areAnyAttrsSelected = selectedAttrKeys.length > 0;
-    // if any attributes are selected, check that selected year data is available for that selected attribute
-    if (areAnyAttrsSelected) {
-      const selectedYears = Array.isArray(years) ? years : [years];
-      const selectedAttrs = selectedAttrKeys.map((key) => selectedOptions[key]);
-      selectedAttrs.forEach((attr) => {
-        if (Array.isArray(attr)) {
-          attr.forEach((subAttr) => {
-            const subAttrData = queryData.find((d) => d.plugInAttribute === subAttr);
-            const yearKeyToUse = selectedOptions.geographicLevel === "county" ? "county" : "state";
-            const availableYears = subAttrData?.years[yearKeyToUse];
-            if (availableYears) {
-              // check -- are selectedYears included in queryParams?.years[yearKeyTouse] ?
-              const areYearsValid = selectedYears.map((y) => availableYears.indexOf(y) > -1).indexOf(false) < 0;
-              console.log({areYearsValid});
-              console.log({availableYears});
-              console.log({selectedYears});
-              // do something if years are not valid
-            }
-          })
-        }
-      })
+
+    if (!selectedAttrKeys.length) {
+      return;
     }
-  }
+
+    const allSelectedAttrs = flatten(selectedAttrKeys.map((key) => selectedOptions[key]));
+    const newAvailableYears = allSelectedAttrs.reduce((years, attr) => {
+      const subAttrData = queryData.find((d) => d.plugInAttribute === attr);
+      const availableYears = subAttrData?.years[selectedOptions.geographicLevel];
+      if (availableYears) {
+        availableYears.forEach((y) => {
+          years.add(y);
+        });
+      }
+      return years;
+    }, new Set());
+    const newSet: string[] = Array.from(newAvailableYears);
+    setAvailableYearOptions(newSet);
+
+    // if selected years includes years not in available options, remove them from selection
+    const selectionsNotAvailable = selectedOptions.years.filter(year => !newSet.includes(year));
+    if (selectionsNotAvailable.length) {
+      const newSelectedYears = [...selectedOptions.years];
+      selectionsNotAvailable.forEach((year) => {
+        newSelectedYears.splice(newSelectedYears.indexOf(year), 1);
+      });
+      handleSetSelectedOptions("years", newSelectedYears);
+    }
+
+  }, [selectedOptions, handleSetSelectedOptions]);
+
+  const handleSelectYear = (yearKey: string, years: string|string[]) => {
+    handleSetSelectedOptions(yearKey, years);
+  };
 
   return (
     <div className={css.checkOptions}>
+      {availableYearOptions.length === 0 ?
+      <div>Please select attributes to see available years.</div>
+      :
       <Options
-        options={yearsOptions.options}
+        options={availableYearOptions}
         optionKey={yearsOptions.key}
         inputType={"checkbox"}
         selectedOptions={selectedOptions}
         handleSetSelectedOptions={handleSelectYear}
-      />
+      />}
     </div>
   );
 };