Add information text to pop-up. (PT-186025103)

src/components/app.tsx

@@ -54,12 +54,12 @@ function App() {
     const res = await createTableFromSelections(selectedOptions);
     if (res !== "success") {
       setStatusMessage("Fetch Error. Please retry.");
-      setStatusGraphic(<Error/>)
+      setStatusGraphic(<Error/>);
     } else {
       setStatusMessage("Fetched data.");
       setStatusGraphic(<Checkmark/>);
     }
-  }
+  };
 
   const handleGetData = async () => {
     const numberOfRows = getNumberOfItems(selectedOptions);
@@ -75,7 +75,7 @@ function App() {
     if (getDataAnyway) {
       await getData();
     }
-  }
+  };
 
   return (
     <div className={css.pluginContent}>

src/components/information.scss

@@ -2,8 +2,8 @@
 
 .popUpContent {
   position: absolute;
-  left: 12px;
-  right: 12px;
+  width: 310px;
+  left: calc(50% - 155px);
   top: 35px;
   z-index: 3;
 
@@ -17,6 +17,11 @@
 
   max-height: 1000px;
   border-width: 1px;
+  .popUpBody {
+    background-color: white;
+    padding: 12px;
+    font-size: 13px;
+  }
 }
 
 .popUpFooter {
@@ -35,9 +40,4 @@
   left: 0;
   right: 0;
   bottom: 0;
-}
-
-.popUpBody {
-  background-color: white;
-  padding: 12px;
 }

src/components/information.tsx

@@ -13,7 +13,23 @@
     <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.
+          <p>
+            <span style={{fontWeight: "bold"}}>Source:</span> This data comes from the National Agricultural Statistics Service (NASS) supplied
+            by the U.S. Department of Agriculture. The NASS conducts hundreds of surveys every year, curates
+            and makes public the data collected, and prepares reports covering virtually every aspect of U.S.
+            agriculture. The data collected includes production and supplies of food, farm labor and wages,
+            and changes in the demographics of U.S. producers.
+          </p>
+          <p><a href="https://www.nass.usda.gov/About_NASS/index.php" target="_blank" rel="noopener noreferrer">Learn more about the NASS</a></p>
+          <p><a href="https://quickstats.nass.usda.gov/" target="_blank" rel="noopener noreferrer">Access the full NASS dataset</a></p>
+          <p><a href="https://www.nass.usda.gov/Publications/index.php" target="_blank" rel="noopener noreferrer">Read reports published by NASS</a></p>
+          <p>
+            <span style={{fontWeight: "bold"}}>Acknowledgements:</span> Brought to you by the DataPBL project, a collaboration between
+            Concord Consortium, EL Education, and the University of Colorado. This material is supported
+            by the National Science Foundation under Grant No. DRL-2200887. Any opinions, findings, and
+            conclusions or recommendations expressed in this material are those of the authors and
+            do not necessarily reflect the views of the NSF.
+          </p>
         </div>
         <div className={css.popUpFooter}>
           <div className={css.controlRow}>

src/components/warning.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 import WarningIcon from "../assets/warning.svg";
 import css from "./warning.scss";
 
 interface IProps {
@@ -21,8 +21,16 @@
         </div>
         <div className={css.popUpFooter}>
           <div className={css.controlRow}>
-            <span><button className={css.button} onClick={() => handleCloseWarning(false)}>Change Attribute Selection</button></span>
-            <span><button className={css.button} onClick={() => handleCloseWarning(true)}>Get Data Anyway</button></span>
+            <span>
+              <button className={css.button} onClick={() => handleCloseWarning(false)}>
+                Change Attribute Selection
+              </button>
+            </span>
+            <span>
+              <button className={css.button} onClick={() => handleCloseWarning(true)}>
+                Get Data Anyway
+              </button>
+            </span>
           </div>
         </div>
       </div>

src/scripts/api.ts

@@ -64,7 +64,7 @@
     (queryParams?.statisticcat_desc as ICropCategory)[cropCategory] :
     statisticcat_desc;
 
   const locationHeader = geographicLevel === "REGION : MULTI-STATE" ? "region_desc" : geographicLevel === "County" ? "county_name" : "state_name";
 
   const baseReq = `${baseURL}` +
   `&sect_desc=${encodeURIComponent(sect_desc)}` +
@@ -113,7 +113,7 @@
     }
   }
   return allAttrs;
-}
+};
 
 export const getNumberOfItems = (selectedOptions: IStateOptions) => {
   let {states, years} = selectedOptions;
@@ -126,10 +126,10 @@
   } else {
     return states.length * years.length;
   }
-}
+};
 
 export const createTableFromSelections = async (selectedOptions: IStateOptions) => {
-  const {geographicLevel, states, cropUnits, years, ...subOptions} = selectedOptions;
+  const {geographicLevel} = selectedOptions;
   try {
     const allAttrs = getAllAttrs(selectedOptions);
     const requests = getAllRequests(selectedOptions);