Various UI improvements.

src/components/attribute-options.tsx

@@ -15,7 +15,6 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
   const {handleSetSelectedOptions, selectedOptions} = props;
 
   const commonProps = {
-    inputType: "checkbox" as "checkbox"|"radio",
     handleSetSelectedOptions,
     selectedOptions
   };
@@ -43,6 +42,7 @@ export const AttributeOptions: React.FC<IProps> = (props) => {
             <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/options.tsx

@@ -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

@@ -12,6 +12,15 @@ 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) => {
@@ -22,6 +31,22 @@ export const PlaceOptions: React.FC<IProps> = (props) => {
               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/years-options.tsx

@@ -2,7 +2,7 @@ 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/query-headers";
+import { queryData } from "../constants/queryHeaders";
 import { flatten } from "../scripts/utils";
 
 import css from "./options.scss";

src/constants/codapMetadata.ts

@@ -0,0 +1,183 @@
+interface ICodapColumnData {
+  "attributeNameInCodapTable": string,
+  "unitInCodapTable": string
+}
+
+interface IAttrToCodapColumn {
+  [attr: string]: ICodapColumnData
+}
+
+export const attrToCODAPColumnName: IAttrToCodapColumn = {
+  "PRODUCERS, (ALL) - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Total Number of Farmers",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "OPERATORS, (ALL) - NUMBER OF OPERATORS": {
+    "attributeNameInCodapTable": "Total Number of Farmers",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE LT 25 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age < 25",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE 25 TO 34 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age 25 - 34",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE 35 TO 44 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age 35 - 44",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE 45 TO 54 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age 45 - 54",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE 55 TO 64 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age 55 - 64",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE 65 TO 74 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age 65 - 74",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AGE GE 75 - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Age > 74",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, (ALL), FEMALE - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Female",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, (ALL), MALE - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Male",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, AMERICAN INDIAN OR ALASKAN NATIVE - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "American Indian or Alaskan Native",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, ASIAN - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Asian",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, BLACK OR AFRICAN AMERICAN - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Black or African American",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, HISPANIC - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Hispanic",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, MULTI-RACE - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Multi-race",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, NATIVE HAWAIIAN OR OTHER PACIFIC ISLANDERS - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "Native Hawaiian or Other Pacific Islanders",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "PRODUCERS, WHITE - NUMBER OF PRODUCERS": {
+    "attributeNameInCodapTable": "White",
+    "unitInCodapTable": "# of Farmers"
+  },
+  "FARM OPERATIONS - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Total Number of Farms",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS, ORGANIZATION, TAX PURPOSES, CORPORATION (EXCL FAMILY HELD) - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Corporate",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS, ORGANIZATION, TAX PURPOSES, CORPORATION, FAMILY HELD - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Corporate, Family Held",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS, ORGANIZATION, TAX PURPOSES, FAMILY & INDIVIDUAL - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Family & Individual",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS, ORGANIZATION, TAX PURPOSES, INSTITUTIONAL & RESEARCH & RESERVATION & OTHER - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Institutional, Research, Reservation, & Other",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS, ORGANIZATION, TAX PURPOSES, PARTNERSHIP - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Partnership",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS - ACRES OPERATED": {
+    "attributeNameInCodapTable": "",
+    "unitInCodapTable": "# of Farms"
+  },
+  "FARM OPERATIONS, ORGANIC - NUMBER OF OPERATIONS": {
+    "attributeNameInCodapTable": "Organic",
+    "unitInCodapTable": "# of Farms"
+  },
+  "LABOR, MIGRANT - NUMBER OF WORKERS": {
+    "attributeNameInCodapTable": "Migrant",
+    "unitInCodapTable": "# of Farm Laborers"
+  },
+  "LABOR, UNPAID - NUMBER OF WORKERS": {
+    "attributeNameInCodapTable": "Unpaid",
+    "unitInCodapTable": "# of Farm Laborers"
+  },
+  "LABOR, HIRED - NUMBER OF WORKERS": {
+    "attributeNameInCodapTable": "Hired",
+    "unitInCodapTable": "# of Farm Laborers"
+  },
+  "LABOR, HIRED - WAGE RATE, MEASURED IN $ / HOUR": {
+    "attributeNameInCodapTable": "Wage Rate of Laborers",
+    "unitInCodapTable": "$/Hour"
+  },
+  "LABOR, HIRED - TIME WORKED, MEASURED IN HOURS / WEEK": {
+    "attributeNameInCodapTable": "Time Worked by Laborers",
+    "unitInCodapTable": "Hours/Week"
+  },
+  "CORN, GRAIN - YIELD, MEASURED IN BU / ACRE": {
+    "attributeNameInCodapTable": "Corn Yield",
+    "unitInCodapTable": "BU/Acre"
+  },
+  "CORN, GRAIN - ACRES HARVESTED": {
+    "attributeNameInCodapTable": "Corn Area Harvested",
+    "unitInCodapTable": "Acres Harvested"
+  },
+  "COTTON, - YIELD, MEASURED IN LB / ACRE": {
+    "attributeNameInCodapTable": "Cotton Yield",
+    "unitInCodapTable": "LB/Acre"
+  },
+  "COTTON - ACRES HARVESTED": {
+    "attributeNameInCodapTable": "Cotton Area Harvested",
+    "unitInCodapTable": "Acres Harvested"
+  },
+  "GRAPES - YIELD, MEASURED IN TONS / ACRE": {
+    "attributeNameInCodapTable": "Grapes Yield",
+    "unitInCodapTable": "Tons/Acre"
+  },
+  "GRAPES, ORGANIC - ACRES HARVESTED": {
+    "attributeNameInCodapTable": "Grapes Area Harvested",
+    "unitInCodapTable": "Acres Harvested"
+  },
+  "OATS - YIELD, MEASURED IN BU / ACRE": {
+    "attributeNameInCodapTable": "Oats Yield",
+    "unitInCodapTable": "BU/Acre"
+  },
+  "OATS - ACRES HARVESTED": {
+    "attributeNameInCodapTable": "Oats Area Harvested",
+    "unitInCodapTable": "Acres Harvested"
+  },
+  "SOYBEANS - YIELD MEASURED IN BU / ACRE": {
+    "attributeNameInCodapTable": "Soybeans Yield",
+    "unitInCodapTable": "BU/Acre"
+  },
+  "SOYBEANS - ACRES HARVESTED": {
+    "attributeNameInCodapTable": "Soybeans Area Harvested",
+    "unitInCodapTable": "Acres Harvested"
+  },
+  "WHEAT - YIELD MEASURED IN BU / ACRE": {
+    "attributeNameInCodapTable": "Wheat Yield",
+    "unitInCodapTable": "BU/Acre"
+  },
+  "WHEAT - ACRES HARVESTED": {
+    "attributeNameInCodapTable": "Wheat Area Harvested",
+    "unitInCodapTable": "Acres Harvested"
+  }
+};

src/constants/constants.ts

@@ -58,14 +58,13 @@ export const fiftyStates = [
   "West Virginia",
   "Wisconsin",
   "Wyoming"
-]
+];
 
 export const stateOptions: IAttrOptions = {
   label: null,
   key: "states",
   instructions: "Choose states to include in your dataset from the list below",
   options: [
-    "All States",
     ...fiftyStates
   ]
 };
@@ -99,7 +98,7 @@ const cropUnitOptions: IAttrOptions = {
 export const cropOptions: IAttrOptions = {
   key: "crops",
   label: null,
-  options: ["Corn", "Cotton", "Grapes", "Grasses", "Oats", "Soybeans", "Wheat"],
+  options: ["Corn", "Cotton", "Grapes", "Oats", "Soybeans", "Wheat"],
   instructions: "(Choose crops)"
 };
 
@@ -132,4 +131,4 @@ export const defaultSelectedOptions: IStateOptions = {
   cropUnits: "",
   crops: [],
   years: []
-};
+};

src/constants/counties.ts

@@ -3282,4 +3282,4 @@ export const countyData: {[state: string]: string[]} = {
     "WASHAKIE",
     "WESTON"
 ]
-}
+};