Merge pull request #1258 from VirtualFlyBrain/feature/1257

#1257 - Tooltip for downloadable types
VirtualFlyBrain · Nov 25, 2021 · 5a51ed7 · 5a51ed7
2 parents 3d20af5 + 8282fe0
commit 5a51ed7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 33 deletions.
diff --git 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
@@ -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>
                     );
                   })}