Implement basic call to DC and some visual changes

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

@@ -23,7 +23,8 @@ export default function Step1(props) {
     formControl: {
       textAlign: 'left',
       margin: theme.spacing(1),
-      minWidth: 120,
+      maxWidth: 500,
+      minWidth: 200,
     },
     selectEmpty: {
       marginTop: theme.spacing(2),
@@ -55,7 +56,7 @@ export default function Step1(props) {
           disableCloseOnSelect
           value={variable}
           getOptionLabel={(option) => option}
-          style={{maxWidth: 400 }}
+          style={{maxWidth: '100%' }}
           renderInput={(params) => (
             <TextField {...params}  variant="outlined" label="Variables" placeholder="" />
           )}

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

@@ -4,7 +4,13 @@ import TopicsSelection from "./TopicsSelection";
 
 export default function Step1(props) {
 
-  const useStyles = makeStyles((theme) => ({}));
+  const useStyles = makeStyles((theme) => ({
+    topics: {
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      textAlign: 'center'
+    }
+  }));
 
   const classes = useStyles();
   const [topic, setTopic] = React.useState('');
@@ -18,7 +24,9 @@ export default function Step1(props) {
       <h2>{props.title}</h2>
       <h4>Select the variables (topics) for which you want to retrieve contextual values</h4>
       {/*<TopicsTree/>*/}
-      <TopicsSelection/>
+      <div className={classes.topics}>
+        <TopicsSelection/>
+      </div>
     </div>
   );
 }

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

@@ -4,7 +4,7 @@ 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";
 
 export default function Step1(props) {
 
@@ -30,13 +30,39 @@ export default function Step1(props) {
         </DialogContent>
       </Dialog>
     );
-  }
+  };
+
+  function getData() {
+    return GetPlaceStatistics("zip/94306", "Count_Person").then((data) => {
+      return data;
+    })
+      .catch((error) => {
+        error.json().then((json) => {
+          // this.setState({
+          //   errors: json,
+          //   loading: false
+          // });
+        })
+      });
+  };
+
+  function downloadDataFile() {
+    getData().then(data => {
+      console.log(data);
+      const element = document.createElement("a");
+      const file = new Blob([JSON.stringify(data)], {type: 'text/plain'});
+      element.href = URL.createObjectURL(file);
+      element.download = "myFile.txt";
+      document.body.appendChild(element); // Required for this to work in FireFox
+      element.click();
+    })
+  };
 
   return (
     <div>
       <h2>{props.title}</h2>
       <h4>Select the discovered attributes for which you want to get data from Data Commons</h4>
-      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+      <Button variant="outlined" color="primary" onClick={downloadDataFile}>
         Download data
       </Button>
       <br/>

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

@@ -7,13 +7,23 @@ 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 TopicsSelection() {
+
+  const useStyles = makeStyles((theme) => ({
+    autoComplete: {
+      maxWidth: '100%',
+    },
+  }));
+
+  const classes = useStyles();
+
   return (
-    <Autocomplete
+    <Autocomplete className={classes.autoComplete}
       multiple
       id="checkboxes-tags-demo"
       options={myData}
@@ -31,7 +41,6 @@ export default function TopicsSelection() {
           {option.name}
         </React.Fragment>
       )}
-      style={{maxWidth: 400 }}
       renderInput={(params) => (
         <TextField {...params}  variant="outlined" label="Variables" placeholder="" />
       )}

phs-gdc-dashboard/src/constants.js

@@ -0,0 +1 @@
+export const DC_API_BASE_URL = "https://api.datacommons.org/";

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

@@ -0,0 +1,40 @@
+import {DC_API_BASE_URL} from "../constants";
+
+/**
+ * Functions to access the Data Commons REST API
+ */
+
+/**
+ * Place Statistics - All
+ * @param places
+ * @param statVars
+ * @constructor
+ */
+// export function GetPlaceStatistics(places, statVars) {
+//   let url = DC_API_BASE_URL + "stat/all";
+//   console.log(url);
+//   const requestOptions = {
+//     method: 'POST',
+//     headers: {'Content-Type': 'application/json'},
+//     body: JSON.stringify({places: places, statVars: statVars})
+//   };
+//   return fetch(url, requestOptions);
+// };
+
+export function GetPlaceStatistics(places, statVars) {
+  let url = DC_API_BASE_URL + "stat/all";
+  console.log(url);
+  const requestOptions = {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({places: places, statVars: statVars})
+  };
+  return fetch(url, requestOptions).then(response => {
+    // Check if the request is 200
+    if (response.ok) {
+      let data = response.json();
+      return data;
+    }
+    return Promise.reject(response);
+  });
+};