@bento-core/facet-filter 1.0.1-ccdihub.9 → 1.0.1-ctdc.0

package/README.md

@@ -244,12 +244,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
@@ -128,7 +135,6 @@ const FacetFilterController = props => {
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
             updateFacet.facetValues = [lowerBound, upperBound];
-            updateFacet.style = facet.style;
           }
         }
         updateFacets.push(updateFacet);
@@ -141,7 +147,6 @@ 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);

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/facet/FacetView.js

@@ -82,7 +82,7 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
@@ -114,10 +114,10 @@ const FacetView = _ref => {
     onClick: () => {
       onSortFacet(_Sort.sortType.NUMERIC);
     }
-  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+  }, "Sort by count"))), expand && /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     sortBy: sortBy
-  })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
+  })), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: displayFacet

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

@@ -9,8 +9,6 @@ var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
-var _emptycheckbox = _interopRequireDefault(require("./assets/emptycheckbox.svg"));
-var _checkedbox = _interopRequireDefault(require("./assets/checkedbox.svg"));
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable no-unused-vars */
@@ -20,8 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable no-useless-escape */
 
-const alignment = 'flex-start';
 const CheckBoxView = _ref => {
   let {
     classes,
@@ -31,16 +29,19 @@ 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, ")")
+  } = 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] || 'N/A';
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
@@ -55,9 +56,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, {
@@ -73,43 +72,41 @@ const CheckBoxView = _ref => {
     })
   }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
     id: "checkbox_".concat(facet.label, "_").concat(name),
-    icon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
-        fontSize: '18px',
-        lineHeight: '22px'
-      }
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: _emptycheckbox.default,
-      alt: "checkbox-icon"
-    })),
+        fontSize: 18
+      },
+      className: checkedSection
+    }),
     onClick: handleToggle,
     checked: isChecked,
-    checkedIcon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
       style: {
-        fontSize: '18px',
-        lineHeight: '22px'
+        fontSize: 18
       },
       className: "".concat(checkedSection, "CheckedIcon")
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: _checkedbox.default,
-      alt: "checkedBox-icon"
-    })),
+    }),
     disableRipple: true,
     color: "secondary",
     classes: {
       root: classes.checkboxRoot
+    },
+    inputProps: {
+      'aria-label': 'Select'
     }
   }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     id: datafield,
     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, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, 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(_core.Divider, {
+  }, customCount(checkboxItem[count] || 0))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
+var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -97,7 +98,6 @@ const SliderView = _ref => {
     min: minLowerBound,
     max: maxUpperBound,
     classes: {
-      colorPrimary: classes.colorPrimary,
       rail: classes.rail,
       thumb: isValid() ? classes.thumb : classes.invalidThumb,
       track: isValid() ? classes.track : classes.invalidTrack
@@ -112,125 +112,5 @@ const SliderView = _ref => {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };
-const styles = () => ({
-  colorPrimary: props => props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary : {
-    color: '#3f51b5'
-  },
-  sliderRoot: props => props.facet.style && props.facet.style.sliderRoot ? props.facet.style.sliderRoot : {
-    marginTop: '10px',
-    marginLeft: '20px',
-    marginRight: 'Auto',
-    paddingRight: '20px'
-  },
-  minValue: props => props.facet.style && props.facet.style.minValue ? props.facet.style.minValue : {
-    fontFamily: 'Nunito',
-    fontSize: '15px',
-    color: '#000000',
-    marginBottom: '0px',
-    float: 'left',
-    width: '75px',
-    display: 'flex'
-  },
-  maxValue: props => props.facet.style && props.facet.style.maxValue ? props.facet.style.maxValue : {
-    fontFamily: 'Nunito',
-    fontSize: '15px',
-    color: '#000000',
-    float: 'right',
-    marginBottom: '0px',
-    display: 'flex'
-  },
-  rail: props => props.facet.style && props.facet.style.rail ? props.facet.style.rail : {
-    borderRadius: 4,
-    height: 6,
-    background: '#142D64'
-  },
-  minInputLabel: props => props.facet.style && props.facet.style.minInputLabel ? props.facet.style.minInputLabel : {
-    float: 'left',
-    lineHeight: '34px',
-    marginRight: '5px'
-  },
-  maxInputLabel: props => props.facet.style && props.facet.style.maxInputLabel ? props.facet.style.maxInputLabel : {
-    float: 'left',
-    lineHeight: '34px',
-    marginRight: '5px'
-  },
-  thumb: props => props.facet.style && props.facet.style.thumb ? props.facet.style.thumb : {
-    height: 16,
-    width: 16,
-    background: '#10A075'
-  },
-  invalidThumb: props => props.facet.style && props.facet.style.invalidThumb ? props.facet.style.invalidThumb : {
-    height: 16,
-    width: 16,
-    background: '#F44336'
-  },
-  track: props => props.facet.style && props.facet.style.track ? props.facet.style.track : {
-    borderRadius: 4,
-    height: 6,
-    background: '#10A075',
-    '&~&': {
-      background: '#142D64'
-    }
-  },
-  invalidTrack: props => props.facet.style && props.facet.style.invalidTrack ? props.facet.style.invalidTrack : {
-    borderRadius: 4,
-    height: 6,
-    background: '#F44336',
-    '&~&': {
-      background: '#142D64'
-    }
-  },
-  upperBound: props => props.facet.style && props.facet.style.upperBound ? props.facet.style.upperBound : {
-    fontFamily: 'Nunito',
-    fontSize: '10px',
-    color: '#000000',
-    float: 'right',
-    marginLeft: 'Auto',
-    marginRight: 'Auto',
-    marginBottom: '15px'
-  },
-  lowerBound: props => props.facet.style && props.facet.style.lowerBound ? props.facet.style.lowerBound : {
-    fontFamily: 'Nunito',
-    fontSize: '10px',
-    color: '#000000',
-    float: 'left',
-    marginLeft: 'Auto',
-    marginRight: 'Auto',
-    marginBottom: '15px'
-  },
-  sliderText: props => props.facet.style && props.facet.style.sliderText ? props.facet.style.sliderText : {
-    color: '#10a075',
-    lineHeight: '120%',
-    fontFamily: 'Nunito',
-    fontSize: '14px',
-    padding: '5px 15px 5px 0px',
-    width: '100%',
-    textAlign: 'right',
-    background: '#f5fdee',
-    marginTop: '10px'
-  },
-  invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
-    color: '#D32F2F',
-    lineHeight: '120%',
-    fontFamily: 'Nunito',
-    fontSize: '14px',
-    padding: '5px 15px 5px 0px',
-    width: '100%',
-    textAlign: 'right',
-    background: '#E57373',
-    marginTop: '10px'
-  },
-  sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
-    height: '15px'
-  },
-  listItemGutters: props => props.facet.style && props.facet.style.listItemGutters ? props.facet.style.listItemGutters : {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '2px 5px 2px 8px'
-  },
-  lowerUpperBound: props => props.facet.style && props.facet.style.lowerUpperBound ? props.facet.style.lowerUpperBound : {
-    height: '15px'
-  }
-});
-var _default = (0, _core.withStyles)(styles)(SliderView);
+var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);
 exports.default = _default;

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,17 +1,14 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.9",
-  "description": "### Bento core sidebar design:",
+  "version": "1.0.1-ctdc.0",
+  "description": "",
   "main": "dist/index.js",
   "scripts": {
     "build": "npm run lint && cross-env-shell rm -rf dist && NODE_ENV=production BABEL_ENV=es babel src --out-dir dist --copy-files",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint src"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CBIIT/bento-frontend.git"
-  },
+  "repository": "https://github.com/CBIIT/bento-frontend",
   "publishConfig": {
     "access": "public"
   },
@@ -27,9 +24,5 @@
     "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/CBIIT/bento-frontend/issues"
-  },
-  "homepage": "https://github.com/CBIIT/bento-frontend#readme"
+  "license": "ISC"
 }

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
@@ -113,7 +118,6 @@ const FacetFilterController = (props) => {
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
             updateFacet.facetValues = [lowerBound, upperBound];
-            updateFacet.style = facet.style;
           }
         }
         updateFacets.push(updateFacet);
@@ -126,7 +130,6 @@ 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);

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/facet/FacetView.js

@@ -92,7 +92,7 @@ const FacetView = ({
           </CustomAccordionSummary>
         )}
         {
-          (facetValues.length === 0)
+          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
           && (
           <div className={classes.NonSortGroup}>
             <span
@@ -152,13 +152,16 @@ const FacetView = ({
           </div>
           )
 }
-        <FilterItems
-          facet={facet}
-          sortBy={sortBy}
-        />
+        {(expand)
+          && (
+          <FilterItems
+            facet={facet}
+            sortBy={sortBy}
+          />
+          )}
       </Accordion>
       {
-        (!expand && type === InputTypes.CHECKBOX) && (
+        (!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0) && (
           <>
             <List id="filter_Items">
               <FilterItems

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

@@ -5,6 +5,8 @@
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable no-useless-escape */
+
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import {
@@ -15,18 +17,13 @@ import {
   Tooltip,
   Box,
   Typography,
-  Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
 import {
   CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
-import emptyCheckBox from './assets/emptycheckbox.svg';
-import checkedBox from './assets/checkedbox.svg';
 import styles from './CheckboxStyle';
 
-const alignment = 'flex-start';
-
 const CheckBoxView = ({
   classes,
   checkboxItem,
@@ -35,16 +32,21 @@ const CheckBoxView = ({
   facet,
 }) => {
   const {
-    name,
-    subjects,
     isChecked = false,
     index,
     section,
     tooltip,
-    label,
   } = checkboxItem;
+  const {
+    field = 'group',
+    count = 'subjects',
+    customCount = (text) => `(${text})`,
+  } = facet;
+
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
+  const checkedSection = `${section}`.toLowerCase().replace(/\ /g, '_');
+
+  const name = checkboxItem[field] || 'N/A';
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
@@ -63,9 +65,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>
   );
 
@@ -82,54 +84,43 @@ const CheckBoxView = ({
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
           icon={
-            <Icon style={{
-              fontSize: '18px',
-              lineHeight: '22px',
-            }}
-            >
-              <img
-                src={emptyCheckBox}
-                alt="checkbox-icon"
-              />
-            </Icon>
+            <CheckBoxBlankIcon
+              style={{ fontSize: 18 }}
+              className={checkedSection}
+            />
           }
           onClick={handleToggle}
           checked={isChecked}
           checkedIcon={(
-            <Icon
+            <CheckBoxIcon
               style={{
-                fontSize: '18px',
-                lineHeight: '22px',
+                fontSize: 18,
               }}
               className={`${checkedSection}CheckedIcon`}
-            >
-              <img
-                src={checkedBox}
-                alt="checkedBox-icon"
-              />
-            </Icon>
+            />
           )}
           disableRipple
           color="secondary"
           classes={{ root: classes.checkboxRoot }}
+          inputProps={{ 'aria-label': 'Select' }}
         />
         { tooltip ? (
           <Tooltip id={datafield} title={tooltip}>
             <div className={datafield}>
-              <LabelComponent />
+              {name}
             </div>
           </Tooltip>
         ) : (
           <LabelComponent />
         )}
-        <ListItemText />
+        <ListItemText className={`${checkedSection}_md_space`} />
         <Typography
           className={clsx(`${checkedSection}Subjects`, {
             [`${checkedSection}SubjectUnChecked`]: !isChecked,
             [`${checkedSection}SubjectChecked`]: isChecked,
           })}
         >
-          {`(${subjects})`}
+          {customCount(checkboxItem[count] || 0)}
         </Typography>
       </ListItem>
       <Divider

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

@@ -4,7 +4,7 @@
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
-// import styles from './SliderStyle';
+import styles from './SliderStyle';
 import { silderTypes } from '../Types';
 import InputMinMaxView from './InputMinMaxView';
 
@@ -93,7 +93,6 @@ const SliderView = ({
             min={minLowerBound}
             max={maxUpperBound}
             classes={{
-              colorPrimary: classes.colorPrimary,
               rail: classes.rail,
               thumb: isValid() ? classes.thumb : classes.invalidThumb,
               track: isValid() ? classes.track : classes.invalidTrack,
@@ -114,7 +113,9 @@ const SliderView = ({
         (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
         && (
           <Typography
-            className={isValid() ? classes.sliderText : classes.invalidSliderText}
+            className={isValid()
+              ? classes.sliderText
+              : classes.invalidSliderText}
           >
             {sliderValue[0]}
             {' - '}
@@ -128,161 +129,4 @@ const SliderView = ({
   );
 };
 
-const styles = () => ({
-  colorPrimary: (props) => (props.facet.style && props.facet.style.colorPrimary
-    ? props.facet.style.colorPrimary
-    : {
-      color: '#3f51b5',
-    }),
-  sliderRoot: (props) => (props.facet.style && props.facet.style.sliderRoot
-    ? props.facet.style.sliderRoot
-    : {
-      marginTop: '10px',
-      marginLeft: '20px',
-      marginRight: 'Auto',
-      paddingRight: '20px',
-    }),
-  minValue: (props) => (props.facet.style && props.facet.style.minValue
-    ? props.facet.style.minValue
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '15px',
-      color: '#000000',
-      marginBottom: '0px',
-      float: 'left',
-      width: '75px',
-      display: 'flex',
-    }),
-  maxValue: (props) => (props.facet.style && props.facet.style.maxValue
-    ? props.facet.style.maxValue
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '15px',
-      color: '#000000',
-      float: 'right',
-      marginBottom: '0px',
-      display: 'flex',
-    }),
-  rail: (props) => (props.facet.style && props.facet.style.rail
-    ? props.facet.style.rail
-    : {
-      borderRadius: 4,
-      height: 6,
-      background: '#142D64',
-    }),
-  minInputLabel: (props) => (props.facet.style && props.facet.style.minInputLabel
-    ? props.facet.style.minInputLabel
-    : {
-      float: 'left',
-      lineHeight: '34px',
-      marginRight: '5px',
-    }),
-  maxInputLabel: (props) => (props.facet.style && props.facet.style.maxInputLabel
-    ? props.facet.style.maxInputLabel
-    : {
-      float: 'left',
-      lineHeight: '34px',
-      marginRight: '5px',
-    }),
-  thumb: (props) => (props.facet.style && props.facet.style.thumb
-    ? props.facet.style.thumb
-    : {
-      height: 16,
-      width: 16,
-      background: '#10A075',
-    }),
-  invalidThumb: (props) => (props.facet.style && props.facet.style.invalidThumb
-    ? props.facet.style.invalidThumb
-    : {
-      height: 16,
-      width: 16,
-      background: '#F44336',
-    }),
-  track: (props) => (props.facet.style && props.facet.style.track
-    ? props.facet.style.track
-    : {
-      borderRadius: 4,
-      height: 6,
-      background: '#10A075',
-      '&~&': {
-        background: '#142D64',
-      },
-    }),
-  invalidTrack: (props) => (props.facet.style && props.facet.style.invalidTrack
-    ? props.facet.style.invalidTrack
-    : {
-      borderRadius: 4,
-      height: 6,
-      background: '#F44336',
-      '&~&': {
-        background: '#142D64',
-      },
-    }),
-  upperBound: (props) => (props.facet.style && props.facet.style.upperBound
-    ? props.facet.style.upperBound
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '10px',
-      color: '#000000',
-      float: 'right',
-      marginLeft: 'Auto',
-      marginRight: 'Auto',
-      marginBottom: '15px',
-    }),
-  lowerBound: (props) => (props.facet.style && props.facet.style.lowerBound
-    ? props.facet.style.lowerBound
-    : {
-      fontFamily: 'Nunito',
-      fontSize: '10px',
-      color: '#000000',
-      float: 'left',
-      marginLeft: 'Auto',
-      marginRight: 'Auto',
-      marginBottom: '15px',
-    }),
-  sliderText: (props) => (props.facet.style && props.facet.style.sliderText
-    ? props.facet.style.sliderText
-    : {
-      color: '#10a075',
-      lineHeight: '120%',
-      fontFamily: 'Nunito',
-      fontSize: '14px',
-      padding: '5px 15px 5px 0px',
-      width: '100%',
-      textAlign: 'right',
-      background: '#f5fdee',
-      marginTop: '10px',
-    }),
-  invalidSliderText: (props) => (props.facet.style && props.facet.style.invalidSliderText
-    ? props.facet.style.invalidSliderText
-    : {
-      color: '#D32F2F',
-      lineHeight: '120%',
-      fontFamily: 'Nunito',
-      fontSize: '14px',
-      padding: '5px 15px 5px 0px',
-      width: '100%',
-      textAlign: 'right',
-      background: '#E57373',
-      marginTop: '10px',
-    }),
-  sliderListItem: (props) => (props.facet.style && props.facet.style.sliderListItem
-    ? props.facet.style.sliderListItem
-    : {
-      height: '15px',
-    }),
-  listItemGutters: (props) => (props.facet.style && props.facet.style.listItemGutters
-    ? props.facet.style.listItemGutters
-    : {
-      display: 'flex',
-      justifyContent: 'space-between',
-      padding: '2px 5px 2px 8px',
-    }),
-  lowerUpperBound: (props) => (props.facet.style && props.facet.style.lowerUpperBound
-    ? props.facet.style.lowerUpperBound
-    : {
-      height: '15px',
-    }),
-});
-
 export default withStyles(styles)(SliderView);

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

package/dist/components/inputs/checkbox/assets/checkedbox.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#6D5F5B"/>
-<path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
-</svg>

package/dist/components/inputs/checkbox/assets/emptycheckbox.svg

@@ -1,5 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#6D5F5B"/>
-<rect width="14" height="14" fill="#6D5F5B"/>
-<rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
-</svg>

package/src/components/inputs/checkbox/assets/checkedbox.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#6D5F5B"/>
-<path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
-</svg>

package/src/components/inputs/checkbox/assets/emptycheckbox.svg

@@ -1,5 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#6D5F5B"/>
-<rect width="14" height="14" fill="#6D5F5B"/>
-<rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
-</svg>