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

package/dist/components/facet/FacetStyle.js

@@ -89,9 +89,9 @@ var _default = () => ({
     fontSize: '11px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
-    height: '24px',
+    height: '30px',
     marginTop: '12px',
-    borderRadius: '8px',
+    borderRadius: '5px',
     background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
     marginLeft: '6px',
     border: '1px solid',
@@ -101,22 +101,24 @@ var _default = () => ({
     fontSize: '11px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
-    height: '24px',
+    height: '30px',
     marginTop: '12px',
-    borderRadius: '8px',
+    borderRadius: '5px',
     marginLeft: '6px',
     border: '1px solid',
     padding: '5px'
   },
   expandedDisplayButton: {
-    background: '#4D889E',
+    backgroundColor: '#4D889E !important',
     color: 'white',
-    width: '222px',
+    width: 'calc(100% - 26px)',
     height: '30px',
-    marginTop: '5px',
     marginBottom: '5px',
-    borderRadius: '8px',
-    fontSize: '11px'
+    marginLeft: '6px',
+    borderRadius: '5px',
+    fontSize: '12px',
+    fontWeight: '600',
+    top: '8px'
   },
   clearTextButton: {
     padding: '0px',

package/dist/components/facet/SearchFacetView.js

@@ -17,6 +17,8 @@ var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
 var _SearchFilterItems = _interopRequireDefault(require("../inputs/SearchFilterItems"));
 var _Sort = require("../../utils/Sort");
 var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
+var _ReduxSearchCheckbox = _interopRequireDefault(require("../inputs/checkbox/ReduxSearchCheckbox"));
+var _ReduxFacetModal = _interopRequireDefault(require("./ReduxFacetModal"));
 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,6 +27,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 searchItems = (items, searchText) => {
+  let matchedItems = [];
+  const keyList = searchText.toUpperCase().split(',').filter(item => item.trim() !== '');
+  if (keyList.length === 0) {
+    matchedItems = items;
+  } else {
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      for (let j = 0; j < keyList.length; j += 1) {
+        const key = keyList[j].trim();
+        if (key === '' || item.name.toUpperCase().includes(key)) {
+          matchedItems.push(item);
+          break;
+        }
+      }
+    }
+  }
+  return matchedItems;
+};
 const SearchFacetView = _ref => {
   let {
     classes,
@@ -38,6 +59,7 @@ const SearchFacetView = _ref => {
     queryParams
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+  const [open, setOpen] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
   const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   const navigate = (0, _reactRouterDom.useNavigate)();
@@ -58,14 +80,34 @@ const SearchFacetView = _ref => {
    */
   const {
     type,
-    facetValues
+    facetValues,
+    datafield,
+    section
   } = facet;
   const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
   const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
+  const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
+    sortBy
+  }));
+  const checkedItems = sortFilters.filter(item => item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxSearchCheckbox.default, {
+    checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+      index,
+      section
+    }),
+    datafield: datafield,
+    facet: facet,
+    queryParams: queryParams
+  }));
+  const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
+    facet: facet,
+    queryParams: queryParams,
+    open: open,
+    onClose: () => setOpen(false)
+  }), /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     square: true,
     expanded: expand,
     onChange: onExpandFacet,
@@ -85,7 +127,7 @@ const SearchFacetView = _ref => {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem
-  }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.searchContainer
   }, /*#__PURE__*/_react.default.createElement("input", {
     className: searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox,
@@ -105,7 +147,13 @@ const SearchFacetView = _ref => {
     })
   }, /*#__PURE__*/_react.default.createElement(_Close.default, {
     fontSize: "small"
-  }))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.searchContainer
+  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    variant: "text",
+    className: classes.expandedDisplayButton,
+    onClick: () => setOpen(!open)
+  }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")")))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon

package/dist/components/inputs/FilterItemStyle.js

@@ -63,17 +63,6 @@ var _default = () => ({
     display: 'flex',
     justifyContent: 'center',
     height: '54px'
-  },
-  expandedDisplayButton: {
-    backgroundColor: '#4D889E !important',
-    color: 'white',
-    width: '222px',
-    height: '24px',
-    marginTop: '5px',
-    marginBottom: '5px',
-    borderRadius: '8px',
-    fontSize: '11px',
-    top: '10px'
   }
 });
 exports.default = _default;

package/dist/components/inputs/SearchFilterItems.js

@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
 var _ReduxSearchCheckbox = _interopRequireDefault(require("./checkbox/ReduxSearchCheckbox"));
 var _Sort = require("../../utils/Sort");
 var _FilterItemStyle = _interopRequireDefault(require("./FilterItemStyle"));
-var _ReduxFacetModal = _interopRequireDefault(require("../facet/ReduxFacetModal"));
 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; }
@@ -51,7 +50,6 @@ const SearchFilterItems = _ref => {
   } = facet;
   const initialItemSize = 20;
   const [displayCount, setDisplayCount] = (0, _react.useState)(initialItemSize);
-  const [open, setOpen] = (0, _react.useState)(false);
   const scrollableRef = (0, _react.useRef)(null);
   const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
     sortBy
@@ -92,22 +90,11 @@ const SearchFilterItems = _ref => {
       }
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
-    facet: facet,
-    queryParams: queryParams,
-    open: open,
-    onClose: () => setOpen(false)
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
     ref: scrollableRef,
     className: classes.itemsContainer,
     onScroll: handleScroll
-  }, uncheckedItems)), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.searchContainer
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    variant: "text",
-    className: classes.expandedDisplayButton,
-    onClick: () => setOpen(!open)
-  }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")"))));
+  }, uncheckedItems)));
 };
 var _default = (0, _core.withStyles)(_FilterItemStyle.default)(SearchFilterItems);
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.31",
+  "version": "1.0.1-ccdihub.32",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/components/facet/FacetStyle.js

@@ -83,9 +83,9 @@ export default () => ({
     fontSize: '11px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
-    height: '24px',
+    height: '30px',
     marginTop: '12px',
-    borderRadius: '8px',
+    borderRadius: '5px',
     background: `url(${SearchIcon}) right 5px center no-repeat`,
     marginLeft: '6px',
     border: '1px solid',
@@ -95,22 +95,24 @@ export default () => ({
     fontSize: '11px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
-    height: '24px',
+    height: '30px',
     marginTop: '12px',
-    borderRadius: '8px',
+    borderRadius: '5px',
     marginLeft: '6px',
     border: '1px solid',
     padding: '5px',
   },
   expandedDisplayButton: {
-    background: '#4D889E',
+    backgroundColor: '#4D889E !important',
     color: 'white',
-    width: '222px',
+    width: 'calc(100% - 26px)',
     height: '30px',
-    marginTop: '5px',
     marginBottom: '5px',
-    borderRadius: '8px',
-    fontSize: '11px',
+    marginLeft: '6px',
+    borderRadius: '5px',
+    fontSize: '12px',
+    fontWeight: '600',
+    top: '8px',
   },
   clearTextButton: {
     padding: '0px',

package/src/components/facet/SearchFacetView.js

@@ -10,6 +10,7 @@ import {
   withStyles,
   Icon,
   IconButton,
+  Button,
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import clsx from 'clsx';
@@ -18,8 +19,30 @@ import { InputTypes } from '../inputs/Types';
 import styles from './FacetStyle';
 import FilterItems from '../inputs/FilterItems';
 import SearchFilterItems from '../inputs/SearchFilterItems';
-import { sortType } from '../../utils/Sort';
+import { sortType, sortBySection } from '../../utils/Sort';
 import clearIcon from './assets/clearIcon.svg';
+import ReduxSearchCheckbox from '../inputs/checkbox/ReduxSearchCheckbox';
+import ReduxFacetModal from './ReduxFacetModal';
+
+const searchItems = (items, searchText) => {
+  let matchedItems = [];
+  const keyList = searchText.toUpperCase().split(',').filter((item) => item.trim() !== '');
+  if (keyList.length === 0) {
+    matchedItems = items;
+  } else {
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      for (let j = 0; j < keyList.length; j += 1) {
+        const key = keyList[j].trim();
+        if (key === '' || item.name.toUpperCase().includes(key)) {
+          matchedItems.push(item);
+          break;
+        }
+      }
+    }
+  }
+  return matchedItems;
+};
 
 const SearchFacetView = ({
   classes,
@@ -33,6 +56,7 @@ const SearchFacetView = ({
   queryParams,
 }) => {
   const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+  const [open, setOpen] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
   const query = new URLSearchParams(useLocation().search);
   const navigate = useNavigate();
@@ -50,14 +74,38 @@ const SearchFacetView = ({
   /**
    * display checked items on facet collapse
    */
-  const { type, facetValues } = facet;
+  const {
+    type, facetValues, datafield, section,
+  } = facet;
   const selectedItems = facetValues && facetValues.filter((item) => item.isChecked);
   const displayFacet = { ...facet };
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
   const limitCheckBoxCount = facet?.showCheckboxCount || 5;
+
+  const sortFilters = sortBySection({ ...facet, sortBy });
+
+  const checkedItems = sortFilters.filter((item) => item.isChecked)
+    .map((item, index) => (
+      <ReduxSearchCheckbox
+        checkboxItem={{ ...item, index, section }}
+        datafield={datafield}
+        facet={facet}
+        queryParams={queryParams}
+      />
+    ));
+
+  const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
+    searchText);
+
   return (
     <>
+      <ReduxFacetModal
+        facet={facet}
+        queryParams={queryParams}
+        open={open}
+        onClose={() => setOpen(false)}
+      />
       <Accordion
         square
         expanded={expand}
@@ -67,12 +115,12 @@ const SearchFacetView = ({
         }}
         id={facet.section}
       >
-        { CustomView ? (
+        {CustomView ? (
           <CustomView
             facet={facet}
             facetClasses={
-            isActiveFacet ? `activeFacet${facet.section}`
-              : `inactiveFacet${facet.section}`
+              isActiveFacet ? `activeFacet${facet.section}`
+                : `inactiveFacet${facet.section}`
             }
           />
         ) : (
@@ -93,99 +141,106 @@ const SearchFacetView = ({
         {
           (facetValues.length === 0)
           && (
-          <div className={classes.NonSortGroup}>
-            <span
-              className={classes.NonSortGroupItem}
-            >
-              No data for this field
-            </span>
-          </div>
+            <div className={classes.NonSortGroup}>
+              <span
+                className={classes.NonSortGroupItem}
+              >
+                No data for this field
+              </span>
+            </div>
           )
         }
         {
           (facetValues.length > 0)
           && (
-            <div className={classes.searchContainer}>
-              <input
-                className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
-                value={searchText}
-                type="text"
-                placeholder="e.g. Sarcoma, Neoplasm"
-                onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
-              />
-              {
-                searchText
-                && searchText.trim() !== ''
-                && (
-                <IconButton
-                  aria-label="close"
-                  onClick={() => onSearchTextChange(facet.datafield, '')}
-                  className={classes.clearTextButton}
-                  sx={(theme) => ({
-                    position: 'absolute',
-                    right: 7,
-                    top: 7,
-                    color: theme.palette.grey[500],
-                  })}
-                >
-                  <CloseIcon fontSize="small" />
-                </IconButton>
-                )
-              }
-            </div>
+            <>
+              <div className={classes.searchContainer}>
+                <input
+                  className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
+                  value={searchText}
+                  type="text"
+                  placeholder="e.g. Sarcoma, Neoplasm"
+                  onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
+                />
+                {
+                  searchText
+                  && searchText.trim() !== ''
+                  && (
+                    <IconButton
+                      aria-label="close"
+                      onClick={() => onSearchTextChange(facet.datafield, '')}
+                      className={classes.clearTextButton}
+                      sx={(theme) => ({
+                        position: 'absolute',
+                        right: 7,
+                        top: 7,
+                        color: theme.palette.grey[500],
+                      })}
+                    >
+                      <CloseIcon fontSize="small" />
+                    </IconButton>
+                  )
+                }
+              </div>
+              <div className={classes.searchContainer}>
+                <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
+                  {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
+                </Button>
+              </div>
+            </>
           )
         }
         {
           (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>
-                  </span>
-                  <span
-                    className={
-                          clsx(classes.sortGroupItem, {
-                            [classes.highlight]: sortBy === sortType.ALPHABET,
-                          })
-                        }
-                    onClick={() => {
-                      onSortChange(facet.datafield, sortType.ALPHABET);
-                    }}
-                  >
-                    Sort alphabetically
-                  </span>
-                  <span
-                    className={
-                          clsx(classes.sortGroupItemCounts, {
-                            [classes.highlight]: sortBy === sortType.NUMERIC,
-                          })
-                        }
-                    onClick={() => {
-                      onSortChange(facet.datafield, sortType.NUMERIC);
-                    }}
+          && (
+            <>
+              <div className={classes.sortGroup}>
+                <span className={classes.sortGroupIcon}>
+                  <Icon
+                    style={{ fontSize: 10 }}
+                    onClick={onClearSection}
                   >
-                    Sort by count
-                  </span>
-                </div>
-                <SearchFilterItems
-                  searchText={searchText}
-                  facet={facet}
-                  queryParams={queryParams}
-                  sortBy={sortBy}
-                />
-              </>
-            )
+                    <img
+                      src={clearIcon}
+                      height={12}
+                      width={12}
+                      alt="clear-icon"
+                    />
+                  </Icon>
+                </span>
+                <span
+                  className={
+                    clsx(classes.sortGroupItem, {
+                      [classes.highlight]: sortBy === sortType.ALPHABET,
+                    })
+                  }
+                  onClick={() => {
+                    onSortChange(facet.datafield, sortType.ALPHABET);
+                  }}
+                >
+                  Sort alphabetically
+                </span>
+                <span
+                  className={
+                    clsx(classes.sortGroupItemCounts, {
+                      [classes.highlight]: sortBy === sortType.NUMERIC,
+                    })
+                  }
+                  onClick={() => {
+                    onSortChange(facet.datafield, sortType.NUMERIC);
+                  }}
+                >
+                  Sort by count
+                </span>
+              </div>
+              <SearchFilterItems
+                searchText={searchText}
+                facet={facet}
+                queryParams={queryParams}
+                sortBy={sortBy}
+              />
+            </>
+          )
         }
       </Accordion>
       {

package/src/components/inputs/FilterItemStyle.js

@@ -58,15 +58,4 @@ export default () => ({
     justifyContent: 'center',
     height: '54px',
   },
-  expandedDisplayButton: {
-    backgroundColor: '#4D889E !important',
-    color: 'white',
-    width: '222px',
-    height: '24px',
-    marginTop: '5px',
-    marginBottom: '5px',
-    borderRadius: '8px',
-    fontSize: '11px',
-    top: '10px',
-  },
 });

package/src/components/inputs/SearchFilterItems.js

@@ -3,12 +3,10 @@
 import React, { useEffect, useState, useRef } from 'react';
 import {
   withStyles,
-  Button,
 } from '@material-ui/core';
 import ReduxSearchCheckbox from './checkbox/ReduxSearchCheckbox';
 import { sortBySection } from '../../utils/Sort';
 import styles from './FilterItemStyle';
-import ReduxFacetModal from '../facet/ReduxFacetModal';
 
 const searchItems = (items, searchText) => {
   let matchedItems = [];
@@ -42,7 +40,6 @@ const SearchFilterItems = ({
   } = facet;
   const initialItemSize = 20;
   const [displayCount, setDisplayCount] = useState(initialItemSize);
-  const [open, setOpen] = useState(false);
   const scrollableRef = useRef(null);
   const sortFilters = sortBySection({ ...facet, sortBy });
 
@@ -82,12 +79,6 @@ const SearchFilterItems = ({
 
   return (
     <>
-      <ReduxFacetModal
-        facet={facet}
-        queryParams={queryParams}
-        open={open}
-        onClose={() => setOpen(false)}
-      />
       <div>
         <div>
           {checkedItems}
@@ -96,11 +87,6 @@ const SearchFilterItems = ({
           {uncheckedItems}
         </div>
       </div>
-      <div className={classes.searchContainer}>
-        <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
-          {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
-        </Button>
-      </div>
     </>
   );
 };