Fix title padding, increase button sizes, and improve R script

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

@@ -21,6 +21,8 @@ import CardHeader from "@material-ui/core/CardHeader";
 import CardContent from "@material-ui/core/CardContent";
 import Avatar from "@material-ui/core/Avatar";
 import FormHelperText from "@material-ui/core/FormHelperText";
+import IconButton from "@material-ui/core/IconButton";
+import SettingsIcon from '@material-ui/icons/Settings';
 
 export default function Step1(props) {
 
@@ -91,10 +93,15 @@ export default function Step1(props) {
   return (
     <div>
       <CardHeader className={"stepHeader"}
-        title={props.title}
-        avatar={
-          <Avatar aria-label="step1">1</Avatar>
-        }
+                  title={props.title}
+                  avatar={
+                    <Avatar aria-label="step1">1</Avatar>
+                  }
+                  action={
+                    <IconButton
+                      aria-describedby={'settings-popover'}
+                    >&nbsp;&nbsp;&nbsp;</IconButton>
+                  }
       />
       <p className={"stepSubHeader"}>Select the PHS variable that will link your data to Data Commons</p>
       <CardContent>
@@ -114,15 +121,17 @@ export default function Step1(props) {
                         disabled={!phsIndexVariables[varKey].enabled}>{phsIndexVariables[varKey].uiLabel}</MenuItem>
             )};
           </Select>
-          <FormHelperText>Select a variable from the list (Note: the current version is limited to zip codes)</FormHelperText>
+          <FormHelperText>Select a variable from the list (Note: the current version is limited to zip
+            codes)</FormHelperText>
         </FormControl>
         <div className={classes.separator}/>
 
         <FormControl className={classes.formControl}>
           <FormLabel component="legend">Variable values</FormLabel>
           <RadioGroup value={valueOptionRadio} onChange={handleChangeValuesOptionRadio}>
             <FormControlLabel value="optionEnter" control={<Radio color={"primary"}/>} label="Enter values by hand"/>
-            <FormControlLabel value="optionSelect" control={<Radio color={"primary"}/>} label="Use all values from selected locations"/>
+            <FormControlLabel value="optionSelect" control={<Radio color={"primary"}/>}
+                              label="Use all values from selected locations"/>
           </RadioGroup>
         </FormControl>
 

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

@@ -4,6 +4,8 @@ import TopicsSelector from "./TopicsSelector";
 import CardHeader from "@material-ui/core/CardHeader";
 import CardContent from "@material-ui/core/CardContent";
 import Avatar from "@material-ui/core/Avatar";
+import IconButton from "@material-ui/core/IconButton";
+import SettingsIcon from '@material-ui/icons/Settings';
 
 export default function Step2(props) {
 
@@ -24,6 +26,11 @@ export default function Step2(props) {
                   avatar={
                     <Avatar aria-label="step2">2</Avatar>
                   }
+                  action={
+                    <IconButton
+                      aria-describedby={'settings-popover'}
+                      >&nbsp;&nbsp;&nbsp;</IconButton>
+                  }
       />
       <p className={"stepSubHeader"}>Select the Data Commons variables you want to retrieve values from</p>
       <CardContent>

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

@@ -219,7 +219,7 @@ export default function Step3(props) {
                       onClick={handleClickOpenSettingsPopOver}><SettingsIcon/></IconButton>
                   }
       />
-      <p className={"stepSubHeader"}>Generate and download the selected data</p>
+      <p className={"stepSubHeader"}>Generate and download the selected data<br/></p>
       <CardContent>
         <Popover
           id={'settings-popover'}
@@ -238,11 +238,11 @@ export default function Step3(props) {
         </Popover>
 
         <div className={classes.buttons}>
-          <Button disabled={showDownloadProgress} variant="outlined" color="primary" onClick={downloadDataFile}>
+          <Button disabled={showDownloadProgress} variant="outlined" color="primary" onClick={downloadDataFile} size={"large"}>
             Download data
           </Button>
           &nbsp;&nbsp;&nbsp;
-          <Button variant="outlined" color="primary" onClick={handleClickOpenCodeDialog} disabled={false}>
+          <Button variant="outlined" color="primary" onClick={handleClickOpenCodeDialog} disabled={false} size={"large"}>
             Show R code
           </Button>
         </div>

phs-gdc-dashboard/src/resources/r/snippets/snippetsR.json

@@ -1,5 +1,5 @@
 {
-  "snippet1": "# Load the 'dplyr' package. If it's not installed, run install.packages(\"dplyr\")\nlibrary(dplyr)\n\n# (Optional) Set your working directory\nsetwd(\"/path_to/your_working_directory\")\n\n# Read your data into a data frame\ndf1 <- read.csv(\"/path_to/your_data_file.csv\", header = T)\n\n# Read the downloaded Data Commons CSV file into a new data frame\ndf2 <- read.csv(\"/path_to/dcw_data.csv\", header=T)\n\n# Merge the two data frames using the appropriate column names\ncol1 = \"zip\"\ncol2 = \"zipCode\"\nmerged_df <- left_join(df1, df2, by=setNames(nm=col1, col2))\n\n# (Optional) Export merged data to CSV\nwrite.csv(merged_df, \"/path_to/merged_data.csv\", row.names = F)"
+  "snippet1": "# Please fill in the following constants according to your folder/file names\nwd <- \"~/Desktop/r_wd\"\nuser_filename <- \"user_data.csv\"\ndcw_filename <- \"dcw_data.csv\"\nuser_colname = \"zip\"\ndcw_colname = \"zipCode\"\noutput_filename <- \"merged_data.csv\"\n\n# Load the 'dplyr' package. If it's not installed, run install.packages(\"dplyr\")\nlibrary(dplyr)\n\n# Set working directory\nsetwd(wd)\n\n# Read the user's data\ndf1 <- read.csv(user_filename, header = T)\n\n# Read the downloaded Data Commons CSV file into a new data frame\ndf2 <- read.csv(dcw_filename, header=T)\n\n# Merge the two data frames using the appropriate column names\nmerged_df <- left_join(df1, df2, by=setNames(nm=user_colname, dcw_colname))\n\n# Export merged data to CSV\nwrite.csv(merged_df, output_filename, row.names = F)"
 }
 
 

r/snippet-merge-csv/MergeSnippet.R

@@ -1,4 +1,3 @@
-
 # Please fill in the following constants according to your folder/file names
 wd <- "~/Desktop/r_wd"
 user_filename <- "user_data.csv"