diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js index 150ae47a0fd7a0c4d901b23587d64f54c3f0cbb9..04df1053e2e0825319ad2c7ed8e84911896a73b4 100644 --- a/src/client/components/facet_bar/FacetBar.js +++ b/src/client/components/facet_bar/FacetBar.js @@ -69,8 +69,9 @@ class FacetBar extends React.Component { } renderFacet = (facetID, someFacetIsFetching) => { - const { classes } = this.props; + const { classes, resultTableColumns } = this.props; const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetData; + let resultTableColumn = resultTableColumns.find(column => column.id === facetID); const facet = facets[facetID]; let facetComponent = null; let isActive = this.state.activeFacets.has(facetID); @@ -153,6 +154,7 @@ class FacetBar extends React.Component { break; } + return( <ExpansionPanel key={facetID} @@ -176,6 +178,7 @@ class FacetBar extends React.Component { resultClass={this.props.resultClass} fetchFacet={this.props.fetchFacet} updateFacetOption={this.props.updateFacetOption} + description={resultTableColumn.desc} /> </ExpansionPanelSummary> <ExpansionPanelDetails @@ -229,6 +232,7 @@ FacetBar.propTypes = { fetchResultCount: PropTypes.func.isRequired, updateFacetOption: PropTypes.func.isRequired, defaultActiveFacets: PropTypes.instanceOf(Set).isRequired, + resultTableColumns: PropTypes.array.isRequired, }; export default withStyles(styles)(FacetBar); diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js index 54a4508223717bf784e19ccb4651c7f741799e0a..7b19fb1669298a4ac2c6ce8f8900d704c3030f36 100644 --- a/src/client/components/facet_bar/FacetHeader.js +++ b/src/client/components/facet_bar/FacetHeader.js @@ -7,6 +7,7 @@ import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import Typography from '@material-ui/core/Typography'; +import InfoIcon from '@material-ui/icons/InfoOutlined'; import history from '../../History'; const styles = theme => ({ @@ -17,12 +18,8 @@ const styles = theme => ({ headingContainer: { display: 'flex', alignItems: 'center', - justifyContent: 'space-between', + //justifyContent: 'space-between', width: '100%' - //paddingLeft: theme.spacing(1), - //borderBottomLeftRadius: 0, - //borderBottomRightRadius: 0, - //height: 48 }, facetValuesContainerTen: { height: 345, @@ -167,12 +164,20 @@ class FacetHeader extends React.Component { } render() { - const { classes, isActive } = this.props; + const { classes, isActive, description } = this.props; const { label, sortButton, spatialFilterButton } = this.props.facet; let showMenuButton = isActive && (sortButton || spatialFilterButton); return ( <div className={classes.headingContainer}> <Typography variant="body1">{label} </Typography> + <Tooltip + title={description} + enterDelay={300} + > + <IconButton> + <InfoIcon /> + </IconButton> + </Tooltip> {showMenuButton && <div className={classes.facetHeaderButtons}> {this.renderFacetMenu()} @@ -192,6 +197,7 @@ FacetHeader.propTypes = { resultClass: PropTypes.string, fetchFacet: PropTypes.func, updateFacetOption: PropTypes.func, + description: PropTypes.string.isRequired }; export default withStyles(styles)(FacetHeader); diff --git a/src/client/containers/SemanticPortal.js b/src/client/containers/SemanticPortal.js index 78e5b1b3da619b459a97bfcfad5e721f39320734..ffe1210a69bf2b295a4b7ad0fb912897b2ac6939 100644 --- a/src/client/containers/SemanticPortal.js +++ b/src/client/containers/SemanticPortal.js @@ -243,6 +243,7 @@ let SemanticPortal = (props) => { fetchResultCount={props.fetchResultCount} updateFacetOption={props.updateFacetOption} defaultActiveFacets={perspective.defaultActiveFacets} + resultTableColumns={props[perspective.id].tableColumns} /> </Grid> <Grid item xs={12} md={9} className={classes.resultsContainer}>