diff --git a/src/client/components/facet_results/VirtualizedTable.js b/src/client/components/facet_results/VirtualizedTable.js index b3b4eb4a300474eb661ce0b11b41e7b6f0460db9..770e8822e284bae2d59b64f5351748f363e79900 100644 --- a/src/client/components/facet_results/VirtualizedTable.js +++ b/src/client/components/facet_results/VirtualizedTable.js @@ -18,12 +18,10 @@ import { const styles = theme => ({ root: props => ({ - display: 'flex', + height: 500, [theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: { height: `calc(100% - ${props.layoutConfig.tabHeight}px)` }, - // width: 'calc(100% - 1px)', - flexGrow: 1, borderTop: '1px solid rgb(224, 224, 224)', backgroundColor: theme.palette.background.paper, '& a': { @@ -154,68 +152,67 @@ class VirtualizedTable extends React.PureComponent { return ( <div className={classes.root}> {this.props.list.size > 0 && - <div style={{ flex: '1 1 auto' }}> - <AutoSizer> - {({ height, width }) => ( - <Table - overscanRowCount={10} - rowHeight={40} - rowGetter={rowGetter} - rowCount={this.props.list.size} - sort={this._sort} - sortBy={this.props.clientFSState.sortBy} - sortDirection={this.props.clientFSState.sortDirection.toUpperCase()} - width={width} - height={height} - headerHeight={50} - noRowsRenderer={this._noRowsRenderer} - style={tableStyles.tableRoot} - rowStyle={calculateRowStyle} - > - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.prefLabel.label`)} - cellDataGetter={({ rowData }) => rowData.prefLabel} - dataKey='prefLabel' - headerRenderer={headerRenderer} - cellRenderer={labelRenderer} - width={columnWidth + 70} - /> - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.broaderTypeLabel.label`)} - cellDataGetter={({ rowData }) => has(rowData, 'broaderTypeLabel') ? rowData.broaderTypeLabel.toLowerCase() : ''} - dataKey='broaderTypeLabel' - headerRenderer={headerRenderer} - width={columnWidth + 10} - /> - {/* <Column + <AutoSizer> + {({ height, width }) => ( + <Table + overscanRowCount={10} + rowHeight={40} + rowGetter={rowGetter} + rowCount={this.props.list.size} + sort={this._sort} + sortBy={this.props.clientFSState.sortBy} + sortDirection={this.props.clientFSState.sortDirection.toUpperCase()} + width={width} + height={height} + headerHeight={50} + noRowsRenderer={this._noRowsRenderer} + style={tableStyles.tableRoot} + rowStyle={calculateRowStyle} + > + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.prefLabel.label`)} + cellDataGetter={({ rowData }) => rowData.prefLabel} + dataKey='prefLabel' + headerRenderer={headerRenderer} + cellRenderer={labelRenderer} + width={columnWidth + 70} + /> + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.broaderTypeLabel.label`)} + cellDataGetter={({ rowData }) => has(rowData, 'broaderTypeLabel') ? rowData.broaderTypeLabel.toLowerCase() : ''} + dataKey='broaderTypeLabel' + headerRenderer={headerRenderer} + width={columnWidth + 10} + /> + {/* <Column label="NA type" cellDataGetter={({rowData}) => has(rowData,'typeLabel') ? rowData.typeLabel.toLowerCase() : ''} dataKey="typeLabel" headerRenderer={headerRenderer} width={columnWidth} /> */} - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.broaderAreaLabel.label`)} - cellDataGetter={({ rowData }) => rowData.broaderAreaLabel} - dataKey='broaderAreaLabel' - headerRenderer={headerRenderer} - width={columnWidth} - /> - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.modifier.label`)} - cellDataGetter={({ rowData }) => rowData.modifier} - dataKey='modifier' - headerRenderer={headerRenderer} - width={columnWidth + 10} - /> - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.basicElement.label`)} - cellDataGetter={({ rowData }) => rowData.basicElement} - dataKey='basicElement' - headerRenderer={headerRenderer} - width={columnWidth} - /> - {/* + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.broaderAreaLabel.label`)} + cellDataGetter={({ rowData }) => rowData.broaderAreaLabel} + dataKey='broaderAreaLabel' + headerRenderer={headerRenderer} + width={columnWidth} + /> + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.modifier.label`)} + cellDataGetter={({ rowData }) => rowData.modifier} + dataKey='modifier' + headerRenderer={headerRenderer} + width={columnWidth + 10} + /> + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.basicElement.label`)} + cellDataGetter={({ rowData }) => rowData.basicElement} + dataKey='basicElement' + headerRenderer={headerRenderer} + width={columnWidth} + /> + {/* <Column label="Collector" cellDataGetter={({rowData}) => rowData.collector} @@ -223,25 +220,24 @@ class VirtualizedTable extends React.PureComponent { headerRenderer={headerRenderer} width={columnWidth} /> */} - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.collectionYear.label`)} - cellDataGetter={({ rowData }) => rowData.collectionYear} - dataKey='collectionYear' - headerRenderer={headerRenderer} - width={columnWidth} - /> - <Column - label={intl.get(`perspectives.${perspectiveID}.properties.source.label`)} - cellDataGetter={({ rowData }) => rowData.source} - dataKey='source' - headerRenderer={headerRenderer} - cellRenderer={sourceRenderer} - width={columnWidth} - /> - </Table> - )} - </AutoSizer> - </div>} + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.collectionYear.label`)} + cellDataGetter={({ rowData }) => rowData.collectionYear} + dataKey='collectionYear' + headerRenderer={headerRenderer} + width={columnWidth} + /> + <Column + label={intl.get(`perspectives.${perspectiveID}.properties.source.label`)} + cellDataGetter={({ rowData }) => rowData.source} + dataKey='source' + headerRenderer={headerRenderer} + cellRenderer={sourceRenderer} + width={columnWidth} + /> + </Table> + )} + </AutoSizer>} </div> ) } diff --git a/src/client/containers/SemanticPortal.js b/src/client/containers/SemanticPortal.js index 3ad81847abeb4f5018084fd57181ca81b183e173..b1f37a5029b0744f0e6a18eba0c710fa26438ec6 100644 --- a/src/client/containers/SemanticPortal.js +++ b/src/client/containers/SemanticPortal.js @@ -78,6 +78,7 @@ const useStyles = makeStyles(theme => ({ needs to be defined also in index.html (for #app and #root elements) */ backgroundColor: '#bdbdbd', + overflowX: 'hidden', [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: { overflow: 'hidden', height: '100%' @@ -152,8 +153,7 @@ const useStyles = makeStyles(theme => ({ paddingLeft: theme.spacing(0.5), paddingRight: theme.spacing(0.5), [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: { - minHeight: 'initial', - height: `calc(100% - ${theme.spacing(2)}px)` + height: '100%' } }, resultsContainer: { @@ -172,13 +172,14 @@ const useStyles = makeStyles(theme => ({ }, resultsContainerClientFS: { minHeight: 500, - [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: { - minHeight: 'initial', - height: `calc(100% - ${theme.spacing(2)}px)` - }, paddingBottom: '0px !important', paddingRight: theme.spacing(0.5), - paddingLeft: theme.spacing(0.5) + paddingLeft: theme.spacing(0.5), + marginTop: theme.spacing(0.5), + [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: { + height: '100%', + marginTop: 0 + } }, instancePageContainer: { margin: theme.spacing(0.5),