@bento-core/facet-filter 1.0.1-c3dc.6 → 1.0.1-c3dc.8

package/dist/FacetFilterController.js

@@ -61,7 +61,11 @@ const FacetFilterController = props => {
             minLowerBound,
             maxUpperBound
           } = sideBar;
-          sideBar.facetValues = [minLowerBound, maxUpperBound];
+          if (minLowerBound === 0 && maxUpperBound === 0) {
+            sideBar.facetValues = [0, 0];
+          } else {
+            sideBar.facetValues = [minLowerBound, maxUpperBound];
+          }
         }
       });
     }
@@ -126,13 +130,15 @@ const FacetFilterController = props => {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
             if (lowerBound === 0 && upperBound === 0) {
-              updateFacet.filterOut = true;
+              updateFacet.minLowerBound = 0;
+              updateFacet.maxUpperBound = 0;
+              updateFacet.facetValues = [];
             } else {
               updateFacet.minLowerBound = lowerBound;
               updateFacet.maxUpperBound = upperBound;
               updateFacet.facetValues = [lowerBound, upperBound];
-              updateFacet.style = facet.style;
             }
+            updateFacet.style = facet.style;
           }
         }
         if (!updateFacet.filterOut) {

package/dist/components/facet/FacetStyle.js

@@ -55,7 +55,9 @@ var _default = () => ({
     fontFamily: 'Nunito',
     fontSize: '11px',
     marginRight: '12px',
-    marginLeft: '24px'
+    marginLeft: '24px',
+    display: 'flex',
+    alignItems: 'center'
   },
   sortGroupItem: {
     cursor: 'pointer',
@@ -65,8 +67,6 @@ var _default = () => ({
   },
 
   NonSortGroup: {
-    marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
     paddingLeft: '10px'
   },

package/dist/components/facet/FacetView.js

@@ -82,17 +82,13 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.NonSortGroup
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.NonSortGroupItem
-  }, "No data for this field")), (facet.type === _Types.InputTypes.SLIDER || facetValues.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: facet.type === _Types.InputTypes.SLIDER ? classes.sortGroupSlider : classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     style: {
-      fontSize: 10
+      fontSize: 14
     },
     onClick: onClearSection
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -100,7 +96,11 @@ const FacetView = _ref => {
     height: 12,
     width: 12,
     alt: "clear-icon"
-  }))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  })), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.NonSortGroup
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.NonSortGroupItem
+  }, "No data for this field"))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.sortGroupItem, {
       [classes.highlight]: sortBy === _Sort.sortType.ALPHABET
     }),

package/dist/components/inputs/FilterItems.js

@@ -4,41 +4,128 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 var _ReduxCheckbox = _interopRequireDefault(require("./checkbox/ReduxCheckbox"));
 var _ReduxSlider = _interopRequireDefault(require("./slider/ReduxSlider"));
 var _Types = require("./Types");
 var _Sort = require("../../utils/Sort");
+var _FilterItemStyle = _interopRequireDefault(require("./FilterItemStyle"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const INITIAL_ITEM_SIZE = 20;
 const FilterItems = _ref => {
   let {
     facet,
-    sortBy
+    sortBy = null,
+    classes
   } = _ref;
   const {
     type,
     datafield,
     section
   } = facet;
+  const [displayCount, setDisplayCount] = (0, _react.useState)(INITIAL_ITEM_SIZE);
+  const scrollableRef = (0, _react.useRef)(null);
   const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
     sortBy
   }));
+
+  // Memoized scroll handler
+  const handleScroll = (0, _react.useCallback)(uncheckedCount => e => {
+    if (displayCount < uncheckedCount && uncheckedCount > INITIAL_ITEM_SIZE) {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = e.target;
+      if (scrollHeight > clientHeight) {
+        const position = Math.ceil(scrollTop / (scrollHeight - clientHeight) * 100);
+        if (position >= 90) {
+          setDisplayCount(prevCount => prevCount + INITIAL_ITEM_SIZE);
+        }
+      }
+    }
+  }, [displayCount]);
   const filterItems = () => {
     switch (type) {
       case _Types.InputTypes.CHECKBOX:
-        return sortFilters.map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
-          checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
-            index,
-            section
-          }),
-          datafield: datafield,
-          facet: facet
-        }));
+        {
+          // Only use lazy loading if we have more items than the initial size
+          const uncheckedCount = sortFilters.filter(item => !item.isChecked).length;
+          if (uncheckedCount <= INITIAL_ITEM_SIZE) {
+            // Render all items normally if below threshold
+            return sortFilters.map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
+              key: "all-".concat(item.name, "-").concat(index),
+              checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+                index,
+                section
+              }),
+              datafield: datafield,
+              facet: facet
+            }));
+          }
+
+          // Single pass: separate checked and unchecked items with their indices - O(n) complexity
+          const checkedItemsWithIndices = [];
+          const uncheckedItemsWithIndices = [];
+          sortFilters.forEach((item, originalIndex) => {
+            if (item.isChecked) {
+              checkedItemsWithIndices.push({
+                item,
+                originalIndex
+              });
+            } else {
+              uncheckedItemsWithIndices.push({
+                item,
+                originalIndex
+              });
+            }
+          });
+
+          // Always show checked items first
+          const checkedItems = checkedItemsWithIndices.map(_ref2 => {
+            let {
+              item,
+              originalIndex
+            } = _ref2;
+            return /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
+              key: "checked-".concat(item.name, "-").concat(originalIndex),
+              checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+                index: originalIndex,
+                section
+              }),
+              datafield: datafield,
+              facet: facet
+            });
+          });
+          const uncheckedItems = uncheckedItemsWithIndices.slice(0, displayCount).map(_ref3 => {
+            let {
+              item,
+              originalIndex
+            } = _ref3;
+            return /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
+              key: "unchecked-".concat(item.name, "-").concat(originalIndex),
+              checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+                index: originalIndex,
+                section
+              }),
+              datafield: datafield,
+              facet: facet
+            });
+          });
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
+            ref: scrollableRef,
+            className: classes.itemsContainer,
+            onScroll: handleScroll(uncheckedItemsWithIndices.length)
+          }, uncheckedItems));
+        }
       case _Types.InputTypes.SLIDER:
         return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
           facet: facet
@@ -47,7 +134,13 @@ const FilterItems = _ref => {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
     }
   };
+  (0, _react.useEffect)(() => {
+    setDisplayCount(INITIAL_ITEM_SIZE);
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTo(0, 0);
+    }
+  }, [sortBy]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterItems());
 };
-var _default = FilterItems;
+var _default = (0, _core.withStyles)(_FilterItemStyle.default)(FilterItems);
 exports.default = _default;

package/dist/components/inputs/slider/InputMinMaxView.js

@@ -18,9 +18,11 @@ function InputMinMaxView(_ref) {
     minLowerBound,
     maxUpperBound,
     onInputChange,
-    type
+    type,
+    disabled = false
   } = _ref;
   const handleInputChange = e => {
+    if (disabled) return;
     const minMaxRange = [lowerBoundVal, upperBoundVal];
     if (type === _Types.silderTypes.INPUT_MIN) {
       minMaxRange[0] = Number(e.target.value);
@@ -35,6 +37,7 @@ function InputMinMaxView(_ref) {
     id: "slider_".concat(type),
     className: classes["slider_".concat(type)],
     onChange: event => handleInputChange(event),
+    disabled: disabled,
     inputProps: {
       step: 1,
       min: minLowerBound,

package/dist/components/inputs/slider/SliderView.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _core = require("@material-ui/core");
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
@@ -30,11 +31,14 @@ const SliderView = _ref => {
     datafield,
     facetValues
   } = facet;
+  // Check if bounds are invalid (both are 0)
+  const isBoundsInvalid = !facetValues || facetValues.length === 0 || facetValues[0] === 0 && facetValues[1] === 0;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
+    if (isBoundsInvalid) return false;
     const checks = [lowerBoundValue <= upperBoundValue, lowerBoundValue >= minLowerBound, upperBoundValue <= maxUpperBound];
     return checks.every(condition => condition === true);
   };
@@ -74,7 +78,8 @@ const SliderView = _ref => {
     minLowerBound: minLowerBound,
     maxUpperBound: maxUpperBound,
     type: _Types.silderTypes.INPUT_MIN,
-    onInputChange: handleChangeCommittedSlider
+    onInputChange: handleChangeCommittedSlider,
+    disabled: isBoundsInvalid
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.maxValue
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
@@ -86,23 +91,31 @@ const SliderView = _ref => {
     minLowerBound: minLowerBound,
     maxUpperBound: maxUpperBound,
     type: _Types.silderTypes.INPUT_MAX,
-    onInputChange: handleChangeCommittedSlider
+    onInputChange: handleChangeCommittedSlider,
+    disabled: isBoundsInvalid
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.slider
   }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
     disableSwap: true,
+    disabled: isBoundsInvalid,
     getAriaValueText: valuetext,
-    onChange: handleChangeSlider,
-    onChangeCommitted: (event, value) => handleChangeCommittedSlider(value),
-    value: [...sliderValue],
+    onChange: isBoundsInvalid ? undefined : handleChangeSlider,
+    onChangeCommitted: isBoundsInvalid ? undefined : (event, value) => handleChangeCommittedSlider(value),
+    value: maxUpperBound === 0 ? [0, 0] : [...sliderValue],
     valueLabelDisplay: "auto",
     min: minLowerBound,
-    max: maxUpperBound,
+    max: maxUpperBound === 0 ? undefined : maxUpperBound,
     classes: {
-      colorPrimary: classes.colorPrimary,
-      rail: classes.rail,
-      thumb: isValid() ? classes.thumb : classes.invalidThumb,
-      track: isValid() ? classes.track : classes.invalidTrack
+      colorPrimary: (0, _clsx.default)("colorPrimary".concat(facet.section), classes.colorPrimary),
+      rail: (0, _clsx.default)("rail".concat(facet.section), classes.rail),
+      thumb: (0, _clsx.default)("thumb".concat(facet.section), {
+        isThumbValid: isValid(),
+        invalidThumb: !isValid()
+      }),
+      track: (0, _clsx.default)("track".concat(facet.section), {
+        isTrackValid: isValid(),
+        invalidTrack: !isValid()
+      })
     }
   })), /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
@@ -110,7 +123,7 @@ const SliderView = _ref => {
     className: classes.lowerBound
   }, minLowerBound.toLocaleString()), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
-  }, maxUpperBound.toLocaleString()))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, minLowerBound === 0 && maxUpperBound === 0 ? '-' : maxUpperBound !== 0 ? maxUpperBound.toLocaleString() : '.'))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-c3dc.6",
+  "version": "1.0.1-c3dc.8",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/FacetFilterController.js

@@ -54,7 +54,11 @@ const FacetFilterController = (props) => {
          */
         if (sideBar.type === InputTypes.SLIDER) {
           const { minLowerBound, maxUpperBound } = sideBar;
-          sideBar.facetValues = [minLowerBound, maxUpperBound];
+          if (minLowerBound === 0 && maxUpperBound === 0) {
+            sideBar.facetValues = [0, 0];
+          } else {
+            sideBar.facetValues = [minLowerBound, maxUpperBound];
+          }
         }
       });
     }
@@ -65,7 +69,7 @@ const FacetFilterController = (props) => {
     const sideBar = {};
 
     arr.forEach(({ section, ...item }) => {
-      const { isExpanded } =facetSectionConfig[section];
+      const { isExpanded } = facetSectionConfig[section];
       if (!sideBar[section]) {
         sideBar[section] = {
           name: section,
@@ -110,14 +114,17 @@ const FacetFilterController = (props) => {
           if (facet.type === InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
+
             if (lowerBound === 0 && upperBound === 0) {
-              updateFacet.filterOut = true;
+              updateFacet.minLowerBound = 0;
+              updateFacet.maxUpperBound = 0;
+              updateFacet.facetValues = [];
             } else {
               updateFacet.minLowerBound = lowerBound;
               updateFacet.maxUpperBound = upperBound;
               updateFacet.facetValues = [lowerBound, upperBound];
-              updateFacet.style = facet.style;
             }
+            updateFacet.style = facet.style;
           }
         }
         if (!updateFacet.filterOut) {

package/src/components/facet/FacetStyle.js

@@ -50,6 +50,8 @@ export default () => ({
     fontSize: '11px',
     marginRight: '12px',
     marginLeft: '24px',
+    display: 'flex',
+    alignItems: 'center',
   },
   sortGroupItem: {
     cursor: 'pointer',
@@ -58,8 +60,6 @@ export default () => ({
     // marginRight: '32px',
   },
   NonSortGroup: {
-    marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
     paddingLeft: '10px',
   },

package/src/components/facet/FacetView.js

@@ -89,18 +89,7 @@ const FacetView = ({
             </div>
           </CustomAccordionSummary>
         )}
-        {
-          (facetValues.length === 0)
-          && (
-          <div className={classes.NonSortGroup}>
-            <span
-              className={classes.NonSortGroupItem}
-            >
-              No data for this field
-            </span>
-          </div>
-          )
-        }
+
         {
           (facet.type === InputTypes.SLIDER || facetValues.length > 0)
           && (
@@ -110,7 +99,7 @@ const FacetView = ({
           >
             <span className={classes.sortGroupIcon}>
               <Icon
-                style={{ fontSize: 10 }}
+                style={{ fontSize: 14 }}
                 onClick={onClearSection}
               >
                 <img
@@ -120,6 +109,17 @@ const FacetView = ({
                   alt="clear-icon"
                 />
               </Icon>
+
+              {facetValues.length === 0
+              && (
+              <div className={classes.NonSortGroup}>
+                <span
+                  className={classes.NonSortGroupItem}
+                >
+                  No data for this field
+                </span>
+              </div>
+              )}
             </span>
             { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
           && (

package/src/components/inputs/FilterItems.js

@@ -1,28 +1,105 @@
 /* eslint-disable react/jsx-wrap-multilines */
 /* eslint-disable react/jsx-indent */
-import React from 'react';
+import React,
+{
+  useEffect, useState, useRef, useCallback,
+} from 'react';
+import { withStyles } from '@material-ui/core';
 import ReduxCheckbox from './checkbox/ReduxCheckbox';
 import ReduxSlider from './slider/ReduxSlider';
 import { InputTypes } from './Types';
 import { sortBySection } from '../../utils/Sort';
+import styles from './FilterItemStyle';
+
+const INITIAL_ITEM_SIZE = 20;
 
 const FilterItems = ({
   facet,
-  sortBy,
+  sortBy = null,
+  classes,
 }) => {
   const { type, datafield, section } = facet;
+  const [displayCount, setDisplayCount] = useState(INITIAL_ITEM_SIZE);
+  const scrollableRef = useRef(null);
   const sortFilters = sortBySection({ ...facet, sortBy });
 
+  // Memoized scroll handler
+  const handleScroll = useCallback((uncheckedCount) => (e) => {
+    if (displayCount < uncheckedCount && uncheckedCount > INITIAL_ITEM_SIZE) {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      if (scrollHeight > clientHeight) {
+        const position = Math.ceil((scrollTop / (scrollHeight - clientHeight)) * 100);
+        if (position >= 90) {
+          setDisplayCount((prevCount) => prevCount + INITIAL_ITEM_SIZE);
+        }
+      }
+    }
+  }, [displayCount]);
+
   const filterItems = () => {
     switch (type) {
-      case InputTypes.CHECKBOX:
-        return sortFilters.map((item, index) => (
+      case InputTypes.CHECKBOX: {
+        // Only use lazy loading if we have more items than the initial size
+        const uncheckedCount = sortFilters.filter((item) => !item.isChecked).length;
+        if (uncheckedCount <= INITIAL_ITEM_SIZE) {
+          // Render all items normally if below threshold
+          return sortFilters.map((item, index) => (
+            <ReduxCheckbox
+              key={`all-${item.name}-${index}`}
+              checkboxItem={{ ...item, index, section }}
+              datafield={datafield}
+              facet={facet}
+            />
+          ));
+        }
+
+        // Single pass: separate checked and unchecked items with their indices - O(n) complexity
+        const checkedItemsWithIndices = [];
+        const uncheckedItemsWithIndices = [];
+
+        sortFilters.forEach((item, originalIndex) => {
+          if (item.isChecked) {
+            checkedItemsWithIndices.push({ item, originalIndex });
+          } else {
+            uncheckedItemsWithIndices.push({ item, originalIndex });
+          }
+        });
+
+        // Always show checked items first
+        const checkedItems = checkedItemsWithIndices.map(({ item, originalIndex }) => (
           <ReduxCheckbox
-            checkboxItem={{ ...item, index, section }}
+            key={`checked-${item.name}-${originalIndex}`}
+            checkboxItem={{ ...item, index: originalIndex, section }}
             datafield={datafield}
             facet={facet}
           />
         ));
+        const uncheckedItems = uncheckedItemsWithIndices
+          .slice(0, displayCount)
+          .map(({ item, originalIndex }) => (
+            <ReduxCheckbox
+              key={`unchecked-${item.name}-${originalIndex}`}
+              checkboxItem={{ ...item, index: originalIndex, section }}
+              datafield={datafield}
+              facet={facet}
+            />
+          ));
+
+        return (
+          <>
+            <div>
+              {checkedItems}
+            </div>
+            <div
+              ref={scrollableRef}
+              className={classes.itemsContainer}
+              onScroll={handleScroll(uncheckedItemsWithIndices.length)}
+            >
+              {uncheckedItems}
+            </div>
+          </>
+        );
+      }
       case InputTypes.SLIDER:
         return (<ReduxSlider facet={facet} />);
       default:
@@ -30,6 +107,13 @@ const FilterItems = ({
     }
   };
 
+  useEffect(() => {
+    setDisplayCount(INITIAL_ITEM_SIZE);
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTo(0, 0);
+    }
+  }, [sortBy]);
+
   return (
     <>
       {filterItems()}
@@ -37,4 +121,4 @@ const FilterItems = ({
   );
 };
 
-export default FilterItems;
+export default withStyles(styles)(FilterItems);

package/src/components/inputs/slider/InputMinMaxView.js

@@ -14,8 +14,10 @@ function InputMinMaxView({
   maxUpperBound,
   onInputChange,
   type,
+  disabled = false,
 }) {
   const handleInputChange = (e) => {
+    if (disabled) return;
     const minMaxRange = [lowerBoundVal, upperBoundVal];
     if (type === silderTypes.INPUT_MIN) {
       minMaxRange[0] = Number(e.target.value);
@@ -32,6 +34,7 @@ function InputMinMaxView({
       id={`slider_${type}`}
       className={classes[`slider_${type}`]}
       onChange={(event) => handleInputChange(event)}
+      disabled={disabled}
       inputProps={{
         step: 1,
         min: minLowerBound,

package/src/components/inputs/slider/SliderView.js

@@ -3,6 +3,7 @@
 /* eslint-disable react/jsx-indent */
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
 // import styles from './SliderStyle';
 import { silderTypes } from '../Types';
@@ -15,11 +16,16 @@ const SliderView = ({
   filterState,
 }) => {
   const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
+  // Check if bounds are invalid (both are 0)
+  const isBoundsInvalid = !facetValues
+    || facetValues.length === 0
+    || (facetValues[0] === 0 && facetValues[1] === 0);
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
+    if (isBoundsInvalid) return false;
     const checks = [
       lowerBoundValue <= upperBoundValue,
       lowerBoundValue >= minLowerBound,
@@ -66,6 +72,7 @@ const SliderView = ({
               maxUpperBound={maxUpperBound}
               type={silderTypes.INPUT_MIN}
               onInputChange={handleChangeCommittedSlider}
+              disabled={isBoundsInvalid}
             />
           </div>
           <div className={classes.maxValue}>
@@ -80,6 +87,7 @@ const SliderView = ({
               maxUpperBound={maxUpperBound}
               type={silderTypes.INPUT_MAX}
               onInputChange={handleChangeCommittedSlider}
+              disabled={isBoundsInvalid}
             />
           </div>
         </div>
@@ -87,18 +95,27 @@ const SliderView = ({
           {/* Change to red if invalid range */}
           <Slider
             disableSwap
+            disabled={isBoundsInvalid}
             getAriaValueText={valuetext}
-            onChange={handleChangeSlider}
-            onChangeCommitted={(event, value) => handleChangeCommittedSlider(value)}
-            value={[...sliderValue]}
+            onChange={isBoundsInvalid ? undefined : handleChangeSlider}
+            onChangeCommitted={
+              isBoundsInvalid ? undefined : (event, value) => handleChangeCommittedSlider(value)
+            }
+            value={maxUpperBound === 0 ? [0, 0] : [...sliderValue]}
             valueLabelDisplay="auto"
             min={minLowerBound}
-            max={maxUpperBound}
+            max={maxUpperBound === 0 ? undefined : maxUpperBound}
             classes={{
-              colorPrimary: classes.colorPrimary,
-              rail: classes.rail,
-              thumb: isValid() ? classes.thumb : classes.invalidThumb,
-              track: isValid() ? classes.track : classes.invalidTrack,
+              colorPrimary: clsx(`colorPrimary${facet.section}`, classes.colorPrimary),
+              rail: clsx(`rail${facet.section}`, classes.rail),
+              thumb: clsx(`thumb${facet.section}`, {
+                isThumbValid: isValid(),
+                invalidThumb: !isValid(),
+              }),
+              track: clsx(`track${facet.section}`, {
+                isTrackValid: isValid(),
+                invalidTrack: !isValid(),
+              }),
             }}
           />
         </div>
@@ -107,7 +124,7 @@ const SliderView = ({
             {minLowerBound.toLocaleString()}
           </Typography>
           <Typography className={classes.upperBound}>
-            {maxUpperBound.toLocaleString()}
+            {(minLowerBound === 0 && maxUpperBound === 0) ? '-' : (maxUpperBound !== 0 ? maxUpperBound.toLocaleString() : '.')}
           </Typography>
         </Box>
       </div>