@bento-core/facet-filter 1.0.1-icdc.12 → 1.0.1-icdc.14

package/README.md

@@ -54,6 +54,8 @@ import FacetFilter from 'bento-core';
     facetsConfig={facetsConfig}
     CustomFacetSection={CustomFacetSection}
     CustomFacetView={CustomFacetView}
+    enableClearSection // add additional clear button on facet Section
+    enableFacetCollapse // collapse facet Section when clear
   />
 </FacetFilterThemeProvider>
 ```
@@ -77,7 +79,9 @@ export const facetsConfig = [{
   label: 'Program', 
   apiForFiltering: 'filterSubjectCountByProgram', 
   datafield: 'programs', 
-  field: GROUP, 
+  field: 'group', // field for label
+  count: 'subject' // field for count
+  customCount: (text) => `${text || 0}`, // custom count view add parentheses or change text as required
   type: InputTypes.CHECKBOX, 
   sort_type: sortType.ALPHABET,
   show: true, 
@@ -144,6 +148,8 @@ const CustomFacetSection = ({ section }) => {
   facetsConfig={facetsConfig}
   CustomFacetSection={CustomFacetSection}
   CustomFacetView={CustomFacetView}
+  enableClearSection // add additional clear button on facet Section
+  enableFacetCollapse // collapse facet Section when clear
 />
 ```
 
@@ -169,6 +175,8 @@ const CustomFacetView = ({ facet, facetClasses }) => {
   facetsConfig={facetsConfig}
   CustomFacetSection={CustomFacetSection}
   CustomFacetView={CustomFacetView}
+  enableClearSection // add additional clear button on facet Section
+  enableFacetCollapse // collapse facet Section when clear
 />
 ```
 

package/dist/FacetFilterView.js

@@ -18,7 +18,9 @@ const BentoFacetFilter = _ref => {
     sideBarSections,
     CustomFacetSection,
     CustomFacetView,
-    clearIcon
+    clearIcon,
+    enableClearSection,
+    enableFacetCollapse
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sideBarSections.map((section, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
     variant: "middle",
@@ -29,6 +31,8 @@ const BentoFacetFilter = _ref => {
   }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
     facet: facet,
     CustomView: CustomFacetView,
+    enableClearSection: enableClearSection,
+    enableFacetCollapse: enableFacetCollapse,
     clearIcon: clearIcon
   }))))));
 };

package/dist/components/facet/FacetView.js

@@ -7,12 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
 var _Types = require("../inputs/Types");
 var _FacetStyle = _interopRequireDefault(require("./FacetStyle"));
 var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
 var _Sort = require("../../utils/Sort");
 var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
+var _ActionTypes = require("../../store/actions/ActionTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,19 +28,51 @@ const FacetView = _ref => {
   let {
     classes,
     facet,
+    enableClearSection,
     onClearFacetSection,
     onClearSliderSection,
     CustomView,
     autoComplete,
     upload,
-    clearIcon
+    clearIcon,
+    filterState,
+    currentActionType = {},
+    enableFacetCollapse
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
+  const {
+    datafield
+  } = facet;
+  /**
+   * Collapse expanded facet or facets
+   * 1. on clear facet section
+   * 2. on clear all
+   * 3. on uncheck facet from DQB
+   */
+  (0, _react.useEffect)(() => {
+    if (enableFacetCollapse) {
+      const actionType = currentActionType[datafield];
+      // collapse facet if uncheck from DQB
+      if (actionType && actionType === _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED) {
+        const {
+          isFacetOrigin
+        } = currentActionType;
+        if (!isFacetOrigin) {
+          if (Object.keys(filterState[datafield] || {}).length === 0) {
+            setExpand(false);
+          }
+        }
+      }
+      if (actionType && actionType === _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION || currentActionType === _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS) {
+        setExpand(false);
+      }
+    }
+  }, [filterState]);
 
   /**
-  * 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);
@@ -49,10 +84,13 @@ const FacetView = _ref => {
   };
   const onClearSection = () => {
     setSortBy(null);
-    if (facet.type === _Types.InputTypes.SLIDER) {
-      onClearSliderSection(facet);
-    } else {
-      onClearFacetSection(facet);
+    const activeFilterItems = filterState[datafield];
+    if (activeFilterItems && Object.keys(activeFilterItems).length > 0) {
+      if (facet.type === _Types.InputTypes.SLIDER) {
+        onClearSliderSection(facet);
+      } else {
+        onClearFacetSection(facet);
+      }
     }
   };
   /**
@@ -76,14 +114,25 @@ const FacetView = _ref => {
     },
     id: facet.section
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
+    clearFacetSectionValues: onClearSection,
+    hasSelections: selectedItems.length > 0,
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
-  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, /*#__PURE__*/_react.default.createElement("div", {
+  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, !enableClearSection ? /*#__PURE__*/_react.default.createElement("div", {
+    id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
+    className: (0, _clsx.default)(classes.subSectionSummaryText, {
+      ["activeFacet".concat(facet.section)]: isActiveFacet
+    })
+  }, facet.label) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.subSectionSummaryTextWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
     id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
     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), selectedItems.length ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: onClearSection
+  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, null)) : null)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem

package/dist/components/facet/ReduxFacetView.js

@@ -14,11 +14,13 @@ const mapStateToProps = state => {
   var _state$localFind, _state$localFind2;
   return {
     filterState: state.statusReducer.filterState,
+    currentActionType: state.statusReducer.currentActionType,
     autoComplete: (state === null || state === void 0 ? void 0 : (_state$localFind = state.localFind) === null || _state$localFind === void 0 ? void 0 : _state$localFind.autocomplete) || [],
     upload: (state === null || state === void 0 ? void 0 : (_state$localFind2 = state.localFind) === null || _state$localFind2 === void 0 ? void 0 : _state$localFind2.upload) || []
   };
 };
 const mapDispatchToProps = dispatch => ({
+  onToggle: facet => dispatch((0, _Actions.toggleCheckBox)(facet)),
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
   },

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

@@ -10,14 +10,8 @@ var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@material-ui/icons");
 var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
+var _ActionTypes = require("../../../store/actions/ActionTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/jsx-wrap-multilines */
-/* eslint-disable react/jsx-indent */
-/* eslint-disable object-curly-newline */
-/* eslint-disable object-shorthand */
-/* eslint-disable react/jsx-one-expression-per-line */
 /* eslint-disable no-useless-escape */
 
 const CheckBoxView = _ref => {
@@ -44,9 +38,13 @@ const CheckBoxView = _ref => {
   const name = checkboxItem[field] || 'N/A';
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
-      datafield: datafield,
-      isChecked: !isChecked
+      name,
+      datafield,
+      isChecked: !isChecked,
+      actionType: {
+        [datafield]: _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED,
+        isFacetOrigin: true
+      }
     };
     onToggle(toggleCheckBoxItem);
   };

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 _clsx = _interopRequireDefault(require("clsx"));
 var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
@@ -63,9 +64,9 @@ const SliderView = _ref => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sliderRoot
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.minMaxInputs
+    className: (0, _clsx.default)(classes.minMaxInputs, 'minMaxInputs')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.minValue
+    className: (0, _clsx.default)(classes.minValue, 'min_input_box')
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.minInputLabel
   }, "Min:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
@@ -76,7 +77,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MIN,
     onInputChange: handleChangeCommittedSlider
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.maxValue
+    className: (0, _clsx.default)(classes.maxValue, 'max_input_box')
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.maxInputLabel
   }, "Max:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
@@ -87,7 +88,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MAX,
     onInputChange: handleChangeCommittedSlider
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.slider
+    className: (0, _clsx.default)(classes.slider, 'slider')
   }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
     disableSwap: true,
     getAriaValueText: valuetext,

package/dist/components/summary/AccordionSummaryView.js

@@ -11,6 +11,7 @@ var _AccordionSummaryStyle = _interopRequireDefault(require("./AccordionSummaryS
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Summary = (0, _core.withStyles)({
   root: {
+    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,

package/dist/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "onToggleStateUpdate", {
     return _SideBarReducer.onToggleStateUpdate;
   }
 });
+Object.defineProperty(exports, "sideBarActionTypes", {
+  enumerable: true,
+  get: function get() {
+    return _ActionTypes.sideBarActionTypes;
+  }
+});
 Object.defineProperty(exports, "sideBarReducerGenerator", {
   enumerable: true,
   get: function get() {
@@ -129,6 +135,7 @@ var _filter = require("./utils/filter");
 var _Types = require("./components/inputs/Types");
 var _SideBarReducer = require("./store/reducers/SideBarReducer");
 var _Actions = require("./store/actions/Actions");
+var _ActionTypes = require("./store/actions/ActionTypes");
 var _component = require("./generator/component");
 var _ReduxClearAllBtn = _interopRequireDefault(require("./components/reset/ReduxClearAllBtn"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/store/reducers/SideBarReducer.js

@@ -44,7 +44,10 @@ const onClearFacetSection = _ref2 => {
   if (updatedState[datafield]) {
     updatedState[datafield] = {};
   }
-  return updatedState;
+  return {
+    updatedState,
+    datafield
+  };
 };
 exports.onClearFacetSection = onClearFacetSection;
 const onClearSliderSection = _ref3 => {
@@ -87,31 +90,47 @@ function sideBarReducerGenerator() {
       switch (type) {
         case _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED:
           updateState = onToggleStateUpdate(_objectSpread(_objectSpread({}, state), payload));
+          const {
+            actionType = _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED
+          } = payload;
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: _objectSpread({}, updateState)
+            filterState: _objectSpread({}, updateState),
+            currentActionType: actionType
           });
         case _ActionTypes.sideBarActionTypes.ON_TOGGLE_SLIDER:
           updateState = updateSiderValue(_objectSpread(_objectSpread({}, state), payload));
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: _objectSpread({}, updateState)
+            filterState: _objectSpread({}, updateState),
+            currentActionType: _ActionTypes.sideBarActionTypes.ON_TOGGLE_SLIDER
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS:
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: {}
+            filterState: {},
+            currentActionType: _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION:
-          updateState = onClearFacetSection(_objectSpread(_objectSpread({}, payload), state));
+          const {
+            updatedState: updtState,
+            datafield
+          } = onClearFacetSection(_objectSpread(_objectSpread({}, payload), state));
+          updateState = updtState;
+          const currentActionType = {
+            [datafield]: _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION
+          };
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: _objectSpread({}, updateState)
+            filterState: _objectSpread({}, updateState),
+            currentActionType
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_SLIDER_SECTION:
           updateState = onClearSliderSection(_objectSpread(_objectSpread({}, payload), state));
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: _objectSpread({}, updateState)
+            filterState: _objectSpread({}, updateState),
+            currentActionType: _ActionTypes.sideBarActionTypes.CLEAR_SLIDER_SECTION
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_AND_SELECT_FACET_VALUE:
           return {
-            filterState: payload
+            filterState: payload,
+            currentActionType: _ActionTypes.sideBarActionTypes.CLEAR_AND_SELECT_FACET_VALUE
           };
         default:
           return state;

package/dist/utils/Sort.js

@@ -47,7 +47,7 @@ const sortBySection = _ref => {
     facetValues,
     sort_type,
     sortBy,
-    field,
+    field = 'group',
     count = 'subjects'
   } = _ref;
   const sortfacetValues = [...facetValues];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-icdc.12",
+  "version": "1.0.1-icdc.14",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -16,12 +16,12 @@
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
-    "@material-ui/core": ">= 4.12.4",
-    "@material-ui/icons": ">= 4.9.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.9.1",
     "clsx": "^1.2.1",
-    "react": ">= 17.0.2",
-    "react-dom": ">= 17.0.0",
-    "react-redux": ">= 7.2.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
   "license": "ISC"

package/src/FacetFilterView.js

@@ -14,31 +14,30 @@ const BentoFacetFilter = ({
   CustomFacetSection,
   CustomFacetView,
   clearIcon,
+  enableClearSection,
+  enableFacetCollapse,
 }) => {
   return (
     <>
-      {
-        sideBarSections.map((section, index) => (
-          <>
-            <Divider
-              variant="middle"
-              className={`divider${index}`}
-            />
-            <FacetSectionView
-              section={section}
-              CustomSection={CustomFacetSection}
-            >
-              {section.items.map((facet) => (
-                <FacetView
-                  facet={facet}
-                  CustomView={CustomFacetView}
-                  clearIcon={clearIcon}
-                />
-              ))}
-            </FacetSectionView>
-          </>
-        ))
-      }
+      {sideBarSections.map((section, index) => (
+        <>
+          <Divider variant="middle" className={`divider${index}`} />
+          <FacetSectionView
+            section={section}
+            CustomSection={CustomFacetSection}
+          >
+            {section.items.map((facet) => (
+              <FacetView
+                facet={facet}
+                CustomView={CustomFacetView}
+                enableClearSection={enableClearSection}
+                enableFacetCollapse={enableFacetCollapse}
+                clearIcon={clearIcon}
+              />
+            ))}
+          </FacetSectionView>
+        </>
+      ))}
     </>
   );
 };

package/src/components/facet/FacetView.js

@@ -1,37 +1,69 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Accordion,
-  List,
-  withStyles,
-  Icon,
+  Accordion, List, withStyles, Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import IconButton from '@material-ui/core/IconButton';
 import CustomAccordionSummary from '../summary/AccordionSummaryView';
 import { InputTypes } from '../inputs/Types';
 import styles from './FacetStyle';
 import FilterItems from '../inputs/FilterItems';
 import { sortType } from '../../utils/Sort';
 import clearIconLocal from './assets/clearIcon.svg';
+import { sideBarActionTypes } from '../../store/actions/ActionTypes';
 
 const FacetView = ({
   classes,
   facet,
+  enableClearSection,
   onClearFacetSection,
   onClearSliderSection,
   CustomView,
   autoComplete,
   upload,
   clearIcon,
+  filterState,
+  currentActionType = {},
+  enableFacetCollapse,
 }) => {
   const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
 
+  const { datafield } = facet;
   /**
-  * expand section incase of active local search
-  */
+   * Collapse expanded facet or facets
+   * 1. on clear facet section
+   * 2. on clear all
+   * 3. on uncheck facet from DQB
+   */
+  useEffect(() => {
+    if (enableFacetCollapse) {
+      const actionType = currentActionType[datafield];
+      // collapse facet if uncheck from DQB
+      if (actionType && actionType === sideBarActionTypes.FACET_VALUE_CHANGED) {
+        const { isFacetOrigin } = currentActionType;
+        if (!isFacetOrigin) {
+          if (Object.keys(filterState[datafield] || {}).length === 0) {
+            setExpand(false);
+          }
+        }
+      }
+      if ((actionType && actionType === sideBarActionTypes.CLEAR_FACET_SECTION)
+        || currentActionType === sideBarActionTypes.CLEAR_ALL_FILTERS) {
+        setExpand(false);
+      }
+    }
+  }, [filterState]);
+
+  /**
+   * 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]);
@@ -43,10 +75,13 @@ const FacetView = ({
 
   const onClearSection = () => {
     setSortBy(null);
-    if (facet.type === InputTypes.SLIDER) {
-      onClearSliderSection(facet);
-    } else {
-      onClearFacetSection(facet);
+    const activeFilterItems = filterState[datafield];
+    if (activeFilterItems && Object.keys(activeFilterItems).length > 0) {
+      if (facet.type === InputTypes.SLIDER) {
+        onClearSliderSection(facet);
+      } else {
+        onClearFacetSection(facet);
+      }
     }
   };
   /**
@@ -58,6 +93,7 @@ const FacetView = ({
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
   const limitCheckBoxCount = facet?.showCheckboxCount || 5;
+
   return (
     <>
       <Accordion
@@ -69,41 +105,56 @@ const FacetView = ({
         }}
         id={facet.section}
       >
-        { CustomView ? (
+        {CustomView ? (
           <CustomView
+            clearFacetSectionValues={onClearSection}
+            hasSelections={selectedItems.length > 0}
             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}`
-              }
-              className={clsx(classes.subSectionSummaryText, {
-                [`activeFacet${facet.section}`]: isActiveFacet,
-              })}
-            >
-              {facet.label}
-            </div>
+            {!enableClearSection ? (
+              <div
+                id={`filterGroup_ ${facet.datafield}
+                ${facet.label}`}
+                className={clsx(classes.subSectionSummaryText, {
+                  [`activeFacet${facet.section}`]: isActiveFacet,
+                })}
+              >
+                {facet.label}
+              </div>
+            ) : (
+              <div className={classes.subSectionSummaryTextWrapper}>
+                <div
+                  id={`filterGroup_ ${facet.datafield}
+                ${facet.label}`}
+                  className={clsx(classes.subSectionSummaryText, {
+                    [`activeFacet${facet.section}`]: isActiveFacet,
+                  })}
+                >
+                  {facet.label}
+                </div>
+                {selectedItems.length ? (
+                  <IconButton onClick={onClearSection}>
+                    <RefreshIcon />
+                  </IconButton>
+                ) : null}
+              </div>
+            )}
           </CustomAccordionSummary>
         )}
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
-          && (
+        {(facet.type === InputTypes.SLIDER || 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)
           && (

package/src/components/facet/ReduxFacetView.js

@@ -1,19 +1,29 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { clearFacetSection, clearSliderSection } from '../../store/actions/Actions';
+import {
+  clearFacetSection,
+  clearSliderSection,
+  toggleCheckBox,
+} from '../../store/actions/Actions';
 import FacetView from './FacetView';
 
-const ReduxFacetView = ((props) => <FacetView {...props} />);
+const ReduxFacetView = (props) => <FacetView {...props} />;
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,
+  currentActionType: state.statusReducer.currentActionType,
   autoComplete: state?.localFind?.autocomplete || [],
   upload: state?.localFind?.upload || [],
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  onClearFacetSection: (facet) => { dispatch(clearFacetSection(facet)); },
-  onClearSliderSection: (facet) => { dispatch(clearSliderSection(facet)); },
+  onToggle: (facet) => dispatch(toggleCheckBox(facet)),
+  onClearFacetSection: (facet) => {
+    dispatch(clearFacetSection(facet));
+  },
+  onClearSliderSection: (facet) => {
+    dispatch(clearSliderSection(facet));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxFacetView);

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

@@ -1,10 +1,3 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/jsx-wrap-multilines */
-/* eslint-disable react/jsx-indent */
-/* 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';
@@ -20,9 +13,11 @@ import {
 } from '@material-ui/core';
 import clsx from 'clsx';
 import {
-  CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
+  CheckBox as CheckBoxIcon,
+  CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
 import styles from './CheckboxStyle';
+import { sideBarActionTypes } from '../../../store/actions/ActionTypes';
 
 const CheckBoxView = ({
   classes,
@@ -50,9 +45,13 @@ const CheckBoxView = ({
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
-      datafield: datafield,
+      name,
+      datafield,
       isChecked: !isChecked,
+      actionType: {
+        [datafield]: sideBarActionTypes.FACET_VALUE_CHANGED,
+        isFacetOrigin: true,
+      },
     };
     onToggle(toggleCheckBoxItem);
   };
@@ -65,9 +64,7 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      <Typography className={classes.checkboxName}>
-        {name}
-      </Typography>
+      <Typography className={classes.checkboxName}>{name}</Typography>
     </Box>
   );
 
@@ -79,16 +76,18 @@ const CheckBoxView = ({
         alignItems="flex-start"
         onClick={handleToggle}
         classes={{ gutters: classes.listItemGutters }}
-        className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
+        className={clsx({
+          [`${checkedSection}Checked${indexType}`]: isChecked,
+        })}
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
-          icon={
+          icon={(
             <CheckBoxBlankIcon
               style={{ fontSize: 18 }}
               className={checkedSection}
             />
-          }
+          )}
           onClick={handleToggle}
           checked={isChecked}
           checkedIcon={(
@@ -103,11 +102,9 @@ const CheckBoxView = ({
           color="secondary"
           classes={{ root: classes.checkboxRoot }}
         />
-        { tooltip ? (
+        {tooltip ? (
           <Tooltip id={datafield} title={tooltip}>
-            <div className={datafield}>
-              {name}
-            </div>
+            <div className={datafield}>{name}</div>
           </Tooltip>
         ) : (
           <LabelComponent />

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { toggleCheckBox } from '../../../store/actions/Actions';
 import CheckboxView from './CheckboxView';
 
-const ReduxCheckbox = ((props) => <CheckboxView {...props} />);
+const ReduxCheckbox = (props) => <CheckboxView {...props} />;
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,

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

@@ -4,6 +4,7 @@
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
+import clsx from 'clsx';
 import styles from './SliderStyle';
 import { silderTypes } from '../Types';
 import InputMinMaxView from './InputMinMaxView';
@@ -53,8 +54,8 @@ const SliderView = ({
   return (
     <>
       <div className={classes.sliderRoot}>
-        <div className={classes.minMaxInputs}>
-          <div className={classes.minValue}>
+        <div className={clsx(classes.minMaxInputs, 'minMaxInputs')}>
+          <div className={clsx(classes.minValue, 'min_input_box')}>
             <Typography className={classes.minInputLabel}>
               Min:
             </Typography>
@@ -67,7 +68,7 @@ const SliderView = ({
               onInputChange={handleChangeCommittedSlider}
             />
           </div>
-          <div className={classes.maxValue}>
+          <div className={clsx(classes.maxValue, 'max_input_box')}>
             <Typography className={classes.maxInputLabel}>
               Max:
             </Typography>
@@ -81,7 +82,7 @@ const SliderView = ({
             />
           </div>
         </div>
-        <div className={classes.slider}>
+        <div className={clsx(classes.slider, 'slider')}>
           {/* Change to red if invalid range */}
           <Slider
             disableSwap

package/src/components/summary/AccordionSummaryView.js

@@ -1,15 +1,11 @@
 import React from 'react';
-import {
-  AccordionSummary,
-  withStyles,
-} from '@material-ui/core';
-import {
-  ExpandMore as ExpandMoreIcon,
-} from '@material-ui/icons';
+import { AccordionSummary, withStyles } from '@material-ui/core';
+import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
 import style from './AccordionSummaryStyle';
 
 const Summary = withStyles({
   root: {
+    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,
@@ -27,10 +23,7 @@ const Summary = withStyles({
   expanded: {},
 })(AccordionSummary);
 
-const CustomAccordionSummary = ({
-  children,
-  classes,
-}) => (
+const CustomAccordionSummary = ({ children, classes }) => (
   <Summary
     expandIcon={(
       <ExpandMoreIcon

package/src/index.js

@@ -23,6 +23,9 @@ export {
   clearSliderSection,
   clearAllAndSelectFacet,
 } from './store/actions/Actions';
+export {
+  sideBarActionTypes,
+} from './store/actions/ActionTypes';
 export {
   generateFacetSectionView,
 } from './generator/component';

package/src/store/reducers/SideBarReducer.js

@@ -30,7 +30,7 @@ export const onClearFacetSection = ({
   if (updatedState[datafield]) {
     updatedState[datafield] = {};
   }
-  return updatedState;
+  return { updatedState, datafield };
 };
 
 export const onClearSliderSection = ({
@@ -64,36 +64,48 @@ export function sideBarReducerGenerator() {
       switch (type) {
         case sideBarActionTypes.FACET_VALUE_CHANGED:
           updateState = onToggleStateUpdate({ ...state, ...payload });
+          const { actionType = sideBarActionTypes.FACET_VALUE_CHANGED } = payload;
           return {
             ...state,
             filterState: { ...updateState },
+            currentActionType: actionType,
           };
         case sideBarActionTypes.ON_TOGGLE_SLIDER:
           updateState = updateSiderValue({ ...state, ...payload });
           return {
             ...state,
             filterState: { ...updateState },
+            currentActionType: sideBarActionTypes.ON_TOGGLE_SLIDER,
           };
         case sideBarActionTypes.CLEAR_ALL_FILTERS:
           return {
             ...state,
             filterState: {},
+            currentActionType: sideBarActionTypes.CLEAR_ALL_FILTERS,
           };
         case sideBarActionTypes.CLEAR_FACET_SECTION:
-          updateState = onClearFacetSection({ ...payload, ...state });
+          const {
+            updatedState: updtState,
+            datafield,
+          } = onClearFacetSection({ ...payload, ...state });
+          updateState = updtState;
+          const currentActionType = { [datafield]: sideBarActionTypes.CLEAR_FACET_SECTION };
           return {
             ...state,
             filterState: { ...updateState },
+            currentActionType,
           };
         case sideBarActionTypes.CLEAR_SLIDER_SECTION:
           updateState = onClearSliderSection({ ...payload, ...state });
           return {
             ...state,
             filterState: { ...updateState },
+            currentActionType: sideBarActionTypes.CLEAR_SLIDER_SECTION,
           };
         case sideBarActionTypes.CLEAR_AND_SELECT_FACET_VALUE:
           return {
             filterState: payload,
+            currentActionType: sideBarActionTypes.CLEAR_AND_SELECT_FACET_VALUE,
           };
         default:
           return state;

package/src/utils/Sort.js

@@ -41,7 +41,7 @@ export const sortBySection = ({
   facetValues,
   sort_type,
   sortBy,
-  field,
+  field = 'group',
   count = 'subjects',
 }) => {
   const sortfacetValues = [...facetValues];