@bento-core/facet-filter 1.0.1-ccdihub.3 → 1.0.1-ccdihub.31

package/dist/FacetFilterController.js

@@ -26,11 +26,18 @@ const FacetFilterController = props => {
    * 2. subject state
    */
   const {
-    filterState,
+    activeFilters,
     data,
     facetsConfig,
     facetSectionConfig
   } = props;
+  const filterState = {};
+  // console.log(activeFilters);
+  for (const [key, value] of Object.entries(activeFilters)) {
+    if (key !== 'participant_ids') {
+      filterState[key] = value;
+    }
+  }
   const updateFacetState = filterSections => {
     const updateSections = [...filterSections];
     if (!_lodash.default.isEmpty(filterState)) {
@@ -38,7 +45,8 @@ 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[item.name] ? value[item.name] : false;
+              item.isChecked = value.indexOf(item.name) > -1;
             });
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
@@ -112,11 +120,30 @@ 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;
           }
           /**
@@ -150,8 +177,5 @@ const FacetFilterController = props => {
     sideBarSections: facetSections
   })));
 };
-const mapStateToProps = state => ({
-  filterState: state.statusReducer.filterState
-});
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(FacetFilterController);
+var _default = (0, _reactRedux.connect)(null, null)(FacetFilterController);
 exports.default = _default;

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 */
@@ -18,7 +19,8 @@ const BentoFacetFilter = _ref => {
   let {
     sideBarSections,
     CustomFacetSection,
-    CustomFacetView
+    CustomFacetView,
+    queryParams
   } = _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",
@@ -26,14 +28,24 @@ 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,
+        queryParams: queryParams,
+        CustomView: CustomFacetView
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_ReduxFacetView.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,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
+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,
+    queryParams
+  } = _ref;
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
+    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,
+    sx: theme => ({
+      position: 'absolute',
+      right: 8,
+      top: 8,
+      color: theme.palette.grey[500]
+    })
+  }, /*#__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: "e.g. A1CF, CREB3L1, PIK3CA",
+    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,
+    queryParams: queryParams
+  }))));
+};
+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,16 +34,16 @@ var _default = () => ({
   sortGroup: {
     paddingTop: '10px',
     marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    marginLeft: '-5px'
+    marginLeft: '-5px',
+    borderTop: 'none'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
     marginRight: '12px',
-    marginLeft: '16px'
+    marginLeft: '24px'
   },
   sortGroupItem: {
     cursor: 'pointer',
@@ -77,6 +79,51 @@ var _default = () => ({
     cursor: 'pointer',
     fontSize: '10px',
     width: '100%'
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  searchBox: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '24px',
+    marginTop: '12px',
+    borderRadius: '8px',
+    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: '24px',
+    marginTop: '12px',
+    borderRadius: '8px',
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
+  expandedDisplayButton: {
+    background: '#4D889E',
+    color: 'white',
+    width: '222px',
+    height: '30px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    borderRadius: '8px',
+    fontSize: '11px'
+  },
+  clearTextButton: {
+    padding: '0px',
+    height: '20px',
+    position: 'absolute',
+    right: '14px',
+    top: '14px'
   }
 });
 exports.default = _default;

package/dist/components/facet/FacetView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
@@ -28,25 +30,35 @@ const FacetView = _ref => {
     onClearFacetSection,
     onClearSliderSection,
     CustomView,
-    autoComplete,
-    upload
+    queryParams
   } = _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);
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
 
   /**
   * expand section incase of active local search
   */
-  (0, _react.useEffect)(() => {
-    if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
-      setExpand(true);
-    }
-  }, [autoComplete, upload]);
+  // useEffect(() => {
+  //   if ((autoComplete && autoComplete.length > 0)
+  //     || (upload && upload.length > 0)) {
+  //     setExpand(true);
+  //   }
+  // }, [autoComplete, upload]);
+
   const [sortBy, setSortBy] = (0, _react.useState)(null);
   const onSortFacet = type => {
     setSortBy(type);
   };
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
     setSortBy(null);
     if (facet.type === _Types.InputTypes.SLIDER) {
       onClearSliderSection(facet);
@@ -116,11 +128,13 @@ const FacetView = _ref => {
     }
   }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
+    queryParams: queryParams,
     sortBy: sortBy
   })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__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
+    facet: displayFacet,
+    queryParams: queryParams
   }))), !expand && selectedItems.length > limitCheckBoxCount && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.showMore,
     onClick: onExpandFacet

package/dist/components/facet/ModalStyle.js

@@ -0,0 +1,121 @@
+"use strict";
+
+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 = () => ({
+  header: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '55px'
+  },
+  closeButton: {
+    marginLeft: '769px',
+    position: 'absolute'
+  },
+  resetIcon: {
+    marginLeft: '10px',
+    minWidth: '5px',
+    width: '5px',
+    borderRadius: '9px',
+    height: '30px'
+  },
+  modalTitle: {
+    fontFamily: 'Poppins',
+    fontSize: '19px',
+    fontWeight: '400',
+    lineHeight: '21px',
+    letterSpacing: '0.02em',
+    textAlign: 'center',
+    color: '#000000'
+  },
+  modalBody: {
+    position: 'absolute',
+    top: '5%',
+    left: '25%',
+    width: '836px',
+    height: '671px',
+    background: '#FFFFFF',
+    border: '1px solid #505050',
+    borderRadius: '40px',
+    overflow: 'hidden'
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderTop: '3px solid #939393',
+    borderBottom: '3px solid #939393',
+    height: '51px'
+  },
+  searchInputbox: {
+    marginRight: '10px',
+    fontFamily: 'Poppins',
+    fontSize: '18px',
+    fontWeight: '600',
+    lineHeight: '27px',
+    letterSpacing: '-0.02em',
+    textAlign: 'left',
+    color: '#7A437A'
+  },
+  searchBox: {
+    fontSize: '12px',
+    fontWeight: '400',
+    fontFamily: 'Nunito',
+    width: '437px',
+    height: '28px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    borderRadius: '8px',
+    background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
+    border: '1.5px solid #646464'
+  },
+  highlight: {
+    color: '#b2c6d6'
+  },
+  sortGroup: {
+    paddingTop: '10px',
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    marginLeft: '-5px'
+  },
+  sortGroupIcon: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '12px',
+    marginLeft: '24px'
+  },
+  sortGroupItem: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  NonSortGroup: {
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    paddingLeft: '10px'
+  },
+  NonSortGroupItem: {
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  sortGroupItemCounts: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
+  },
+  itemContainer: {}
+});
+exports.default = _default;

package/dist/components/facet/ReduxFacetModal.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Actions = require("../../store/actions/Actions");
+var _FacetModal = _interopRequireDefault(require("./FacetModal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import FacetView from './FacetView';
+
+const ReduxFacetModal = props => /*#__PURE__*/_react.default.createElement(_FacetModal.default, props);
+const mapStateToProps = (state, ownProps) => ({
+  searchText: state.statusReducer.searchState[ownProps.facet.datafield] || '',
+  sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null
+});
+const mapDispatchToProps = dispatch => ({
+  onClearFacetSection: facet => {
+    dispatch((0, _Actions.clearFacetSection)(facet));
+  },
+  onSearchTextChange: (datafield, searchText) => {
+    dispatch((0, _Actions.searchTextChange)(datafield, searchText));
+  },
+  onSortChange: (datafield, sortBy) => {
+    dispatch((0, _Actions.sortChange)(datafield, sortBy));
+  }
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetModal);
+exports.default = _default;

package/dist/components/facet/ReduxFacetView.js

@@ -10,14 +10,12 @@ var _Actions = require("../../store/actions/Actions");
 var _FacetView = _interopRequireDefault(require("./FacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxFacetView = props => /*#__PURE__*/_react.default.createElement(_FacetView.default, props);
-const mapStateToProps = state => {
-  var _state$localFind, _state$localFind2;
-  return {
-    filterState: state.statusReducer.filterState,
-    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 mapStateToProps = (state) => ({
+//   autoComplete: state?.localFind?.autocomplete || [],
+//   upload: state?.localFind?.upload || [],
+// });
+
 const mapDispatchToProps = dispatch => ({
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
@@ -26,5 +24,5 @@ const mapDispatchToProps = dispatch => ({
     dispatch((0, _Actions.clearSliderSection)(facet));
   }
 });
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxFacetView);
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ReduxFacetView);
 exports.default = _default;

package/dist/components/facet/ReduxSearchFacetView.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Actions = require("../../store/actions/Actions");
+var _SearchFacetView = _interopRequireDefault(require("./SearchFacetView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import FacetView from './FacetView';
+
+const ReduxSearchFacetView = props => /*#__PURE__*/_react.default.createElement(_SearchFacetView.default, props);
+const mapStateToProps = (state, ownProps) => {
+  var _state$statusReducer;
+  return {
+    searchText: ((_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.searchState[ownProps.facet.datafield]) || '',
+    sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null
+  };
+};
+const mapDispatchToProps = dispatch => ({
+  onClearFacetSection: facet => {
+    dispatch((0, _Actions.clearFacetSection)(facet));
+  },
+  onClearSliderSection: facet => {
+    dispatch((0, _Actions.clearSliderSection)(facet));
+  },
+  onSearchTextChange: (datafield, searchText) => {
+    dispatch((0, _Actions.searchTextChange)(datafield, searchText));
+  },
+  onSortChange: (datafield, sortBy) => {
+    dispatch((0, _Actions.sortChange)(datafield, sortBy));
+  }
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxSearchFacetView);
+exports.default = _default;