Initial workflow with .csv download

metadatacenter-attic · Dec 6, 2020 · 5737907 · 5737907
1 parent e17934c
commit 5737907
Show file tree

Hide file tree

Showing 11 changed files with 260 additions and 111 deletions.
diff --git a/phs-gdc-dashboard/src/components/AppContent.js b/phs-gdc-dashboard/src/components/AppContent.js
@@ -5,6 +5,7 @@ import Paper from "@material-ui/core/Paper";
 import Step1 from "./content/Step1";
 import Step2 from "./content/Step2";
 import Step3 from "./content/Step3";
+import {INDEX_VARIABLE_NAME_DEFAULT} from "../constants";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -24,23 +25,29 @@ export default function AppContent() {
   const classes = useStyles();
 
   const [phsVariableValues, setPhsVariableValues] = React.useState('');
+  const [phsVariableName, setPhsVariableName] = React.useState(INDEX_VARIABLE_NAME_DEFAULT);
+  const [dcVariableNames, setDcVariableNames] = React.useState('');
 
   return (
     <div className={classes.root}>
       <Grid container spacing={3}>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step1 title={"1. PHS Index Variable"} setPhsVariableValues={setPhsVariableValues}/>
+            <Step1 title={"1. PHS Index Variable"} setPhsVariableName={setPhsVariableName} setPhsVariableValues={setPhsVariableValues}/>
           </Paper>
         </Grid>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step2 title={"2. Data Commons Variables"}/>
+            <Step2 title={"2. Data Commons Variables"} setDcVariableNames={setDcVariableNames}/>
           </Paper>
         </Grid>
         <Grid item md={4}>
           <Paper className={classes.paper}>
-            <Step3 title={"3. Export Data"} phsVariableValues={phsVariableValues}/>
+            <Step3 title={"3. Export Data"}
+                   phsVariableName={phsVariableName}
+                   phsVariableValues={phsVariableValues}
+                   dcVariableNames={dcVariableNames}
+            />
           </Paper>
         </Grid>
       </Grid>

diff --git a/phs-gdc-dashboard/src/components/content/Step1.js b/phs-gdc-dashboard/src/components/content/Step1.js
@@ -6,13 +6,9 @@ import makeStyles from "@material-ui/core/styles/makeStyles";
 import MenuItem from "@material-ui/core/MenuItem";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import TextField from "@material-ui/core/TextField";
-import Autocomplete from "@material-ui/lab/Autocomplete/Autocomplete";
-import myData from "../../resources/data2";
-import Checkbox from "@material-ui/core/Checkbox/Checkbox";
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import CheckBoxOutlineBlankIcon from "@material-ui/core/SvgIcon/SvgIcon";
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import {INDEX_VARIABLE_NAME_DEFAULT, INDEX_VARIABLES} from "../../constants";
 
 export default function Step1(props) {
 
@@ -32,15 +28,15 @@ export default function Step1(props) {
   }));
 
   const classes = useStyles();
-  const [variable, setVariable] = React.useState('');
+  const [variable, setVariable] = React.useState(INDEX_VARIABLE_NAME_DEFAULT);
   const [values, setValues] = React.useState('');
 
   const handleChangeVariableSelect = (event) => {
     setVariable(event.target.value);
+    props.setPhsVariableName(event.target.value);
   };
 
   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/);
@@ -51,7 +47,7 @@ export default function Step1(props) {
     }
   };
 
-  const phsVariables = ["state", "county", "city", "zip code"];
+  const phsIndexVariables = INDEX_VARIABLES;
 
   return (
     <div>
@@ -67,7 +63,7 @@ export default function Step1(props) {
           variant="outlined"
           className={classes.selectVariable}
           label="Variable">
-          {phsVariables.map((phsVar, index) =>
+          {phsIndexVariables.map((phsVar, index) =>
             <MenuItem key={index} value={phsVar}>{phsVar}</MenuItem>
           )};
         </Select>
@@ -77,8 +73,8 @@ export default function Step1(props) {
           id="standard-multiline-flexible"
           label="Variable values"
           multiline
-          rowsMax={10}
-          rows={6}
+          rowsMax={20}
+          rows={10}
           value={values}
           variant="outlined"
           onBlur={handleChangeValuesField}

diff --git a/phs-gdc-dashboard/src/components/content/Step2.js b/phs-gdc-dashboard/src/components/content/Step2.js
@@ -1,8 +1,8 @@
 import React from "react";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import TopicsSelection from "./TopicsSelection";
+import TopicsSelector from "./TopicsSelector";
 
-export default function Step1(props) {
+export default function Step2(props) {
 
   const useStyles = makeStyles((theme) => ({
     topics: {
@@ -13,19 +13,14 @@ export default function Step1(props) {
   }));
 
   const classes = useStyles();
-  const [topic, setTopic] = React.useState('');
-
-  const handleChange = (event) => {
-    setTopic(event.target.value);
-  };
 
   return (
     <div>
       <h2>{props.title}</h2>
       <h4>Select the Data Commons variables you want to retrieve values from</h4>
       {/*<TopicsTree/>*/}
       <div className={classes.topics}>
-        <TopicsSelection/>
+        <TopicsSelector setDcVariableNames={props.setDcVariableNames}/>
       </div>
     </div>
   );

diff --git a/phs-gdc-dashboard/src/components/content/Step3.js b/phs-gdc-dashboard/src/components/content/Step3.js
@@ -5,10 +5,10 @@ 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 {toTabularJsonData} from "../../utils/dataCommonsUtils";
+import {indexVariableValueToDcid, toTabularJsonData} from "../../utils/dataCommonsUtils";
 import {jsonToCsv} from "../../utils/utils";
 
-export default function Step1(props) {
+export default function Step3(props) {
 
   const [open, setOpen] = React.useState(false);
 
@@ -35,11 +35,11 @@ export default function Step1(props) {
   };
 
   function getCsvData() {
-    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);
+    console.log('dcVariableNames', props.dcVariableNames);
+    let phsVariableDcids = props.phsVariableValues.map(v => indexVariableValueToDcid(v, props.phsVariableName))
+    let uniquePhsVariableDcids = [...new Set(phsVariableDcids)];
+    return getPlaceStatistics(uniquePhsVariableDcids, props.dcVariableNames).then((data) => {
+      let tabJsonData = toTabularJsonData(data, props.phsVariableName, props.phsVariableValues);
       return jsonToCsv(tabJsonData);
     })
       .catch((error) => {
@@ -67,8 +67,7 @@ export default function Step1(props) {
   return (
     <div>
       <h2>{props.title}</h2>
-      {props.phsVariableValues}
-      <h4>Download the Data Commons data and use it from your R project</h4>
+      <h4>Download the Data Commons data and use them in your project</h4>
       <Button variant="outlined" color="primary" onClick={downloadDataFile}>
         Download data
       </Button>

diff --git a/phs-gdc-dashboard/src/components/content/TopicsSelection.js b/phs-gdc-dashboard/src/components/content/TopicsSelection.js
diff --git a/phs-gdc-dashboard/src/components/content/TopicsSelector.js b/phs-gdc-dashboard/src/components/content/TopicsSelector.js
@@ -0,0 +1,61 @@
+/* eslint-disable no-use-before-define */
+
+import React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import myData from './../../resources/data2.json';
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small"/>;
+const checkedIcon = <CheckBoxIcon fontSize="small"/>;
+
+export default function TopicsSelector(props) {
+
+  const useStyles = makeStyles((theme) => ({
+    autoComplete: {
+      maxWidth: '100%',
+    },
+  }));
+
+  const classes = useStyles();
+
+  //const [selectedVariableNames, setSelectedVariableNames] = React.useState([]);
+
+  const handleChange = (values) => {
+    //setSelectedVariableNames(values.map(value => value.name));
+    props.setDcVariableNames(values.map(value => value.name));
+  };
+
+  return (
+    <Autocomplete className={classes.autoComplete}
+                  multiple
+                  id="checkboxes-tags-demo"
+                  options={myData}
+                  disableCloseOnSelect
+                  groupBy={(option) => option.category}
+
+                  onChange={(event, values) => handleChange(values)}
+                  //value={selectedVariableNames}
+
+                  getOptionLabel={(option) => option.label}
+                  //getOptionSelected={(option) => option.name}
+                  renderOption={(option, {selected}) => (
+                    <React.Fragment>
+                      <Checkbox
+                        icon={icon}
+                        checkedIcon={checkedIcon}
+                        style={{marginRight: 8}}
+                        checked={selected}
+                      />
+                      {option.label}
+                    </React.Fragment>
+                  )}
+                  renderInput={(params) => (
+                    <TextField {...params} variant="outlined" label="Variables" placeholder=""/>
+                  )}
+    />
+  );
+}
diff --git a/phs-gdc-dashboard/src/constants.js b/phs-gdc-dashboard/src/constants.js
@@ -1 +1,10 @@
-export const DC_API_BASE_URL = "https://api.datacommons.org/";
+export const DC_API_BASE_URL = "https://api.datacommons.org/";
+
+export const INDEX_VARIABLE_NAME_STATE = "state";
+export const INDEX_VARIABLE_NAME_COUNTY = "county";
+export const INDEX_VARIABLE_NAME_CITY = "city";
+export const INDEX_VARIABLE_NAME_ZIP_CODE = "zip code";
+export const INDEX_VARIABLES = [INDEX_VARIABLE_NAME_STATE, INDEX_VARIABLE_NAME_COUNTY, INDEX_VARIABLE_NAME_CITY, INDEX_VARIABLE_NAME_ZIP_CODE];
+export const INDEX_VARIABLE_NAME_DEFAULT = INDEX_VARIABLE_NAME_ZIP_CODE;
+
+export const NOT_AVAILABLE_VALUE = "NA";
diff --git a/phs-gdc-dashboard/src/resources/data1.json b/phs-gdc-dashboard/src/resources/data1.json
@@ -0,0 +1,63 @@
+[
+  {
+    "name": "Count_Person",
+    "label": "Count_Person",
+    "category": "Demographics"
+  },
+  {
+    "name": "Median_Income_Person",
+    "label": "Median_Income_Person",
+    "category": "Demographics"
+  },
+  {
+    "name": "Median_Age_Person",
+    "label": "Median_Age_Person",
+    "category": "Demographics"
+  },
+  {
+    "name": "UnemploymentRate_Person",
+    "label": "UnemploymentRate_Person",
+    "category": "Demographics"
+  },
+  {
+    "name": "Count_Household",
+    "label": "Count_Household",
+    "category": "Demographics"
+  },
+  {
+    "name": "LifeExpectancy_Person",
+    "label": "LifeExpectancy_Person",
+    "category": "Demographics"
+  },
+  {
+    "name": "Count_CriminalActivities_CombinedCrime",
+    "label": "Count_CriminalActivities_CombinedCrime",
+    "category": "Crime"
+  },
+  {
+    "name": "Count_Death",
+    "label": "Count_Death",
+    "category": "Health"
+  },
+  {
+    "name": "Count_MedicareEnrollee",
+    "label": "Count_MedicareEnrollee",
+    "category": "Health"
+  },
+  {
+    "name": "Count_Worker",
+    "label": "Count_Worker",
+    "category": "Employment"
+  },
+  {
+    "name": "Amount_Emissions_CarbonDioxide_PerCapita",
+    "label": "Amount_Emissions_CarbonDioxide_PerCapita",
+    "category": "Environment"
+  },
+  {
+    "name": "Median_Income_Household",
+    "label": "Median_Income_Household",
+    "category": "Household"
+  }
+
+]