feat: support separate maxHeights for facets and results tables

src/components/browse/EmbeddedSearchView.js

@@ -166,7 +166,7 @@ export class EmbeddedSearchView extends React.PureComponent {
 
         // If facets are null (hidden/excluded) and no props.tableColumnClassName set table col to be full width of container instead of the default set by ControlsAndResults.
         const tableColumnClassName = propTableColumnClassName || (facets === null ? "col-12" : undefined);
-        // Includes pass-through props like `maxHeight`, `hideFacets`, etc.
+        // Includes pass-through props like `maxHeight`, `maxFacetsBodyHeight`, `maxResultsBodyHeight`, `hideFacets`, etc.
         const viewProps = { ...passProps, aboveTableComponent, aboveFacetListComponent, facetListComponent, tableColumnClassName, facetColumnClassName, clearSelectedItemsOnFilter, selectedItems, onSelectItem, onResetSelectedItems };
         const filterFacetFxn = propFacetFilterFxn || this.filterFacetFxn;
 

src/components/browse/components/ControlsAndResults.js

@@ -75,8 +75,10 @@ export class ControlsAndResults extends React.PureComponent {
             isOwnPage = true,         // <- False when rendered by EmbeddedSearchView, else is true when from a SearchView
             isContextLoading = false, // <- Only applicable for EmbeddedSearchView, passed in by VirtualHrefController only, else is false always since we initialize immediately over search-response context that already has first 25 results
 
-            // From EmbeddedSearchView/manual-entry, used if isOwnPage is true
-            maxHeight = SearchResultTable.defaultProps.maxHeight,
+            // From EmbeddedSearchView/manual-entry, used if isOwnPage is true,
+            maxHeight,
+            maxFacetsBodyHeight = SearchResultTable.defaultProps.maxHeight,
+            maxResultsBodyHeight = SearchResultTable.defaultProps.maxHeight,
 
             // From CustomColumnController:
             hiddenColumns, addHiddenColumn, removeHiddenColumn, visibleColumnDefinitions,
@@ -99,11 +101,10 @@ export class ControlsAndResults extends React.PureComponent {
             columnDefinitions, visibleColumnDefinitions, defaultColAlignment,
             setColumnWidths, columnWidths, detailPane, stickyFirstColumn,
             isOwnPage, sortBy, sortColumns, termTransformFxn, windowWidth, registerWindowOnScrollHandler, rowHeight,
-            defaultOpenIndices, maxHeight, targetTabKey,
+            defaultOpenIndices, maxHeight, maxResultsBodyHeight, targetTabKey,
             isContextLoading // <- Only applicable for EmbeddedSearchView, else is false always
         };
 
-
         /**
          * To Consider:
          * We could have 1 collection/object of props that is combination of
@@ -154,7 +155,8 @@ export class ControlsAndResults extends React.PureComponent {
                 showClearFiltersButton,
                 separateSingleTermFacets,
                 requestedCompoundFilterSet,
-                maxBodyHeight: (!isOwnPage && maxHeight) || null
+                // Default to maxHeight when provided
+                maxFacetsBodyHeight: (!isOwnPage && (maxHeight ?? maxFacetsBodyHeight)) || null,
             };
             extendedFacetListComponent = React.Children.map(facetListComponent, extendChild.bind(null, facetListProps));
         }

src/components/browse/components/FacetList/index.js

@@ -139,7 +139,7 @@ export class FacetList extends React.PureComponent {
         'onFilter' : PropTypes.func,        // What happens when Term is clicked.
         'onFilterMultiple': PropTypes.func, // Same as onFilter, but processes multiple filter changes in one go
         'separateSingleTermFacets' : PropTypes.bool,
-        'maxBodyHeight' : PropTypes.number,
+        'maxFacetsBodyHeight' : PropTypes.number,
         'useRadioIcon': PropTypes.bool.isRequired, // Show either checkbox (False) or radio icon (True) for term component - it is only for styling, not intended to implement single selection (radio) or multiple selection (checkbox)
         'persistSelectedTerms': PropTypes.bool.isRequired, // if True selected/omitted terms are escalated to top, otherwise each term is rendered in regular order. Moreover, inline search options are not displayed if it is False.
         'isContextLoading': PropTypes.bool,
@@ -731,7 +731,7 @@ export class FacetList extends React.PureComponent {
             title,
             onClearFilters = null,
             showClearFiltersButton = false,
-            maxBodyHeight: maxHeight = null,
+            maxFacetsBodyHeight = null,
             isContextLoading = false,
             hideHeaderToggle = false
         } = this.props;
@@ -747,8 +747,8 @@ export class FacetList extends React.PureComponent {
         }
 
         const bodyProps = {
-            className: "facets-body" + (typeof maxHeight === "number" ? " has-max-height" : ""),
-            style: typeof maxHeight === "number" ? { maxHeight } : null
+            className: "facets-body" + (typeof maxFacetsBodyHeight === "number" ? " has-max-height" : ""),
+            style: typeof maxFacetsBodyHeight === "number" ? { maxHeight: maxFacetsBodyHeight } : null
         };
 
         const { staticFacetElements, selectableFacetElements } = this.renderFacetComponents();

src/components/browse/components/SearchResultTable.js

@@ -363,7 +363,7 @@ class LoadMoreAsYouScroll extends React.Component {
         'results' : PropTypes.array.isRequired,                     // From parent
         'rowHeight' : PropTypes.number.isRequired,
         'isOwnPage' : PropTypes.bool.isRequired,
-        'maxHeight' : PropTypes.number,
+        'maxResultsBodyHeight' : PropTypes.number,
         'tableContainerScrollLeft' : PropTypes.number.isRequired,   // From parent
         'tableContainerWidth' : PropTypes.number,                   // From parent; required but may be null if table not visible/displayed in DOM.
         'setResults' : PropTypes.func.isRequired,                   // From parent
@@ -392,11 +392,11 @@ class LoadMoreAsYouScroll extends React.Component {
      * Used for memoization of styles that dont frequently change (prevent needless PureComponent updates).
      * `scrollableStyle` is applied to Infinite's outermost div element/container.
      */
-    static getStyles(maxHeight){
+    static getStyles(maxResultsBodyHeight){
         const styles = {};
         styles.scrollableStyle = {
-            maxHeight,
-            height: null, // Unset, let maxHeight take over.
+            maxHeight: maxResultsBodyHeight,
+            height: null, // Unset, let maxResultsBodyHeight take over.
             overflow: "auto" // Override "hidden scroll" default.
         };
         return styles;
@@ -537,7 +537,7 @@ class LoadMoreAsYouScroll extends React.Component {
     render(){
         const {
             children, rowHeight, openRowHeight, openDetailPanes, tableContainerWidth, tableContainerScrollLeft,
-            mounted: propMounted, isOwnPage, maxHeight, canLoadMore
+            mounted: propMounted, isOwnPage, maxResultsBodyHeight, canLoadMore
         } = this.props;
         const { mounted: stateMounted, isLoading } = this.state;
         if (!(propMounted || stateMounted)){
@@ -555,7 +555,7 @@ class LoadMoreAsYouScroll extends React.Component {
                 className="react-infinite-container"
                 ref={this.infiniteComponentRef}
                 elementHeight={elementHeight}
-                containerHeight={(!isOwnPage && maxHeight) || undefined}
+                containerHeight={(!isOwnPage && maxResultsBodyHeight) || undefined}
                 useWindowAsScrollContainer={isOwnPage}
                 onInfiniteLoad={this.handleLoad}
                 isInfiniteLoading={isLoading}
@@ -565,7 +565,7 @@ class LoadMoreAsYouScroll extends React.Component {
                 infiniteLoadBeginEdgeOffset={canLoadMore ? 200 : undefined}
                 preloadAdditionalHeight={Infinite.containerHeightScaleFactor(1.5)}
                 preloadBatchSize={Infinite.containerHeightScaleFactor(1.5)}
-                styles={isOwnPage ? null : this.memoized.getStyles(maxHeight)}>
+                styles={isOwnPage ? null : this.memoized.getStyles(maxResultsBodyHeight)}>
                 { children }
             </Infinite>
         );
@@ -965,7 +965,8 @@ class DimensioningContainer extends React.PureComponent {
             navigate,
             rowHeight = 47, // `rowHeight - rowBottomPadding` must be aligned in CSS stylesheets
             openRowHeight = null, // Will default to `rowHeight` if not supplied.
-            maxHeight = 500, // Only used if not isOwnPage
+            maxHeight, // Only used if not isOwnPage
+            maxResultsBodyHeight, // Only used if not isOwnPage
             isContextLoading = false,
             setColumnWidths,
             columnWidths,
@@ -984,7 +985,7 @@ class DimensioningContainer extends React.PureComponent {
         const loadMoreAsYouScrollProps = {
             ..._.pick(this.props, 'href', 'onDuplicateResultsFoundCallback', 'schemas', 'requestedCompoundFilterSet'),
             context, navigate, rowHeight, openRowHeight,
-            results, openDetailPanes, maxHeight, isOwnPage, fullRowWidth, canLoadMore, anyResults,
+            results, openDetailPanes, maxResultsBodyHeight: (maxHeight || maxResultsBodyHeight), isOwnPage, fullRowWidth, canLoadMore, anyResults,
             tableContainerWidth, tableContainerScrollLeft, windowWidth, mounted,
             setResults: this.setResults
         };
@@ -1123,7 +1124,9 @@ export class SearchResultTable extends React.Component {
         })),
         'termTransformFxn' : PropTypes.func.isRequired,
         'isOwnPage' : PropTypes.bool,
-        'maxHeight' : PropTypes.number, //PropTypes.oneOfType([PropTypes.number, PropTypes.string]) // Used only if isOwnPage is false
+        // Used only if isOwnPage is false
+        'maxHeight' : PropTypes.number, //PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+        'maxResultsBodyHeight' : PropTypes.number,
         'isContextLoading' : PropTypes.bool
     };
 
@@ -1143,7 +1146,6 @@ export class SearchResultTable extends React.Component {
         'fullWidthContainerSelectorString' : '.browse-page-container',
         'currentAction' : null,
         'isOwnPage' : true,
-        'maxHeight' : 400, // Used only if isOwnPage is false; todo: maybe move this defaultProp definition higher up into EmbeddedSearchView and leave null here.
         'isContextLoading' : false // Used only if isOwnPage is false
     };