Generate CSV based on input PHS variable values

metadatacenter-attic · Dec 5, 2020 · e17934c · e17934c
1 parent 32826bd
commit e17934c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/phs-gdc-dashboard/src/components/AppContent.js b/phs-gdc-dashboard/src/components/AppContent.js
@@ -30,17 +30,17 @@ export default function AppContent() {
       <Grid container spacing={3}>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step1 title={"1. PHS Variable Selection"} setPhsVariableValues={setPhsVariableValues}/>
+            <Step1 title={"1. PHS Index Variable"} setPhsVariableValues={setPhsVariableValues}/>
           </Paper>
         </Grid>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step2 title={"2. Topics Search"}/>
+            <Step2 title={"2. Data Commons Variables"}/>
           </Paper>
         </Grid>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step3 title={"3. Attributes Selection"} phsVariableValues={phsVariableValues}/>
+            <Step3 title={"3. Export Data"} phsVariableValues={phsVariableValues}/>
           </Paper>
         </Grid>
       </Grid>

diff --git a/phs-gdc-dashboard/src/components/content/Step1.js b/phs-gdc-dashboard/src/components/content/Step1.js
@@ -40,10 +40,14 @@ export default function Step1(props) {
   };
 
   const handleChangeValuesField = (event) => {
+    console.log('on change invoked')
     setValues(event.target.value);
     if (values != null && values.trim().length > 0) {
       let valuesArray = values.split(/\r?\n/);
-      console.log(valuesArray);
+      props.setPhsVariableValues(valuesArray);
+    }
+    else {
+      props.setPhsVariableValues([]);
     }
   };
 
@@ -52,8 +56,7 @@ export default function Step1(props) {
   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>
+      <h4>Select the variable that will connect your data to Data Commons data</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
@@ -78,6 +81,7 @@ export default function Step1(props) {
           rows={6}
           value={values}
           variant="outlined"
+          onBlur={handleChangeValuesField}
           onChange={handleChangeValuesField}/>
         <FormHelperText>Paste the values of the selected variable (one per line)</FormHelperText>
       </FormControl>

diff --git a/phs-gdc-dashboard/src/components/content/Step2.js b/phs-gdc-dashboard/src/components/content/Step2.js
@@ -22,7 +22,7 @@ export default function Step1(props) {
   return (
     <div>
       <h2>{props.title}</h2>
-      <h4>Select the variables (topics) for which you want to retrieve contextual values</h4>
+      <h4>Select the Data Commons variables you want to retrieve values from</h4>
       {/*<TopicsTree/>*/}
       <div className={classes.topics}>
         <TopicsSelection/>

diff --git a/phs-gdc-dashboard/src/components/content/Step3.js b/phs-gdc-dashboard/src/components/content/Step3.js
@@ -35,8 +35,11 @@ export default function Step1(props) {
   };
 
   function getCsvData() {
-    return getPlaceStatistics(["zip/94306", "zip/45202"], ["Count_Person", "Median_Income_Person"]).then((data) => {
-      let tabJsonData = toTabularJsonData(data, "zip code");
+    console.log(props.phsVariableValues);
+    let uniquePhsVariableValues = [...new Set(props.phsVariableValues)];
+    console.log(uniquePhsVariableValues)
+    return getPlaceStatistics(uniquePhsVariableValues, ["Count_Person", "Median_Income_Person"]).then((data) => {
+      let tabJsonData = toTabularJsonData(data, "zip code", props.phsVariableValues);
       return jsonToCsv(tabJsonData);
     })
       .catch((error) => {
@@ -64,7 +67,8 @@ export default function Step1(props) {
   return (
     <div>
       <h2>{props.title}</h2>
-      <h4>Select the discovered attributes for which you want to get data from Data Commons</h4>
+      {props.phsVariableValues}
+      <h4>Download the Data Commons data and use it from your R project</h4>
       <Button variant="outlined" color="primary" onClick={downloadDataFile}>
         Download data
       </Button>

diff --git a/phs-gdc-dashboard/src/utils/dataCommonsUtils.js b/phs-gdc-dashboard/src/utils/dataCommonsUtils.js
@@ -10,7 +10,8 @@
  * @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) {
+export function toTabularJsonData(jsonData, placeVarName, phsVariableValues) {
+
   let tabularJsonData = [];
   let statVars = {};
 
@@ -22,16 +23,24 @@ export function toTabularJsonData(jsonData, placeVarName) {
     statVars[varName] = year;
   }
 
-  // Extract values
+
+  let rows = {}
+  // Generate rows and index them by phsVariableValue (placeId)
   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);
+    rows[placeId] = row;
   }
+
+  // Generate the final tabular data (it may contain duplicated rows)
+  phsVariableValues.forEach(placeId => {
+    tabularJsonData.push(rows[placeId]);
+  });
+
   return tabularJsonData;
 }