Control expansion panels

src/client/components/facet_bar/FacetBar.js

@@ -23,14 +23,17 @@ const styles = theme => ({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   },
-  expansionPanelHeading: {
+  expansionPanelSummaryRoot: {
     paddingLeft: theme.spacing(1),
+    cursor: 'default !important'
+  },
+  expansionPanelSummaryContent: {
+    margin: 0
   },
   expansionPanelDetails: {
     paddingTop: 0,
     paddingLeft: theme.spacing(1),
     flexDirection: 'column'
-
   },
   three: {
     height: 108,
@@ -48,6 +51,23 @@ const styles = theme => ({
 
 class FacetBar extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeFacets: new Set(),
+    };
+  }
+
+  handleExpandButtonOnClick = facetID => () => {
+    let activeFacets = this.state.activeFacets;
+    if (activeFacets.has(facetID)) {
+      activeFacets.delete(facetID);
+    } else {
+      activeFacets.add(facetID);
+    }
+    this.setState({ activeFacets });
+  }
+
   renderFacet = (facetID, someFacetIsFetching) => {
     const { classes } = this.props;
     const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetData;
@@ -108,20 +128,26 @@ class FacetBar extends React.Component {
         );
         break;
     }
+    let isActive = this.state.activeFacets.has(facetID);
     return(
       <ExpansionPanel
         key={facetID}
-        
+        expanded={isActive}
       >
         <ExpansionPanelSummary
-          className={classes.expansionPanelHeading}
+          classes={{
+            root: classes.expansionPanelSummaryRoot,
+            content: classes.expansionPanelSummaryContent
+          }}
           expandIcon={<ExpandMoreIcon />}
+          IconButtonProps={{ onClick: this.handleExpandButtonOnClick(facetID) }}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
           <FacetHeader
             facetID={facetID}
             facet={facet}
+            isActive={isActive}
             facetClass={this.props.facetClass}
             resultClass={this.props.resultClass}
             fetchFacet={this.props.fetchFacet}

src/client/components/facet_bar/FacetHeader.js

@@ -17,6 +17,8 @@ const styles = theme => ({
   headingContainer: {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%'
     //paddingLeft: theme.spacing(1),
     //borderBottomLeftRadius: 0,
     //borderBottomRightRadius: 0,
@@ -167,14 +169,17 @@ class FacetHeader extends React.Component {
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, isActive } = this.props;
     const { label, sortButton, spatialFilterButton } = this.props.facet;
+    let showMenuButton = isActive && (sortButton || spatialFilterButton);
     return (
       <div className={classes.headingContainer}>
         <Typography variant="body1">{label} </Typography>
-        <div className={classes.facetHeaderButtons}>
-          {(sortButton || spatialFilterButton) && this.renderFacetMenu()}
-        </div>
+        {showMenuButton &&
+          <div className={classes.facetHeaderButtons}>
+            {this.renderFacetMenu()}
+          </div>
+        }
       </div>
     );
   }
@@ -184,6 +189,7 @@ FacetHeader.propTypes = {
   classes: PropTypes.object.isRequired,
   facetID: PropTypes.string,
   facet: PropTypes.object,
+  isActive: PropTypes.bool.isRequired,
   facetClass: PropTypes.string,
   resultClass: PropTypes.string,
   fetchFacet: PropTypes.func,

src/client/reducers/manuscriptsFacets.js

@@ -60,7 +60,7 @@ export const INITIAL_STATE = {
       sortBy: 'prefLabel',
       sortDirection: 'asc',
       sortButton: false,
-      spatialFilterButton: false,
+      spatialFilterButton: true,
       isFetching: false,
       searchField: true,
       containerClass: 'ten',
@@ -95,7 +95,7 @@ export const INITIAL_STATE = {
       flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
-      sortButton: false,
+      sortButton: true,
       spatialFilterButton: false,
       isFetching: false,
       searchField: true,
@@ -112,7 +112,7 @@ export const INITIAL_STATE = {
       flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
-      sortButton: false,
+      sortButton: true,
       spatialFilterButton: false,
       isFetching: false,
       searchField: true,
@@ -129,7 +129,7 @@ export const INITIAL_STATE = {
       flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
-      sortButton: false,
+      sortButton: true,
       spatialFilterButton: false,
       isFetching: false,
       searchField: true,