From f51149d33613645f4ed9b5ffd640791572a347f5 Mon Sep 17 00:00:00 2001
From: jrmartin <yeshuarmartinez@gmail.com>
Date: Wed, 17 Nov 2021 16:43:21 -0800
Subject: [PATCH 1/2] #1257 - Tooltip for downloadable types

---
 .../VFBDownloadContents/configuration.json    | 12 ++--
 .../VFBDownloadContents.js                    | 61 ++++++++++---------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/components/configuration/VFBDownloadContents/configuration.json b/components/configuration/VFBDownloadContents/configuration.json
index e8898542a..55ad5f5ce 100644
--- a/components/configuration/VFBDownloadContents/configuration.json
+++ b/components/configuration/VFBDownloadContents/configuration.json
@@ -4,16 +4,20 @@
 	"zipName" : "VFB Files.zip",
 	"options" :{
 		"obj": { 
-		  "label" : "OBJ"
+		  "label" : "OBJ",
+		  "tooltip" : "Download OBJ"
 		},
 		"swc": { 
-		  "label" : "SWC"
+		  "label" : "SWC",
+		  "tooltip" : "Download SWC"
 		},
 		"nrrd": { 
-		  "label" : "NRRD"
+		  "label" : "NRRD",
+		  "tooltip" : "Download NRRD"
 		},
 		"reference": { 
-		  "label" : "References"
+		  "label" : "References",
+		  "tooltip" : "Download References"
 		}
 	},
 	"text" : {
diff --git a/components/interface/VFBDownloadContents/VFBDownloadContents.js b/components/interface/VFBDownloadContents/VFBDownloadContents.js
index d2f5db8e1..115a21414 100644
--- a/components/interface/VFBDownloadContents/VFBDownloadContents.js
+++ b/components/interface/VFBDownloadContents/VFBDownloadContents.js
@@ -5,6 +5,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
+import Tooltip from "@material-ui/core/Tooltip";
 import Typography from "@material-ui/core/Typography";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -348,36 +349,38 @@ class VFBDownloadContents extends React.Component {
                     const labelId = `checkbox-list-secondary-label-${key}`;
                     return (
                       <Grid item xs={3}>
-                        <Box
-                          textAlign="center"
-                          className={
-                            this.state.typesChecked.indexOf(key) !== -1
-                              ? self.props.classes.checkedBox
-                              : null
-                          }
-                          p={2}
-                          border={1}
-                          borderColor="#E5E5E5"
-                          key={option.label}
-                        >
-                          <img src={iconsMap[key]} alt="" />
-                          <Typography
-                            align="center"
-                            variant="h5"
-                            id={labelId}
+                        <Tooltip title={<h6>{`${option.tooltip}`}</h6>} classes={{popper: "light"}} placement="top-start" arrow>
+                          <Box
+                            textAlign="center"
+                            className={
+                              this.state.typesChecked.indexOf(key) !== -1
+                                ? self.props.classes.checkedBox
+                                : null
+                            }
+                            p={2}
+                            border={1}
+                            borderColor="#E5E5E5"
+                            key={option.label}
                           >
-                            {`${option.label}`}
-                          </Typography>
-                          <Checkbox
-                            onChange={() => self.handleTypeSelection(key)}
-                            checked={this.state.typesChecked.indexOf(key) !== -1}
-                            inputProps={{ "aria-labelledby": labelId }}
-                            disabled={this.state.downloading}
-                            disableRipple
-                            className={self.props.classes.checked}
-                            id={option.id}
-                          />
-                        </Box>
+                            <img src={iconsMap[key]} alt="" />
+                            <Typography
+                              align="center"
+                              variant="h5"
+                              id={labelId}
+                            >
+                              {`${option.label}`}
+                            </Typography>
+                            <Checkbox
+                              onChange={() => self.handleTypeSelection(key)}
+                              checked={this.state.typesChecked.indexOf(key) !== -1}
+                              inputProps={{ "aria-labelledby": labelId }}
+                              disabled={this.state.downloading}
+                              disableRipple
+                              className={self.props.classes.checked}
+                              id={option.id}
+                            />
+                          </Box>
+                        </Tooltip>
                       </Grid>
                     );
                   })}

From 8282fe0782577a995d5637e3d3ce4107d858a984 Mon Sep 17 00:00:00 2001
From: jrmartin <yeshuarmartinez@gmail.com>
Date: Thu, 18 Nov 2021 22:45:45 -0800
Subject: [PATCH 2/2] #1257 fix eslint

---
 components/interface/VFBDownloadContents/VFBDownloadContents.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/interface/VFBDownloadContents/VFBDownloadContents.js b/components/interface/VFBDownloadContents/VFBDownloadContents.js
index 115a21414..6b86cf888 100644
--- a/components/interface/VFBDownloadContents/VFBDownloadContents.js
+++ b/components/interface/VFBDownloadContents/VFBDownloadContents.js
@@ -349,7 +349,7 @@ class VFBDownloadContents extends React.Component {
                     const labelId = `checkbox-list-secondary-label-${key}`;
                     return (
                       <Grid item xs={3}>
-                        <Tooltip title={<h6>{`${option.tooltip}`}</h6>} classes={{popper: "light"}} placement="top-start" arrow>
+                        <Tooltip title={ <h6>{`${option.tooltip}`}</h6> } classes={ { popper: "light" } } placement="top-start" arrow>
                           <Box
                             textAlign="center"
                             className={