Add expand button to table rows

package-lock.json

@@ -8390,7 +8390,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -8805,7 +8806,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -8861,6 +8863,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -8904,12 +8907,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/client/components/facet_results/ResultTable.js

@@ -47,10 +47,26 @@ const styles = theme => ({
   expandCell: {
     paddingRight: 0,
     //paddingLeft: 0
-  }
+  },
+  expand: {
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+    }),
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)',
+  },
 });
 
 class ResultTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      expandedRows: new Set(),
+    };
+  }
 
   componentDidMount = () => {
     let page;
@@ -123,27 +139,35 @@ class ResultTable extends React.Component {
     }
   }
 
-  handleExpandRow = () => {
-    //console.log('expanded')
+  handleExpandRow = rowId => () => {
+    console.log(rowId);
+    let expandedRows = this.state.expandedRows;
+    if (expandedRows.has(rowId)) {
+      expandedRows.delete(rowId);
+    } else {
+      expandedRows.add(rowId);
+    }
+    this.setState({ expandedRows});
   }
 
   rowRenderer = row => {
-    // <TableCell className={classes.expandCell}>
-    //   <IconButton
-    //     className={clsx(classes.expand, {
-    //       [classes.expandOpen]: expanded,
-    //     })}
-    //     onClick={this.handleExpandRow}
-    //     aria-expanded={expanded}
-    //     aria-label="Show more"
-    //   >
-    //     <ExpandMoreIcon />
-    //   </IconButton>
-    // </TableCell>
-    //const { classes } = this.props;
-    //const expanded = false;
+    const { classes } = this.props;
+    //console.log(this.state.expandedRows)
+    const expanded = this.state.expandedRows.has(row.id);
     return (
       <TableRow key={row.id}>
+        <TableCell className={classes.expandCell}>
+          <IconButton
+            className={clsx(classes.expand, {
+              [classes.expandOpen]: expanded,
+            })}
+            onClick={this.handleExpandRow(row.id)}
+            aria-expanded={expanded}
+            aria-label="Show more"
+          >
+            <ExpandMoreIcon />
+          </IconButton>
+        </TableCell>
         {this.props.data.tableColumns.map(column => {
           return (
             <ResultTableCell
@@ -156,6 +180,7 @@ class ResultTable extends React.Component {
               numberedList={column.numberedList}
               minWidth={column.minWidth}
               container='cell'
+              expanded={expanded}
             />
           );
         })}

src/client/components/facet_results/ResultTableCell.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { sortBy, orderBy, has } from 'lodash';
 import TableCell from '@material-ui/core/TableCell';
 import { withStyles } from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+import Typography from '@material-ui/core/Typography';
 
 const styles = () => ({
   valueList: {
@@ -178,7 +180,8 @@ const ResultTableCell = props => {
     }
   };
 
-  const { data, valueType, makeLink, sortValues, numberedList, minWidth, container } = props;
+  const { data, valueType, makeLink, sortValues, numberedList, minWidth,
+    container, expanded } = props;
   let renderer = null;
   let cellStyle = minWidth == null ? {} : { minWidth: minWidth };
   switch (valueType) {
@@ -206,6 +209,9 @@ const ResultTableCell = props => {
     return(
       <TableCell style={cellStyle}>
         {renderer(data, makeLink, sortValues, numberedList)}
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <Typography>expanded content</Typography>
+        </Collapse>
       </TableCell>
     );
   }
@@ -219,7 +225,8 @@ ResultTableCell.propTypes = {
   makeLink: PropTypes.bool.isRequired,
   sortValues: PropTypes.bool.isRequired,
   numberedList: PropTypes.bool.isRequired,
-  minWidth: PropTypes.number
+  minWidth: PropTypes.number,
+  expanded: PropTypes.bool.isRequired
 };
 
 export default withStyles(styles)(ResultTableCell);

src/client/components/facet_results/ResultTableHead.js

@@ -23,8 +23,7 @@ const ResultTableHead = props => {
   return (
     <TableHead>
       <TableRow>
-        {/* <TableCell className={classes.headerCol} key={'empty'}>
-        </TableCell>*/}
+        <TableCell className={classes.headerCol} key={'empty'} />
         {columns.map(column => {
           return (
             <TableCell