@bento-core/facet-filter 1.0.1-popsci.3 → 1.0.1-popsci.4

package/README.md

@@ -95,6 +95,8 @@ export const facetsConfig = [{
     minLowerBound: 0,  
     maxUpperBound: 100,   
     quantifier: 'Years',
+    CustomLowerUpperBound: CustomLowerUpperBound, // Custom component for displaying lower and upper bounds
+    CustomSliderValue: CustomSliderValue, // Custom component for displaying slider value
 ].
 ```
 1. **apiForFiltering** refers to object key for retrieving name and subjects count from query response (DASHBOARD_QUERY)
@@ -244,12 +246,66 @@ className={clsx(classes.sectionSummaryText, classes[facetClasses])}
 ## 10  CLearAllFilterButton Component
 Bento Core provides 1. function to clear all active filters, 2. disable flag (true incase of no active filters). Client is responsible for defining view (custom html).
 ```
-import { generateClearAllFilterBtn } from 'bento-core';
+import { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
+import { getFilters } from '@bento-core/facet-filter';
 
 const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
     //...custom component 1. bind onClearFilters fn
     // 2. disable flag to disable button
-}
+} 
+  // get filter data
+  // filterState: state.statusReducer.filterState, (from reducer)
+  // const activeFilters = getFilters(filterState) // formating
+
+  <ClearAllFiltersBtn
+    Component={CustomClearAllFiltersBtn}
+    activeFilters={activeFilters}
+  />  
+```
+
+## 11  Facet Value Component
+```
+// response 
+// filterCaseCountByProgram: [{group: "COP", subjects: 301}]
+const {
+  name,
+  customName,
+  subjects,
+  customSubjects,
+  tooltip,
+} = checkboxItem;
+
+// 1. by default facet value component display group ("COP")
+// 2. set customName to display customize value
+// 3. by default facet value component display subjects (301)
+// 4. set customSubjects to display customize value or adjust correct field for subject count
+// 5. tooltip - provide text value to tooltip text
+
+ /**
+   * Add Bento frontend filter count/subjects
+   * Add tootip text
+   */
+  const filterData = facetsConfig.reduce((acc, item) => {
+    const facetValues = searchData[item.apiPath];
+    if (!facetValues) {
+      return acc;
+    }
+    const subjectCounts = [...facetValues].map((checkbox) => {
+      const text = tooltipText[item.tooltipKey];
+      return {
+        ...checkbox,
+        customSubjects: checkbox.count,
+        tooltip: text ? text[checkbox.group] : undefined,
+      };
+    });
+    return { ...acc, [item.apiPath]: [...subjectCounts] };
+  }, {});
 
-const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
+  <FacetFilter
+    data={filterData}
+    facetSectionConfig={facetSectionVariables}
+    facetsConfig={facetsConfig}
+    CustomFacetSection={CustomFacetSection}
+    CustomFacetView={CustomFacetView}
+  />
 ```

package/dist/FacetFilterController.js

@@ -12,13 +12,13 @@ var _FacetFilterView = _interopRequireDefault(require("./FacetFilterView"));
 const _excluded = ["section"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const FacetFilterController = props => {
   /**
    * update checkbox state
@@ -29,7 +29,8 @@ const FacetFilterController = props => {
     filterState,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    tooltipText = {}
   } = props;
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
@@ -37,9 +38,16 @@ const FacetFilterController = props => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach(sideBar => {
           if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach(item => {
-              item.isChecked = value[item.name] ? value[item.name] : false;
+            const {
+              facetValues = []
+            } = sideBar;
+            const updateFacetVals = facetValues.map(item => {
+              const facetVal = item[sideBar.field];
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isChecked: value[facetVal] ? value[facetVal] : false
+              });
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -49,9 +57,13 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach(item => {
-            item.isChecked = false;
-          });
+          const {
+            facetValues = []
+          } = sideBar;
+          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+            isChecked: false
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -96,6 +108,7 @@ const FacetFilterController = props => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
+   * 3. add '
    */
   const addFacetValues = facets => {
     const updateFacets = [];
@@ -105,19 +118,13 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const updateField = data[apiForFiltering].map(item => {
-              const addField = _objectSpread({}, item);
-              addField.name = item[field];
-              return addField;
-            });
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values
@@ -140,7 +147,7 @@ const FacetFilterController = props => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter(facet => facet.show);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/dist/FacetFilterView.js

@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
 var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
 var _FacetSectionView = _interopRequireDefault(require("./components/section/FacetSectionView"));
 var _ReduxFacetView = _interopRequireDefault(require("./components/facet/ReduxFacetView"));
-var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
@@ -29,11 +28,7 @@ const BentoFacetFilter = _ref => {
   }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
     facet: facet,
     CustomView: CustomFacetView
-  }, /*#__PURE__*/_react.default.createElement(_core.List, {
-    className: "List_".concat(facet.label)
-  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-    facet: facet
-  }))))))));
+  }))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
 exports.default = _default;

package/dist/components/inputs/checkbox/CheckboxView.js

@@ -32,16 +32,20 @@ const CheckBoxView = _ref => {
     facet
   } = _ref;
   const {
-    name,
-    subjects,
     isChecked = false,
     index,
     section,
-    tooltip,
-    label
+    tooltip
   } = checkboxItem;
+  const {
+    field = 'group',
+    count = 'subjects',
+    customCount = text => "(".concat(text, ")"),
+    defaultValue = ''
+  } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
+  const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
+  const name = checkboxItem[field] || defaultValue || 'N/A';
   const checkboxId = "checkbox_".concat(facet.label, "_").concat(name);
   const rippleRef = (0, _react.useRef)(null);
   const handleRippleStart = event => {
@@ -56,7 +60,7 @@ const CheckBoxView = _ref => {
   };
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
+      name: checkboxItem[field],
       datafield: datafield,
       isChecked: !isChecked
     };
@@ -68,9 +72,7 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
       ["".concat(checkedSection, "NameChecked")]: isChecked
     })
-  }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: classes.checkboxLabel
-  }, label) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.checkboxName
   }, name));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
@@ -121,14 +123,14 @@ const CheckBoxView = _ref => {
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+  }, name)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
     className: "".concat(checkedSection, "_md_space")
   }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, "(".concat(subjects, ")")), /*#__PURE__*/_react.default.createElement(_TouchRipple.default, {
+  }, customCount(checkboxItem[count] || 0)), /*#__PURE__*/_react.default.createElement(_TouchRipple.default, {
     ref: rippleRef,
     center: true
   })), /*#__PURE__*/_react.default.createElement(_core.Divider, {

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

@@ -39,7 +39,8 @@ function InputMinMaxView(_ref) {
       step: 1,
       min: minLowerBound,
       max: maxUpperBound,
-      type: 'number'
+      type: 'number',
+      'aria-label': 'slider'
     }
   });
 }

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

@@ -29,7 +29,9 @@ const SliderView = _ref => {
     maxUpperBound,
     quantifier,
     datafield,
-    facetValues
+    facetValues,
+    CustomLowerUpperBound,
+    CustomSliderValue
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
@@ -102,13 +104,24 @@ const SliderView = _ref => {
       thumb: isValid() ? classes.thumb : classes.invalidThumb,
       track: isValid() ? classes.track : classes.invalidTrack
     }
-  })), /*#__PURE__*/_react.default.createElement(_core.Box, {
+  })), typeof CustomLowerUpperBound === 'function' ? CustomLowerUpperBound({
+    minLowerBound,
+    maxUpperBound,
+    classes
+  }) : /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.lowerBound
   }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
-  }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, maxUpperBound))), typeof CustomSliderValue === 'function' ? CustomSliderValue({
+    sliderValue,
+    minLowerBound,
+    maxUpperBound,
+    isValid,
+    quantifier,
+    classes
+  }) : (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/dist/utils/Sort.js

@@ -46,28 +46,30 @@ const sortBySection = _ref => {
   let {
     facetValues,
     sort_type,
-    sortBy
+    sortBy,
+    field,
+    count = 'subjects'
   } = _ref;
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
+    sortfacetValues.sort((a, b) => b[count] - a[count]);
   } else {
-    sortfacetValues.sort((a, b) => lowerCaseString(a.name) > lowerCaseString(b.name) || -(lowerCaseString(a.name) < lowerCaseString(b.name)));
+    sortfacetValues.sort((a, b) => lowerCaseString(a[field]) > lowerCaseString(b[field]) || -(lowerCaseString(a[field]) < lowerCaseString(b[field])));
   }
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a.name);
-      const bNumbs = getNumberArray(b.name);
+      const aNumbs = getNumberArray(a[field]);
+      const bNumbs = getNumberArray(b[field]);
       const aNumb = Number(aNumbs[0]);
       const bNumb = Number(bNumbs[0]);
       return aNumbs.length === bNumbs.length ? aNumb > bNumb : -(aNumb <= bNumb);
     });
   }
   if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => startIndex(a.name) > startIndex(b.name) || -(startIndex(a.name) < startIndex(b.name)));
+    sortfacetValues.sort((a, b) => startIndex(a[field]) > startIndex(b[field]) || -(startIndex(a[field]) < startIndex(b[field])));
   }
   /**
    * Display checked item always on top

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-popsci.3",
+  "version": "1.0.1-popsci.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -25,5 +25,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "01a57a616fd8d9cc6ffca70907b17b16a1dc369f"
+  "gitHead": "3b3ccdfd3f5870b13f64d3642c7d8ab1649cf632"
 }

package/src/FacetFilterController.js

@@ -25,6 +25,7 @@ const FacetFilterController = (props) => {
     data,
     facetsConfig,
     facetSectionConfig,
+    tooltipText = {},
   } = props;
 
   const updateFacetState = (filterSections) => {
@@ -33,9 +34,15 @@ const FacetFilterController = (props) => {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach((sideBar) => {
           if (sideBar.type === InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach((item) => {
-              item.isChecked = value[item.name] ? value[item.name] : false;
+            const { facetValues = [] } = sideBar;
+            const updateFacetVals = facetValues.map((item) => {
+              const facetVal = item[sideBar.field];
+              return {
+                ...item,
+                isChecked: value[facetVal] ? value[facetVal] : false,
+              };
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -45,9 +52,12 @@ const FacetFilterController = (props) => {
     } else {
       updateSections.forEach((sideBar) => {
         if (sideBar.type === InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach((item) => {
-            item.isChecked = false;
-          });
+          const { facetValues = [] } = sideBar;
+          const updateFacetVals = facetValues.map((item) => ({
+            ...item,
+            isChecked: false,
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -83,6 +93,7 @@ const FacetFilterController = (props) => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
+   * 3. add '
    */
   const addFacetValues = (facets) => {
     const updateFacets = [];
@@ -90,19 +101,13 @@ const FacetFilterController = (props) => {
       facets.forEach((facet) => {
         const updateFacet = { ...facet, facetValues: [] };
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering,
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const updateField = data[apiForFiltering].map((item) => {
-              const addField = { ...item };
-              addField.name = item[field];
-              return addField;
-            });
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values
@@ -125,7 +130,7 @@ const FacetFilterController = (props) => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter((facet) => facet.show);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/src/FacetFilterView.js

@@ -3,13 +3,11 @@
 import React from 'react';
 import {
   Divider,
-  List,
   withStyles,
 } from '@material-ui/core';
 import styles from './FacetFilterStyle';
 import FacetSectionView from './components/section/FacetSectionView';
 import FacetView from './components/facet/ReduxFacetView';
-import FilterItems from './components/inputs/FilterItems';
 
 const BentoFacetFilter = ({
   sideBarSections,
@@ -33,13 +31,7 @@ const BentoFacetFilter = ({
                 <FacetView
                   facet={facet}
                   CustomView={CustomFacetView}
-                >
-                  <List className={`List_${facet.label}`}>
-                    <FilterItems
-                      facet={facet}
-                    />
-                  </List>
-                </FacetView>
+                />
               ))}
             </FacetSectionView>
           </>

package/src/components/inputs/checkbox/CheckboxView.js

@@ -34,16 +34,21 @@ const CheckBoxView = ({
   facet,
 }) => {
   const {
-    name,
-    subjects,
     isChecked = false,
     index,
     section,
     tooltip,
-    label,
   } = checkboxItem;
+  const {
+    field = 'group',
+    count = 'subjects',
+    customCount = (text) => `(${text})`,
+    defaultValue = '',
+  } = facet;
+
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
+  const checkedSection = `${section}`.toLowerCase().replace(/\ /g, '_');
+  const name = checkboxItem[field] || defaultValue || 'N/A';
   const checkboxId = `checkbox_${facet.label}_${name}`;
   const rippleRef = useRef(null);
 
@@ -61,7 +66,7 @@ const CheckBoxView = ({
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
+      name: checkboxItem[field],
       datafield: datafield,
       isChecked: !isChecked,
     };
@@ -76,9 +81,9 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      {label ? (
-        <Typography className={classes.checkboxLabel}>{label}</Typography>
-      ) : (<Typography className={classes.checkboxName}>{name}</Typography>)}
+      <Typography className={classes.checkboxName}>
+        {name}
+      </Typography>
     </Box>
   );
 
@@ -97,7 +102,11 @@ const CheckBoxView = ({
         >
           <Checkbox
             id={checkboxId}
-            icon={(<CheckBoxBlankIcon style={{ fontSize: 18 }} className={checkedSection} />
+            icon={(
+              <CheckBoxBlankIcon
+                style={{ fontSize: 18 }}
+                className={checkedSection}
+              />
             )}
             inputProps={{ 'aria-label': 'checkbox', tabIndex: -1, 'aria-hidden': true }}
             checked={isChecked}
@@ -117,7 +126,7 @@ const CheckBoxView = ({
           { tooltip ? (
             <Tooltip id={datafield} title={tooltip}>
               <div className={datafield}>
-                <LabelComponent />
+                {name}
               </div>
             </Tooltip>
           ) : (
@@ -130,7 +139,7 @@ const CheckBoxView = ({
               [`${checkedSection}SubjectChecked`]: isChecked,
             })}
           >
-            {`(${subjects})`}
+            {customCount(checkboxItem[count] || 0)}
           </Typography>
           <TouchRipple ref={rippleRef} center />
         </ListItem>

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

@@ -37,6 +37,7 @@ function InputMinMaxView({
         min: minLowerBound,
         max: maxUpperBound,
         type: 'number',
+        'aria-label': 'slider',
       }}
     />
   );

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

@@ -14,7 +14,15 @@ const SliderView = ({
   onSliderToggle,
   filterState,
 }) => {
-  const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
+  const {
+    minLowerBound,
+    maxUpperBound,
+    quantifier,
+    datafield,
+    facetValues,
+    CustomLowerUpperBound,
+    CustomSliderValue,
+  } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
@@ -99,24 +107,26 @@ const SliderView = ({
             }}
           />
         </div>
-        <Box className={classes.lowerUpperBound}>
-          <Typography className={classes.lowerBound}>
-            {minLowerBound}
-          </Typography>
-          <Typography className={classes.upperBound}>
-            {maxUpperBound}
-          </Typography>
-        </Box>
+        {typeof CustomLowerUpperBound === 'function' ? (
+          CustomLowerUpperBound({ minLowerBound, maxUpperBound, classes })
+        ) : (
+          <Box className={classes.lowerUpperBound}>
+            <Typography className={classes.lowerBound}>
+              {minLowerBound}
+            </Typography>
+            <Typography className={classes.upperBound}>
+              {maxUpperBound}
+            </Typography>
+          </Box>
+        )}
       </div>
       {/* Change to red if invalid range */}
-      {
-        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
-        && (
-          <Typography
-            className={isValid()
-              ? classes.sliderText
-              : classes.invalidSliderText}
-          >
+      {typeof CustomSliderValue === 'function' ? (
+        CustomSliderValue({
+          sliderValue, minLowerBound, maxUpperBound, isValid, quantifier, classes })
+      ) : (
+        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && (
+          <Typography className={isValid() ? classes.sliderText : classes.invalidSliderText}>
             {sliderValue[0]}
             {' - '}
             {sliderValue[1]}
@@ -124,7 +134,7 @@ const SliderView = ({
             {quantifier}
           </Typography>
         )
-      }
+      )}
     </>
   );
 };

package/src/utils/Sort.js

@@ -37,22 +37,28 @@ export const getNumberArray = (range) => {
  * @param {array} checkboxData
  * @return {array}
  */
-export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
+export const sortBySection = ({
+  facetValues,
+  sort_type,
+  sortBy,
+  field,
+  count = 'subjects',
+}) => {
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
+    sortfacetValues.sort((a, b) => b[count] - a[count]);
   } else {
-    sortfacetValues.sort(((a, b) => (lowerCaseString(a.name) > lowerCaseString(b.name)
-      || -(lowerCaseString(a.name) < lowerCaseString(b.name)))));
+    sortfacetValues.sort(((a, b) => (lowerCaseString(a[field]) > lowerCaseString(b[field])
+      || -(lowerCaseString(a[field]) < lowerCaseString(b[field])))));
   }
 
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a.name);
-      const bNumbs = getNumberArray(b.name);
+      const aNumbs = getNumberArray(a[field]);
+      const bNumbs = getNumberArray(b[field]);
       const aNumb = Number(aNumbs[0]);
       const bNumb = Number(bNumbs[0]);
       return (aNumbs.length === bNumbs.length) ? aNumb > bNumb : -(aNumb <= bNumb);
@@ -60,8 +66,8 @@ export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
   }
 
   if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
-    sortfacetValues.sort(((a, b) => (startIndex(a.name) > startIndex(b.name)
-      || -(startIndex(a.name) < startIndex(b.name)))));
+    sortfacetValues.sort(((a, b) => (startIndex(a[field]) > startIndex(b[field])
+      || -(startIndex(a[field]) < startIndex(b[field])))));
   }
   /**
    * Display checked item always on top