Download data in CSV format and multiple fixes

phs-gdc-dashboard/src/components/AppContent.js

@@ -20,24 +20,27 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function AppContent() {
+
   const classes = useStyles();
 
+  const [phsVariableValues, setPhsVariableValues] = React.useState('');
+
   return (
     <div className={classes.root}>
       <Grid container spacing={3}>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step1 title={"1. PHS Variable Selection"}></Step1>
+            <Step1 title={"1. PHS Variable Selection"} setPhsVariableValues={setPhsVariableValues}/>
           </Paper>
         </Grid>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step2 title={"2. Topics Search"}></Step2>
+            <Step2 title={"2. Topics Search"}/>
           </Paper>
         </Grid>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step3 title={"3. Attributes Selection"}></Step3>
+            <Step3 title={"3. Attributes Selection"} phsVariableValues={phsVariableValues}/>
           </Paper>
         </Grid>
       </Grid>

phs-gdc-dashboard/src/components/content/Step1.js

@@ -16,8 +16,8 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 
 export default function Step1(props) {
 
-  const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
-  const checkedIcon = <CheckBoxIcon fontSize="small" />;
+  const icon = <CheckBoxOutlineBlankIcon fontSize="small"/>;
+  const checkedIcon = <CheckBoxIcon fontSize="small"/>;
 
   const useStyles = makeStyles((theme) => ({
     formControl: {
@@ -26,13 +26,13 @@ export default function Step1(props) {
       maxWidth: 500,
       minWidth: 200,
     },
-    selectEmpty: {
-      marginTop: theme.spacing(2),
+    selectVariable: {
+
     },
   }));
 
   const classes = useStyles();
-  const [variable, setVariable] = React.useState('zip code');
+  const [variable, setVariable] = React.useState('');
   const [values, setValues] = React.useState('');
 
   const handleChangeVariableSelect = (event) => {
@@ -41,35 +41,33 @@ export default function Step1(props) {
 
   const handleChangeValuesField = (event) => {
     setValues(event.target.value);
+    if (values != null && values.trim().length > 0) {
+      let valuesArray = values.split(/\r?\n/);
+      console.log(valuesArray);
+    }
   };
 
-  const phsVariables = ["zip code"];
+  const phsVariables = ["state", "county", "city", "zip code"];
 
   return (
     <div>
       <h2>{props.title}</h2>
-      <h4>Enter or select the variable that you want to use to expand your original data with data from Data Commons</h4>
-      <FormControl className={classes.formControl}>
-        <Autocomplete
-          id="variable-select"
-          options={phsVariables}
-          disableCloseOnSelect
+      <h4>Enter or select the variable that you want to use to expand your original data with data from Data
+        Commons</h4>
+      <FormControl className={classes.formControl} variant="outlined" /* if the variant is omitted here, the label of the select field is misaligned */>
+        <InputLabel id="demo-simple-select-outlined-label">Variable</InputLabel>
+        <Select
+          labelId="demo-simple-select-outlined-label"
+          id="demo-simple-select-outlined"
           value={variable}
-          getOptionLabel={(option) => option}
-          style={{maxWidth: '100%' }}
-          renderInput={(params) => (
-            <TextField {...params}  variant="outlined" label="Variables" placeholder="" />
-          )}
-        />
-        {/*<InputLabel id="label-variable">Variable</InputLabel>*/}
-        {/*<Select*/}
-        {/*  labelId="label-variable"*/}
-        {/*  id="variable-select"*/}
-        {/*  value={variable}*/}
-        {/*  variant="outlined"*/}
-        {/*  onChange={handleChangeVariableSelect}>*/}
-        {/*  <MenuItem value={"zip code"}>zip code</MenuItem>*/}
-        {/*</Select>*/}
+          onChange={handleChangeVariableSelect}
+          variant="outlined"
+          className={classes.selectVariable}
+          label="Variable">
+          {phsVariables.map((phsVar, index) =>
+            <MenuItem key={index} value={phsVar}>{phsVar}</MenuItem>
+          )};
+        </Select>
         <FormHelperText>Select a PHS variable from the list</FormHelperText>
         <br/>
         <TextField
@@ -81,7 +79,7 @@ export default function Step1(props) {
           value={values}
           variant="outlined"
           onChange={handleChangeValuesField}/>
-        <FormHelperText>Copy-paste the variable values (one per line)</FormHelperText>
+        <FormHelperText>Paste the values of the selected variable (one per line)</FormHelperText>
       </FormControl>
     </div>
   );

phs-gdc-dashboard/src/components/content/Step3.js

@@ -4,7 +4,9 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
-import {GetPlaceStatistics} from "../../services/dataCommonsService";
+import {getPlaceStatistics} from "../../services/dataCommonsService";
+import {toTabularJsonData} from "../../utils/dataCommonsUtils";
+import {jsonToCsv} from "../../utils/utils";
 
 export default function Step1(props) {
 
@@ -32,9 +34,10 @@ export default function Step1(props) {
     );
   };
 
-  function getData() {
-    return GetPlaceStatistics("zip/94306", "Count_Person").then((data) => {
-      return data;
+  function getCsvData() {
+    return getPlaceStatistics(["zip/94306", "zip/45202"], ["Count_Person", "Median_Income_Person"]).then((data) => {
+      let tabJsonData = toTabularJsonData(data, "zip code");
+      return jsonToCsv(tabJsonData);
     })
       .catch((error) => {
         error.json().then((json) => {
@@ -47,12 +50,12 @@ export default function Step1(props) {
   };
 
   function downloadDataFile() {
-    getData().then(data => {
+    getCsvData().then(data => {
       console.log(data);
       const element = document.createElement("a");
-      const file = new Blob([JSON.stringify(data)], {type: 'text/plain'});
+      const file = new Blob([data], {type: 'text/plain'});
       element.href = URL.createObjectURL(file);
-      element.download = "myFile.txt";
+      element.download = "myFile.csv";
       document.body.appendChild(element); // Required for this to work in FireFox
       element.click();
     })
@@ -68,7 +71,7 @@ export default function Step1(props) {
       <br/>
       <br/>
       <Button variant="outlined" color="primary" onClick={handleClickOpen}>
-        See R code
+        Generate R code
       </Button>
       <SimpleDialog open={open} onClose={handleClose}/>
     </div>

phs-gdc-dashboard/src/services/dataCommonsService.js

@@ -21,7 +21,7 @@ import {DC_API_BASE_URL} from "../constants";
 //   return fetch(url, requestOptions);
 // };
 
-export function GetPlaceStatistics(places, statVars) {
+export function getPlaceStatistics(places, statVars) {
   let url = DC_API_BASE_URL + "stat/all";
   console.log(url);
   const requestOptions = {

phs-gdc-dashboard/src/utils/dataCommonsUtils.js

@@ -0,0 +1,63 @@
+/**
+ * Data Commons Utility functions
+ */
+
+
+/**
+ * Transforms data returned from the Data Commons /stat/all API to Json in tabular format
+ * See https://docs.datacommons.org/api/rest/stat_all.html for some examples of input json data.
+ *
+ * @param jsonData
+ * @param placeVarName Name of the place variable. It will be used as the column name for the place data in the output
+ */
+export function toTabularJsonData(jsonData, placeVarName) {
+  let tabularJsonData = [];
+  let statVars = {};
+
+  // Extract column names and most recent year for each variable name and save them as a hashtable.
+  // To improve performance, we assume that a particular variable has the same years for all location identifiers
+  let firstKey = (Object.keys(jsonData['placeData']))[0];
+  for (let varName in jsonData['placeData'][firstKey]['statVarData']) {
+    let year = getLatestYear(jsonData['placeData'][firstKey]['statVarData'][varName]["sourceSeries"][0]["val"])
+    statVars[varName] = year;
+  }
+
+  // Extract values
+  for (let placeId in jsonData['placeData']) {
+    let placeValue = placeId;  // TODO: extract value
+    let row = {[placeVarName] : placeValue};
+    for (let statVarName in statVars) {
+      let year = statVars[statVarName];
+      row[statVarName] = jsonData['placeData'][placeId]['statVarData'][statVarName]["sourceSeries"][0]["val"][year];
+    }
+    tabularJsonData.push(row);
+  }
+  return tabularJsonData;
+}
+
+/**
+ * Given an object with key-value pairs, where each key is a year, retrieve the most recent year
+ * Example: { "2012": 8710, "2020": 8680, "2018": 8831 } -> 2020
+ * @param data
+ */
+function getLatestYear(data) {
+  let latestYear = Object.keys(data).sort().reverse()[0];
+  return parseInt(latestYear);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

phs-gdc-dashboard/src/utils/utils.js

@@ -0,0 +1,18 @@
+/**
+ * General Utilities
+ */
+
+export function jsonToCsv(json) {
+  let fields = Object.keys(json[0]);
+  let replacer = function (key, value) {
+    return value === null ? '' : value;
+  }
+  let csv = json.map(function (row) {
+    return fields.map(function (fieldName) {
+      return JSON.stringify(row[fieldName], replacer);
+    }).join(',');
+  })
+  csv.unshift(fields.join(',')); // add header column
+  csv = csv.join('\r\n');
+  return csv;
+}