@bento-core/facet-filter 1.0.1-ins.2 → 1.0.1-popsci.0

package/README.md

@@ -244,66 +244,12 @@ 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 { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
-import { getFilters } from '@bento-core/facet-filter';
+import { generateClearAllFilterBtn } from 'bento-core';
 
 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] };
-  }, {});
+}
 
-  <FacetFilter
-    data={filterData}
-    facetSectionConfig={facetSectionVariables}
-    facetsConfig={facetsConfig}
-    CustomFacetSection={CustomFacetSection}
-    CustomFacetView={CustomFacetView}
-  />
+const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
 ```

package/dist/FacetFilterController.js

@@ -26,18 +26,11 @@ const FacetFilterController = props => {
    * 2. subject state
    */
   const {
-    activeFilters,
+    filterState,
     data,
     facetsConfig,
     facetSectionConfig
   } = props;
-  const filterState = {};
-  // console.log(activeFilters);
-  for (const [key, value] of Object.entries(activeFilters)) {
-    if (key !== 'program_names') {
-      filterState[key] = value;
-    }
-  }
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
     if (!_lodash.default.isEmpty(filterState)) {
@@ -45,8 +38,7 @@ const FacetFilterController = props => {
         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;
-              item.isChecked = value.indexOf(item.name) > -1;
+              item.isChecked = value[item.name] ? value[item.name] : false;
             });
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
@@ -120,30 +112,11 @@ const FacetFilterController = props => {
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const validValues = [];
             const updateField = data[apiForFiltering].map(item => {
               const addField = _objectSpread({}, item);
               addField.name = item[field];
-              validValues.push(addField.name);
               return addField;
             });
-            /**
-             * Check if there are orphen filter values and add them to the facet values
-             */
-            if (filterState !== undefined) {
-              const facetFilter = filterState[facet.datafield];
-              if (facetFilter) {
-                facetFilter.forEach(item => {
-                  if (validValues.indexOf(item) === -1) {
-                    const tmp = {};
-                    tmp.group = item;
-                    tmp.name = item;
-                    tmp.subjects = 0;
-                    updateField.push(tmp);
-                  }
-                });
-              }
-            }
             updateFacet.facetValues = updateField;
           }
           /**
@@ -167,7 +140,7 @@ const FacetFilterController = props => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter(facet => facet.show);
+  const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/dist/FacetFilterView.js

@@ -9,6 +9,7 @@ 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 */
@@ -28,7 +29,11 @@ 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

@@ -31,12 +31,12 @@ const FacetView = _ref => {
     autoComplete,
     upload
   } = _ref;
-  const [expand, setExpand] = (0, _react.useState)(true);
+  const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-  * expand section incase of active local search
-  */
+   * expand section incase of active local search
+   */
   (0, _react.useEffect)(() => {
     if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
       setExpand(true);
@@ -82,11 +82,11 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, 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", {
+  }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon

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

@@ -18,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,
@@ -29,19 +29,16 @@ const CheckBoxView = _ref => {
     facet
   } = _ref;
   const {
+    name,
+    subjects,
     isChecked = false,
     index,
     section,
-    tooltip
+    tooltip,
+    label
   } = checkboxItem;
-  const {
-    field = 'group',
-    count = 'subjects',
-    customCount = text => "(".concat(text, ")")
-  } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
-  const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
-  const name = checkboxItem[field] || 'N/A';
+  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
   const handleToggle = () => {
     const toggleCheckBoxItem = {
       name: name,
@@ -56,7 +53,9 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
       ["".concat(checkedSection, "NameChecked")]: isChecked
     })
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    className: classes.checkboxLabel
+  }, label) : /*#__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, {
@@ -75,8 +74,7 @@ const CheckBoxView = _ref => {
     icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
       style: {
         fontSize: 18
-      },
-      className: checkedSection
+      }
     }),
     onClick: handleToggle,
     checked: isChecked,
@@ -96,14 +94,12 @@ const CheckBoxView = _ref => {
     title: tooltip
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: datafield
-  }, name)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
-    className: "".concat(checkedSection, "_md_space")
-  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__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, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, customCount(checkboxItem[count] || 0))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
       backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
       margin: '0px',

package/dist/utils/Sort.js

@@ -46,35 +46,33 @@ const sortBySection = _ref => {
   let {
     facetValues,
     sort_type,
-    sortBy,
-    field,
-    count = 'subjects'
+    sortBy
   } = _ref;
   const sortfacetValues = [...facetValues];
   if (!sortfacetValues) {
     return facetValues;
   }
   if (sortBy === sortType.NUMERIC) {
-    sortfacetValues.sort((a, b) => b[count] - a[count]);
+    sortfacetValues.sort((a, b) => b.subjects - a.subjects);
   } else {
-    sortfacetValues.sort((a, b) => lowerCaseString(a[field]) > lowerCaseString(b[field]) || -(lowerCaseString(a[field]) < lowerCaseString(b[field])));
+    sortfacetValues.sort((a, b) => lowerCaseString(a.name) > lowerCaseString(b.name) || -(lowerCaseString(a.name) < lowerCaseString(b.name)));
   }
   if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
     sortfacetValues.sort((a, b) => {
-      const aNumbs = getNumberArray(a[field]);
-      const bNumbs = getNumberArray(b[field]);
+      const aNumbs = getNumberArray(a.name);
+      const bNumbs = getNumberArray(b.name);
       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[field]) > startIndex(b[field]) || -(startIndex(a[field]) < startIndex(b[field])));
+    sortfacetValues.sort((a, b) => startIndex(a.name) > startIndex(b.name) || -(startIndex(a.name) < startIndex(b.name)));
   }
   /**
    * Display checked item always on top
    */
-  // const sortedValues = sortByCheckedItem([...sortfacetValues]);
-  return sortfacetValues;
+  const sortedValues = sortByCheckedItem([...sortfacetValues]);
+  return sortedValues;
 };
 exports.sortBySection = sortBySection;

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ins.2",
-  "description": "### Bento core sidebar design:",
+  "version": "1.0.1-popsci.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"
   },
@@ -28,8 +25,5 @@
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/CBIIT/bento-frontend/issues"
-  },
-  "homepage": "https://github.com/CBIIT/bento-frontend#readme"
+  "gitHead": "38d37ee5dd6ce60b6320cbeeaa458ad7a5710dbb"
 }

package/src/FacetFilterController.js

@@ -21,20 +21,12 @@ const FacetFilterController = (props) => {
    * 2. subject state
    */
   const {
-    activeFilters,
+    filterState,
     data,
     facetsConfig,
     facetSectionConfig,
   } = props;
 
-  const filterState = {};
-  // console.log(activeFilters);
-  for (const [key, value] of Object.entries(activeFilters)) {
-    if (key !== 'program_names') {
-      filterState[key] = value;
-    }
-  }
-
   const updateFacetState = (filterSections) => {
     const updateSections = [...filterSections];
     if (!_.isEmpty(filterState)) {
@@ -42,8 +34,7 @@ const FacetFilterController = (props) => {
         updateSections.forEach((sideBar) => {
           if (sideBar.type === InputTypes.CHECKBOX && sideBar.datafield === key) {
             sideBar.facetValues.forEach((item) => {
-              // item.isChecked = value[item.name] ? value[item.name] : false;
-              item.isChecked = value.indexOf(item.name) > -1;
+              item.isChecked = value[item.name] ? value[item.name] : false;
             });
           }
           if (sideBar.type === InputTypes.SLIDER && sideBar.datafield === key) {
@@ -106,30 +97,11 @@ const FacetFilterController = (props) => {
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const validValues = [];
             const updateField = data[apiForFiltering].map((item) => {
               const addField = { ...item };
               addField.name = item[field];
-              validValues.push(addField.name);
               return addField;
             });
-            /**
-             * Check if there are orphen filter values and add them to the facet values
-             */
-            if (filterState !== undefined) {
-              const facetFilter = filterState[facet.datafield];
-              if (facetFilter) {
-                facetFilter.forEach((item) => {
-                  if (validValues.indexOf(item) === -1) {
-                    const tmp = {};
-                    tmp.group = item;
-                    tmp.name = item;
-                    tmp.subjects = 0;
-                    updateField.push(tmp);
-                  }
-                });
-              }
-            }
             updateFacet.facetValues = updateField;
           }
           /**
@@ -153,7 +125,7 @@ const FacetFilterController = (props) => {
    * Generate facet sections state
    *
    */
-  const displayFacets = facetsConfig.filter((facet) => facet.show);
+  const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
   const facetStates = addFacetValues(displayFacets);
   const updateState = updateFacetState(facetStates);
   const facetSections = arrangeBySections(updateState);

package/src/FacetFilterView.js

@@ -3,11 +3,13 @@
 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,
@@ -31,7 +33,13 @@ const BentoFacetFilter = ({
                 <FacetView
                   facet={facet}
                   CustomView={CustomFacetView}
-                />
+                >
+                  <List className={`List_${facet.label}`}>
+                    <FilterItems
+                      facet={facet}
+                    />
+                  </List>
+                </FacetView>
               ))}
             </FacetSectionView>
           </>

package/src/components/facet/FacetView.js

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Accordion,
-  List,
-  withStyles,
-  Icon,
+  Accordion, List, withStyles, Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
 import CustomAccordionSummary from '../summary/AccordionSummaryView';
@@ -22,15 +19,17 @@ const FacetView = ({
   autoComplete,
   upload,
 }) => {
-  const [expand, setExpand] = useState(true);
+  const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-  * expand section incase of active local search
-  */
+   * expand section incase of active local search
+   */
   useEffect(() => {
-    if ((autoComplete && autoComplete.length > 0)
-      || (upload && upload.length > 0)) {
+    if (
+      (autoComplete && autoComplete.length > 0)
+      || (upload && upload.length > 0)
+    ) {
       setExpand(true);
     }
   }, [autoComplete, upload]);
@@ -68,21 +67,20 @@ const FacetView = ({
         }}
         id={facet.section}
       >
-        { CustomView ? (
+        {CustomView ? (
           <CustomView
             facet={facet}
             facetClasses={
-            isActiveFacet ? `activeFacet${facet.section}`
-              : `inactiveFacet${facet.section}`
+              isActiveFacet
+                ? `activeFacet${facet.section}`
+                : `inactiveFacet${facet.section}`
             }
           />
         ) : (
           <CustomAccordionSummary>
             <div
-              id={
-                `filterGroup_ ${facet.datafield}
-                ${facet.label}`
-              }
+              id={`filterGroup_ ${facet.datafield}
+                ${facet.label}`}
               className={clsx(classes.subSectionSummaryText, {
                 [`activeFacet${facet.section}`]: isActiveFacet,
               })}
@@ -91,96 +89,60 @@ const FacetView = ({
             </div>
           </CustomAccordionSummary>
         )}
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
-          && (
+        {facetValues.length === 0 && (
           <div className={classes.NonSortGroup}>
-            <span
-              className={classes.NonSortGroupItem}
-            >
+            <span className={classes.NonSortGroupItem}>
               No data for this field
             </span>
           </div>
-          )
-        }
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length > 0)
-          && (
+        )}
+        {facetValues.length > 0 && (
           <div className={classes.sortGroup}>
             <span className={classes.sortGroupIcon}>
-              <Icon
-                style={{ fontSize: 10 }}
-                onClick={onClearSection}
-              >
-                <img
-                  src={clearIcon}
-                  height={12}
-                  width={12}
-                  alt="clear-icon"
-                />
+              <Icon style={{ fontSize: 10 }} onClick={onClearSection}>
+                <img src={clearIcon} height={12} width={12} alt="clear-icon" />
               </Icon>
             </span>
-            { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
-          && (
-          <>
-            <span
-              className={
-                    clsx(classes.sortGroupItem, {
-                      [classes.highlight]: sortBy === sortType.ALPHABET,
-                    })
-                  }
-              onClick={() => {
-                onSortFacet(sortType.ALPHABET);
-              }}
-            >
-              Sort alphabetically
-            </span>
-            <span
-              className={
-                    clsx(classes.sortGroupItemCounts, {
-                      [classes.highlight]: sortBy === sortType.NUMERIC,
-                    })
-                  }
-              onClick={() => {
-                onSortFacet(sortType.NUMERIC);
-              }}
-            >
-              Sort by count
-            </span>
-          </>
-          )}
+            {facet.type === InputTypes.CHECKBOX && facetValues.length > 0 && (
+              <>
+                <span
+                  className={clsx(classes.sortGroupItem, {
+                    [classes.highlight]: sortBy === sortType.ALPHABET,
+                  })}
+                  onClick={() => {
+                    onSortFacet(sortType.ALPHABET);
+                  }}
+                >
+                  Sort alphabetically
+                </span>
+                <span
+                  className={clsx(classes.sortGroupItemCounts, {
+                    [classes.highlight]: sortBy === sortType.NUMERIC,
+                  })}
+                  onClick={() => {
+                    onSortFacet(sortType.NUMERIC);
+                  }}
+                >
+                  Sort by count
+                </span>
+              </>
+            )}
           </div>
-          )
-}
-        {(expand)
-          && (
-          <FilterItems
-            facet={facet}
-            sortBy={sortBy}
-          />
-          )}
+        )}
+        {expand && <FilterItems facet={facet} sortBy={sortBy} />}
       </Accordion>
-      {
-        (!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0) && (
-          <>
-            <List id="filter_Items">
-              <FilterItems
-                facet={displayFacet}
-              />
-            </List>
-          </>
-        )
-      }
-      {
-        (!expand && selectedItems.length > limitCheckBoxCount) && (
-          <div
-            className={classes.showMore}
-            onClick={onExpandFacet}
-          >
-            ...expand to see all selections
-          </div>
-        )
-      }
+      {!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0 && (
+        <>
+          <List id="filter_Items">
+            <FilterItems facet={displayFacet} />
+          </List>
+        </>
+      )}
+      {!expand && selectedItems.length > limitCheckBoxCount && (
+        <div className={classes.showMore} onClick={onExpandFacet}>
+          ...expand to see all selections
+        </div>
+      )}
     </>
   );
 };

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

@@ -5,8 +5,6 @@
 /* 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 {
@@ -24,6 +22,8 @@ import {
 } from '@material-ui/icons';
 import styles from './CheckboxStyle';
 
+const alignment = 'flex-start';
+
 const CheckBoxView = ({
   classes,
   checkboxItem,
@@ -32,21 +32,16 @@ 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(/\ /g, '_');
-
-  const name = checkboxItem[field] || 'N/A';
+  const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
@@ -65,9 +60,9 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      <Typography className={classes.checkboxName}>
-        {name}
-      </Typography>
+      {label ? (
+        <Typography className={classes.checkboxLabel}>{label}</Typography>
+      ) : (<Typography className={classes.checkboxName}>{name}</Typography>)}
     </Box>
   );
 
@@ -83,12 +78,7 @@ const CheckBoxView = ({
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
-          icon={
-            <CheckBoxBlankIcon
-              style={{ fontSize: 18 }}
-              className={checkedSection}
-            />
-          }
+          icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
           onClick={handleToggle}
           checked={isChecked}
           checkedIcon={(
@@ -106,20 +96,20 @@ const CheckBoxView = ({
         { tooltip ? (
           <Tooltip id={datafield} title={tooltip}>
             <div className={datafield}>
-              {name}
+              <LabelComponent />
             </div>
           </Tooltip>
         ) : (
           <LabelComponent />
         )}
-        <ListItemText className={`${checkedSection}_md_space`} />
+        <ListItemText />
         <Typography
           className={clsx(`${checkedSection}Subjects`, {
             [`${checkedSection}SubjectUnChecked`]: !isChecked,
             [`${checkedSection}SubjectChecked`]: isChecked,
           })}
         >
-          {customCount(checkboxItem[count] || 0)}
+          {`(${subjects})`}
         </Typography>
       </ListItem>
       <Divider

package/src/utils/Sort.js

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