@bento-core/facet-filter 1.0.1-c3dc.0 → 1.0.1-c3dc.10

package/dist/FacetFilterController.js

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

package/dist/FacetFilterStyle.js

@@ -25,7 +25,7 @@ var _default = () => ({
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   }
 });

package/dist/FacetFilterView.js

@@ -10,6 +10,7 @@ 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"));
+var _ReduxSearchFacetView = _interopRequireDefault(require("./components/facet/ReduxSearchFacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
@@ -26,14 +27,22 @@ const BentoFacetFilter = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_FacetSectionView.default, {
     section: section,
     CustomSection: CustomFacetSection
-  }, 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
-  }))))))));
+  }, section.items.map(facet => {
+    if (facet.search) {
+      return /*#__PURE__*/_react.default.createElement(_ReduxSearchFacetView.default, {
+        facet: facet,
+        CustomView: CustomFacetView
+      });
+    }
+    return /*#__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/NewFacetFilterController.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Types = require("./components/inputs/Types");
+var _NewFacetFilterView = _interopRequireDefault(require("./NewFacetFilterView"));
+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); }
+const NewFacetFilterController = props => {
+  /**
+   * update checkbox state
+   * 1. checkbox state
+   * 2. subject state
+   */
+  const {
+    activeFilters,
+    data,
+    facetsConfig,
+    facetSectionConfig,
+    selectedSection,
+    unknownAgesState,
+    searchFacetClasses
+  } = props;
+
+  // console.log(activeFilters);
+  const filterState = Object.entries(activeFilters).reduce((acc, _ref) => {
+    let [key, value] = _ref;
+    if (key !== 'participant_ids') {
+      return _objectSpread(_objectSpread({}, acc), {}, {
+        [key]: value
+      });
+    }
+    return acc;
+  }, {});
+  const updateFacetState = filterSections => {
+    if (!_lodash.default.isEmpty(filterState)) {
+      return filterSections.map(sideBar => {
+        const filterValue = filterState[sideBar.datafield];
+        if (!filterValue) {
+          return sideBar;
+        }
+        if (sideBar.type === _Types.InputTypes.CHECKBOX) {
+          return _objectSpread(_objectSpread({}, sideBar), {}, {
+            facetValues: sideBar.facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+              isChecked: filterValue.indexOf(item.name) > -1
+            }))
+          });
+        }
+        if (sideBar.type === _Types.InputTypes.SLIDER) {
+          return _objectSpread(_objectSpread({}, sideBar), {}, {
+            facetValues: filterValue
+          });
+        }
+        return sideBar;
+      });
+    }
+    return filterSections.map(sideBar => {
+      if (sideBar.type === _Types.InputTypes.CHECKBOX) {
+        return _objectSpread(_objectSpread({}, sideBar), {}, {
+          facetValues: sideBar.facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+            isChecked: false
+          }))
+        });
+      }
+      /**
+       * set default value for slider - on clear all filter
+       */
+      if (sideBar.type === _Types.InputTypes.SLIDER) {
+        const {
+          minLowerBound,
+          maxUpperBound
+        } = sideBar;
+        return _objectSpread(_objectSpread({}, sideBar), {}, {
+          facetValues: [minLowerBound, maxUpperBound]
+        });
+      }
+      return sideBar;
+    });
+  };
+  const arrangeBySections = arr => {
+    const sideBar = {};
+    arr.forEach(_ref2 => {
+      let {
+          section
+        } = _ref2,
+        item = _objectWithoutProperties(_ref2, _excluded);
+      const {
+        isExpanded
+      } = facetSectionConfig[section];
+      if (!sideBar[section]) {
+        sideBar[section] = {
+          name: section,
+          sectionName: section,
+          expandSection: isExpanded !== undefined && typeof isExpanded === 'boolean' ? isExpanded : true,
+          items: []
+        };
+      }
+      sideBar[section] = _objectSpread(_objectSpread({}, sideBar[section]), {}, {
+        items: [...sideBar[section].items, _objectSpread({
+          section
+        }, item)]
+      });
+    });
+    return Object.values(sideBar);
+  };
+
+  /**
+   * Construct filter object
+   * 1. add facet values to facets
+   * 2. add 'name' key to each facet value
+   */
+  const addFacetValues = facets => {
+    if (!facets) {
+      return [];
+    }
+    return facets.map(facet => {
+      const updateFacet = _objectSpread(_objectSpread({}, facet), {}, {
+        facetValues: []
+      });
+      const {
+        field,
+        ApiLowerBoundName,
+        ApiUpperBoundName,
+        apiForFiltering
+      } = updateFacet;
+      if (!data[apiForFiltering]) {
+        return updateFacet;
+      }
+      if (Array.isArray(data[apiForFiltering])) {
+        const validValues = [];
+        const updateField = data[apiForFiltering].map(item => {
+          const addField = _objectSpread(_objectSpread({}, item), {}, {
+            name: item[field]
+          });
+          validValues.push(addField.name);
+          return addField;
+        });
+        /**
+         * Check if there are orphan filter values and add them to the facet values
+         */
+        let finalUpdateField = updateField;
+        if (filterState !== undefined) {
+          const facetFilter = filterState[facet.datafield];
+          if (facetFilter) {
+            const orphanValues = facetFilter.filter(item => validValues.indexOf(item) === -1).map(item => ({
+              group: item,
+              name: item,
+              subjects: 0
+            }));
+            finalUpdateField = [...updateField, ...orphanValues];
+          }
+        }
+        return _objectSpread(_objectSpread({}, updateFacet), {}, {
+          facetValues: finalUpdateField
+        });
+      }
+
+      /**
+      * add object to facet values
+      */
+      if (facet.type === _Types.InputTypes.SLIDER) {
+        const lowerBound = data[apiForFiltering][ApiLowerBoundName];
+        const upperBound = data[apiForFiltering][ApiUpperBoundName];
+        const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+        return _objectSpread(_objectSpread({}, updateFacet), {}, {
+          minLowerBound: lowerBound,
+          maxUpperBound: upperBound,
+          unknownAges,
+          facetValues: [lowerBound, upperBound],
+          style: facet.style
+        });
+      }
+      return updateFacet;
+    });
+  };
+
+  /**
+   * Generate facet sections state
+   *
+   */
+  // const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter(facet => facet.show);
+  const facetStates = addFacetValues(displayFacets);
+  const updateState = updateFacetState(facetStates);
+  const facetSections = arrangeBySections(updateState);
+  const facetSection = facetSections[selectedSection];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_NewFacetFilterView.default, _extends({}, props, {
+    facetSection: facetSection,
+    searchFacetClasses: searchFacetClasses
+  })));
+};
+const mapStateToProps = state => {
+  var _state$statusReducer;
+  return {
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.unknownAgesState) || {}
+  };
+};
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(NewFacetFilterController);
+exports.default = _default;

package/dist/NewFacetFilterView.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
+var _ReduxNewFacetView = _interopRequireDefault(require("./components/facet/ReduxNewFacetView"));
+var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
+var _ReduxNewSearchFacetView = _interopRequireDefault(require("./components/facet/ReduxNewSearchFacetView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable arrow-body-style */
+/* eslint-disable padded-blocks */
+
+const BentoFacetFilter = _ref => {
+  let {
+    facetSection,
+    CustomFacetSection,
+    CustomFacetView,
+    queryParams,
+    searchFacetClasses
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, CustomFacetSection && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CustomFacetSection, {
+    section: facetSection,
+    expanded: true
+  })), facetSection.items.map(facet => {
+    if (facet.search) {
+      return /*#__PURE__*/_react.default.createElement(_ReduxNewSearchFacetView.default, {
+        facet: facet,
+        queryParams: queryParams,
+        CustomView: CustomFacetView,
+        classes: searchFacetClasses
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_ReduxNewFacetView.default, {
+      facet: facet,
+      queryParams: queryParams,
+      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/FacetModal.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _styles = require("@material-ui/core/styles");
+var _ModalStyle = _interopRequireDefault(require("./ModalStyle"));
+var _ModalFilterItems = _interopRequireDefault(require("../inputs/ModalFilterItems"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const resetIcon = {
+  src: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Clear-icon.svg',
+  alt: 'Reset icon',
+  size: '12 px'
+};
+const ModalView = _ref => {
+  let {
+    classes,
+    facet,
+    sortBy,
+    searchText,
+    open,
+    onClose,
+    onClearFacetSection,
+    onSearchTextChange,
+    onSortChange
+  } = _ref;
+  const onClearSection = () => {
+    onSortChange(null);
+    onClearFacetSection(facet);
+  };
+  return /*#__PURE__*/_react.default.createElement(_core.Modal, {
+    open: open,
+    onClose: onClose,
+    "aria-labelledby": "".concat(facet.datafield, "-search-modal")
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    className: classes.modalBody
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.header
+  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    id: "modal-modal-title",
+    className: classes.modalTitle
+  }, "".concat(facet.label, " Facet Search")), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    "aria-label": "close",
+    onClick: onClose,
+    className: classes.closeButton
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+    fontSize: "small"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.searchContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.searchInputbox
+  }, "Search ".concat(facet.label)), /*#__PURE__*/_react.default.createElement("input", {
+    className: classes.searchBox,
+    value: searchText,
+    type: "text",
+    placeholder: facet.searchPlaceholder ? facet.searchPlaceholder : 'e.g. Sarcoma, Neoplasm',
+    onChange: e => onSearchTextChange(facet.datafield, e.target.value)
+  }), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    variant: "outlined",
+    onClick: () => onSearchTextChange(facet.datafield, ''),
+    className: classes.resetIcon
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: resetIcon.src,
+    height: resetIcon.size,
+    width: resetIcon.size,
+    alt: resetIcon.alt
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.itemContainer
+  }, /*#__PURE__*/_react.default.createElement(_ModalFilterItems.default, {
+    searchText: searchText,
+    facet: facet,
+    sortBy: sortBy,
+    onClearSection: onClearSection,
+    onSortChange: onSortChange
+  }))));
+};
+var _default = (0, _styles.withStyles)(_ModalStyle.default)(ModalView);
+exports.default = _default;

package/dist/components/facet/FacetStyle.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _Search_Icon = _interopRequireDefault(require("./assets/Search_Icon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = () => ({
   expansionPanelDetailsRoot: {
     display: 'block'
@@ -32,42 +34,57 @@ var _default = () => ({
   sortGroup: {
     paddingTop: '10px',
     marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-5px'
+    marginLeft: '-4px',
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: '8px'
+  },
+  sortGroupSlider: {
+    marginBottom: '5px',
+    textAlign: 'left',
+    marginLeft: '-4px',
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: '8px'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '12px',
-    marginLeft: '24px'
+    marginLeft: '24px',
+    display: 'flex',
+    alignItems: 'center'
   },
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    marginRight: '32px'
+    fontSize: '11px'
+    // marginRight: '32px',
   },
+
   NonSortGroup: {
-    marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
     paddingLeft: '10px'
   },
   NonSortGroupItem: {
     fontFamily: 'Nunito',
-    fontSize: '10px',
+    fontSize: '11px',
     marginRight: '32px'
   },
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px'
+    fontSize: '11px',
+    marginRight: '19px',
+    marginLeft: 'auto'
+    // marginTop: '5px',
+    // float: 'right',
   },
+
   highlight: {
     color: '#b2c6d6'
   },
@@ -75,8 +92,55 @@ var _default = () => ({
     textAlign: 'right',
     paddingRight: '5px',
     cursor: 'pointer',
-    fontSize: '10px',
+    fontSize: '11px',
     width: '100%'
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  searchBox: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '30px',
+    marginTop: '12px',
+    borderRadius: '5px',
+    background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
+  searchBoxWithText: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '30px',
+    marginTop: '12px',
+    borderRadius: '5px',
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
+  expandedDisplayButton: {
+    backgroundColor: '#4D889E !important',
+    color: 'white',
+    width: 'calc(100% - 26px)',
+    height: '30px',
+    marginBottom: '5px',
+    marginLeft: '6px',
+    borderRadius: '5px',
+    fontSize: '12px',
+    fontWeight: '600',
+    top: '8px'
+  },
+  clearTextButton: {
+    padding: '0px',
+    height: '20px',
+    position: 'absolute',
+    right: '14px',
+    top: '14px'
   }
 });
 exports.default = _default;

package/dist/components/facet/FacetView.js

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