@bento-core/query-bar 1.0.1-ccdihub.5 → 1.0.1-icdc.1

package/dist/components/CheckboxFilter.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 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; }
 var _default = _ref => {
   let {
     index,
@@ -14,28 +16,45 @@ var _default = _ref => {
     classes,
     maxItems,
     onSectionClick,
-    onItemClick
+    onItemClick,
+    displayAllActiveFilters
   } = _ref;
   const {
     items,
     section
   } = data;
+  const [expand, setExpand] = (0, _react.useState)(false);
+  const noOfItems = expand ? items.length : maxItems;
+  (0, _react.useEffect)(() => {
+    if (items.length <= maxItems && expand) {
+      setExpand(!expand);
+    }
+  }, [items]);
+  const clsName = function clsName() {
+    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    return "facetSection".concat(text.replace(/\s+/g, '')).concat(attr);
+  };
   return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, ' ', index !== 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: classes.operators
   }, " AND ") : '', /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _clsx.default)(classes.filterName, classes["facetSection".concat(section, "Background")]),
+    className: (0, _clsx.default)(classes.filterName, classes["".concat(clsName(section, 'Background'))]),
     onClick: () => onSectionClick(data)
   }, data.label), ' '), /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: classes.operators
   }, items.length === 1 ? 'IS ' : 'IN '), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
     className: classes.bracketsOpen
-  }, "("), items.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
+  }, "("), items.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
     key: idx,
     onClick: () => onItemClick(data, d)
-  }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.ellipsis
-  }, "..."), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
+  }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.expandBtn,
+    onClick: () => setExpand(!expand)
+  }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.collapseBtn,
+    onClick: () => setExpand(!expand)
+  }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
     className: classes.bracketsClose
   }, ")")));
 };

package/dist/generators/QueryBarGenerator.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.QueryBarGenerator = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _facetFilter = require("@bento-core/facet-filter");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -12,6 +12,8 @@ var _FilterMap = require("../components/FilterMap");
 var _styles = _interopRequireDefault(require("./styles"));
 var _config = _interopRequireDefault(require("./config"));
 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; }
 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; }
@@ -27,12 +29,15 @@ const QueryBarGenerator = function QueryBarGenerator() {
   let uiConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _config.default;
   const {
     config,
-    functions
+    functions,
+    customStyles = {}
   } = uiConfig;
   const {
     CHECKBOX
   } = _facetFilter.InputTypes;
+  const styles = () => _objectSpread(_objectSpread({}, (0, _styles.default)()), customStyles);
   const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
+  const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean' ? config.displayAllActiveFilters : _config.default.config.displayAllActiveFilters;
   const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
   const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
   const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -40,8 +45,12 @@ const QueryBarGenerator = function QueryBarGenerator() {
   const resetFacetSection = functions && typeof functions.resetFacetSection === 'function' ? functions.resetFacetSection : _config.default.functions.resetFacetSection;
   const resetFacetCheckbox = functions && typeof functions.resetFacetCheckbox === 'function' ? functions.resetFacetCheckbox : _config.default.functions.resetFacetCheckbox;
   const resetFacetSlider = functions && typeof functions.resetFacetSlider === 'function' ? functions.resetFacetSlider : _config.default.functions.resetFacetSlider;
+  const clsName = function clsName() {
+    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'filter-section';
+    return text.replace(/\s+/g, '-').toLowerCase();
+  };
   return {
-    QueryBar: (0, _core.withStyles)(_styles.default, {
+    QueryBar: (0, _core.withStyles)(styles, {
       withTheme: true
     })(props => {
       const {
@@ -53,6 +62,13 @@ const QueryBarGenerator = function QueryBarGenerator() {
         autocomplete,
         upload
       } = localFind;
+      const [expand, setExpand] = (0, _react.useState)(false);
+      const noOfItems = expand ? autocomplete.length : maxItems;
+      (0, _react.useEffect)(() => {
+        if (autocomplete.length <= maxItems && expand) {
+          setExpand(!expand);
+        }
+      }, [autocomplete]);
 
       // Remove any sections without checkboxes selected
       const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -73,8 +89,23 @@ const QueryBarGenerator = function QueryBarGenerator() {
             itemKeys.splice(itemKeys.indexOf(item), 1);
           }
         });
+        // return { ...facet, items: itemKeys };
+        /**
+        * Maintain consistant behavior with facet filter component
+        * Display the active filter items based on the count value
+        * Display active filter items in query bar only if count is greater than 0
+        * behavior similar to filter component
+        */
+        const displayItems = itemKeys.reduce((accumulator, item) => {
+          const itemList = data.filter(d => d.group === item && d.count > 0) || [];
+          if (itemList.length > 0) {
+            const labels = itemList.map(filter => filter.group);
+            accumulator.push(labels);
+          }
+          return accumulator;
+        }, []);
         return _objectSpread(_objectSpread({}, facet), {}, {
-          items: itemKeys
+          items: displayItems
         });
       }).filter(facet => facet.items.length > 0);
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
@@ -97,30 +128,39 @@ const QueryBarGenerator = function QueryBarGenerator() {
       }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
         onClick: clearAutocomplete
-      }, "Participant ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
+      }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
       }, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.bracketsOpen
       }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
         onClick: clearUpload
-      }, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      }, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
         key: idx,
         onClick: () => deleteAutocompleteItem(d.title)
-      }, d.title), idx === maxItems - 1 ? null : ' ')), autocomplete.length > maxItems && '...', (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
+      }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.expandBtn,
+        onClick: () => setExpand(!expand)
+      }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.collapseBtn,
+        onClick: () => setExpand(!expand)
+      }, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.bracketsClose
       }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
-      }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
+      }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement("span", {
+        className: clsName(filter.section)
+      }, /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
         index: index,
         type: filter.type,
         data: filter,
         maxItems: maxItems,
+        displayAllActiveFilters: displayAllActiveFilters,
         classes: classes,
         onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
         onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
-      }))));
+      })))));
     })
   };
 };

package/dist/generators/config.js

@@ -12,7 +12,12 @@ var _default = {
      * The maximum number of items to display in a query bar facet section
      * @var {number}
      */
-    maxItems: 2
+    maxItems: 2,
+    /**
+     * overirdes maxItems to display all the active filter items
+     * @var {boolean}
+     */
+    displayAllActiveFilters: false
   },
   /* Component Helper Functions */
   functions: {

package/dist/generators/styles.js

@@ -15,51 +15,46 @@ var _default = () => ({
     overflowY: 'auto'
   },
   queryContainer: {
-    marginLeft: 5,
+    marginLeft: 7,
     position: 'relative',
     lineHeight: '2.4em',
+    letterSpacing: '0.5px',
     fontFamily: 'Nunito',
     fontSize: '14px',
     color: '#0e3151'
   },
   filterName: {
     textTransform: 'uppercase',
-    padding: '3px 6px 3px 6px',
+    padding: '5px 6px 5px 7px',
     borderRadius: 4,
     fontSize: 12,
     fontWeight: 600,
     cursor: 'pointer'
   },
   filterCheckboxes: {
-    padding: '3px 6px 3px 6px',
-    borderRadius: 5,
+    padding: '4px 7px 3px 6px',
+    borderRadius: 4,
     fontSize: 12,
     fontWeight: 600,
-    border: '0.5px solid #646464',
+    border: '0.75px solid #898989',
     width: 'fit-content',
     backgroundColor: '#fff',
     cursor: 'pointer'
   },
   bracketsOpen: {
-    fontSize: 20,
-    fontFamily: 'Nunito',
-    color: '#646464',
+    fontSize: 18,
+    fontFamily: 'Nunito Sans Semibold',
+    color: '#787878',
     marginRight: 3,
     fontWeight: 600
   },
   bracketsClose: {
-    fontSize: 20,
-    fontFamily: 'Nunito',
-    color: '#646464',
+    fontSize: 18,
+    fontFamily: 'Nunito Sans Semibold',
+    color: '#787878',
     marginLeft: 3,
     fontWeight: 600
   },
-  ellipsis: {
-    fontFamily: 'Nunito',
-    fontWeight: 600,
-    fontSize: 10,
-    marginLeft: 3
-  },
   operators: {
     color: '#646464',
     marginLeft: '3px',
@@ -78,32 +73,30 @@ var _default = () => ({
     borderRadius: '15px',
     fontFamily: 'Nunito',
     boxSizing: 'border-box',
-    backgroundColor: '#646464',
+    backgroundColor: '#969696',
     textTransform: 'capitalize',
     border: '1px solid #B4B4B4',
     padding: '1px 5px 0px 6px',
     '&:hover': {
-      backgroundColor: '#646464'
+      backgroundColor: '#969696'
     }
   },
   divider: {
-    padding: '0 0 3px 0',
-    fontSize: '23px',
-    borderRight: '1px solid #969696',
+    borderRight: '2px solid #969696',
     marginLeft: 7
   },
   /* Custom Styling by Project */
   localFind: {
-    color: '#7AA6B6'
+    color: '#10A075'
   },
   localFindBackground: {
-    backgroundColor: '#E4ECE9'
+    backgroundColor: '#C0E9D7'
   },
   facetSectionCases: {
-    color: '#7AA6B6'
+    color: '#10A075'
   },
   facetSectionCasesBackground: {
-    backgroundColor: '#E4ECE9'
+    backgroundColor: '#C0E9D7'
   },
   facetSectionFiles: {
     color: '#E636E4'
@@ -111,41 +104,21 @@ var _default = () => ({
   facetSectionFilesBackground: {
     backgroundColor: '#F5C3F1'
   },
-  facetSectionDemographics: {
-    color: '#7AA6B6'
-  },
-  facetSectionDemographicsBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionDiagnosis: {
-    color: '#7AA6B6'
-  },
-  facetSectionDiagnosisBackground: {
-    backgroundColor: '#E4ECE9'
-  },
   facetSectionSamples: {
-    color: '#7AA6B6'
+    color: '#10BEFF'
   },
   facetSectionSamplesBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionDatacategory: {
-    color: '#7AA6B6'
-  },
-  facetSectionDatacategoryBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionStudy: {
-    color: '#7AA6B6'
+    backgroundColor: '#C3EAF5'
   },
-  facetSectionStudyBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionLibrary: {
-    color: '#7AA6B6'
+  expandBtn: {
+    '&:hover': {
+      cursor: 'pointer'
+    }
   },
-  facetSectionLibraryBackground: {
-    backgroundColor: '#E4ECE9'
+  collapseBtn: {
+    '&:hover': {
+      cursor: 'pointer'
+    }
   }
 });
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-ccdihub.5",
+  "version": "1.0.1-icdc.1",
   "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
   "main": "dist/index.js",
   "scripts": {

package/src/components/CheckboxFilter.js

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 
 export default ({
   index, data, classes, maxItems,
   onSectionClick, onItemClick,
+  displayAllActiveFilters,
 }) => {
   const { items, section } = data;
+  const [expand, setExpand] = useState(false);
+  const noOfItems = expand ? items.length : maxItems;
+
+  useEffect(() => {
+    if (items.length <= maxItems && expand) {
+      setExpand(!expand);
+    }
+  }, [items]);
+
+  const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
 
   return (
     <span>
@@ -13,7 +24,7 @@ export default ({
         {' '}
         {index !== 0 ? <span className={classes.operators}> AND </span> : ''}
         <span
-          className={clsx(classes.filterName, classes[`facetSection${section}Background`])}
+          className={clsx(classes.filterName, classes[`${clsName(section, 'Background')}`])}
           onClick={() => onSectionClick(data)}
         >
           {data.label}
@@ -26,10 +37,10 @@ export default ({
           {items.length === 1 ? 'IS ' : 'IN '}
         </span>
         {items.length > 1 && <span className={classes.bracketsOpen}>(</span>}
-        {items.slice(0, maxItems).map((d, idx) => (
+        {items.slice(0, noOfItems).map((d, idx) => (
           <>
             <span
-              className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
+              className={clsx(classes.filterCheckboxes, classes[clsName(section)])}
               key={idx}
               onClick={() => onItemClick(data, d)}
             >
@@ -38,7 +49,30 @@ export default ({
             {idx === (maxItems - 1) ? null : ' '}
           </>
         ))}
-        {items.length > maxItems && <span className={classes.ellipsis}>...</span>}
+        {items.length > maxItems && (
+          <>
+            {
+              displayAllActiveFilters
+                ? (
+                  <span
+                    className={classes.expandBtn}
+                    onClick={() => setExpand(!expand)}
+                  >
+                    ...
+                  </span>
+                )
+                : '...'
+              }
+          </>
+        )}
+        {(expand && items.length > maxItems) && (
+          <span
+            className={classes.collapseBtn}
+            onClick={() => setExpand(!expand)}
+          >
+            {' LESS'}
+          </span>
+        )}
         {items.length > 1 && <span className={classes.bracketsClose}>)</span>}
       </span>
     </span>

package/src/generators/QueryBarGenerator.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { withStyles, Button } from '@material-ui/core';
 import { InputTypes } from '@bento-core/facet-filter';
 import clsx from 'clsx';
@@ -13,13 +13,20 @@ import DEFAULT_CONFIG from './config';
  * @returns {object} { QueryBar }
  */
 export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
-  const { config, functions } = uiConfig;
+  const { config, functions, customStyles = {} } = uiConfig;
   const { CHECKBOX } = InputTypes;
+  const styles = () => (
+    { ...DEFAULT_STYLES(), ...customStyles }
+  );
 
   const maxItems = config && typeof config.maxItems === 'number'
     ? config.maxItems
     : DEFAULT_CONFIG.config.maxItems;
 
+  const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
+    ? config.displayAllActiveFilters
+    : DEFAULT_CONFIG.config.displayAllActiveFilters;
+
   const clearAll = functions && typeof functions.clearAll === 'function'
     ? functions.clearAll
     : DEFAULT_CONFIG.functions.clearAll;
@@ -48,12 +55,23 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? functions.resetFacetSlider
     : DEFAULT_CONFIG.functions.resetFacetSlider;
 
+  const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
+
   return {
-    QueryBar: withStyles(DEFAULT_STYLES, { withTheme: true })((props) => {
+    QueryBar: withStyles(styles, { withTheme: true })((props) => {
       const { statusReducer, localFind, classes } = props;
 
       const { autocomplete, upload } = localFind;
 
+      const [expand, setExpand] = useState(false);
+      const noOfItems = expand ? autocomplete.length : maxItems;
+
+      useEffect(() => {
+        if (autocomplete.length <= maxItems && expand) {
+          setExpand(!expand);
+        }
+      }, [autocomplete]);
+
       // Remove any sections without checkboxes selected
       const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
         .map((facet) => {
@@ -70,8 +88,23 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
               itemKeys.splice(itemKeys.indexOf(item), 1);
             }
           });
+          // return { ...facet, items: itemKeys };
+          /**
+          * Maintain consistant behavior with facet filter component
+          * Display the active filter items based on the count value
+          * Display active filter items in query bar only if count is greater than 0
+          * behavior similar to filter component
+          */
+          const displayItems = itemKeys.reduce((accumulator, item) => {
+            const itemList = data.filter((d) => (d.group === item && d.count > 0)) || [];
+            if (itemList.length > 0) {
+              const labels = itemList.map((filter) => filter.group);
+              accumulator.push(labels);
+            }
+            return accumulator;
+          }, []);
 
-          return { ...facet, items: itemKeys };
+          return { ...facet, items: displayItems };
         })
         .filter((facet) => facet.items.length > 0);
 
@@ -113,7 +146,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                         className={clsx(classes.filterName, classes.localFindBackground)}
                         onClick={clearAutocomplete}
                       >
-                        Participant ID
+                        Case IDs
                       </span>
                       {' '}
                       {' '}
@@ -138,7 +171,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                       {' '}
                     </>
                   ) : null}
-                  {autocomplete.slice(0, maxItems).map((d, idx) => (
+                  {autocomplete.slice(0, noOfItems).map((d, idx) => (
                     <>
                       <span
                         className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
@@ -147,10 +180,33 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                       >
                         {d.title}
                       </span>
-                      {idx === (maxItems - 1) ? null : ' '}
+                      {idx === (noOfItems - 1) ? null : ' '}
                     </>
                   ))}
-                  {autocomplete.length > maxItems && '...'}
+                  {autocomplete.length > maxItems && (
+                    <>
+                      {
+                        displayAllActiveFilters
+                          ? (
+                            <span
+                              className={classes.expandBtn}
+                              onClick={() => setExpand(!expand)}
+                            >
+                              ...
+                            </span>
+                          )
+                          : '...'
+                        }
+                    </>
+                  )}
+                  {(expand && autocomplete.length > maxItems) && (
+                    <span
+                      className={classes.collapseBtn}
+                      onClick={() => setExpand(!expand)}
+                    >
+                      {' LESS'}
+                    </span>
+                  )}
                   {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
                     ? <span className={classes.bracketsClose}>)</span>
                     : null}
@@ -163,19 +219,22 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
               ? <span className={classes.operators}> AND </span>
               : null}
             {mappedInputs.map((filter, index) => (
-              <Filter
-                index={index}
-                type={filter.type}
-                data={filter}
-                maxItems={maxItems}
-                classes={classes}
-                onSectionClick={filter.type === CHECKBOX
-                  ? resetFacetSection
-                  : resetFacetSlider}
-                onItemClick={filter.type === CHECKBOX
-                  ? resetFacetCheckbox
-                  : resetFacetSlider}
-              />
+              <span className={clsName(filter.section)}>
+                <Filter
+                  index={index}
+                  type={filter.type}
+                  data={filter}
+                  maxItems={maxItems}
+                  displayAllActiveFilters={displayAllActiveFilters}
+                  classes={classes}
+                  onSectionClick={filter.type === CHECKBOX
+                    ? resetFacetSection
+                    : resetFacetSlider}
+                  onItemClick={filter.type === CHECKBOX
+                    ? resetFacetCheckbox
+                    : resetFacetSlider}
+                />
+              </span>
             ))}
           </span>
         </div>

package/src/generators/config.js

@@ -7,6 +7,11 @@ export default {
      * @var {number}
      */
     maxItems: 2,
+    /**
+     * overirdes maxItems to display all the active filter items
+     * @var {boolean}
+     */
+    displayAllActiveFilters: false,
   },
 
   /* Component Helper Functions */

package/src/generators/styles.js

@@ -9,51 +9,46 @@ export default () => ({
     overflowY: 'auto',
   },
   queryContainer: {
-    marginLeft: 5,
+    marginLeft: 7,
     position: 'relative',
     lineHeight: '2.4em',
+    letterSpacing: '0.5px',
     fontFamily: 'Nunito',
     fontSize: '14px',
     color: '#0e3151',
   },
   filterName: {
     textTransform: 'uppercase',
-    padding: '3px 6px 3px 6px',
+    padding: '5px 6px 5px 7px',
     borderRadius: 4,
     fontSize: 12,
     fontWeight: 600,
     cursor: 'pointer',
   },
   filterCheckboxes: {
-    padding: '3px 6px 3px 6px',
-    borderRadius: 5,
+    padding: '4px 7px 3px 6px',
+    borderRadius: 4,
     fontSize: 12,
     fontWeight: 600,
-    border: '0.5px solid #646464',
+    border: '0.75px solid #898989',
     width: 'fit-content',
     backgroundColor: '#fff',
     cursor: 'pointer',
   },
   bracketsOpen: {
-    fontSize: 20,
-    fontFamily: 'Nunito',
-    color: '#646464',
+    fontSize: 18,
+    fontFamily: 'Nunito Sans Semibold',
+    color: '#787878',
     marginRight: 3,
     fontWeight: 600,
   },
   bracketsClose: {
-    fontSize: 20,
-    fontFamily: 'Nunito',
-    color: '#646464',
+    fontSize: 18,
+    fontFamily: 'Nunito Sans Semibold',
+    color: '#787878',
     marginLeft: 3,
     fontWeight: 600,
   },
-  ellipsis: {
-    fontFamily: 'Nunito',
-    fontWeight: 600,
-    fontSize: 10,
-    marginLeft: 3,
-  },
   operators: {
     color: '#646464',
     marginLeft: '3px',
@@ -72,32 +67,30 @@ export default () => ({
     borderRadius: '15px',
     fontFamily: 'Nunito',
     boxSizing: 'border-box',
-    backgroundColor: '#646464',
+    backgroundColor: '#969696',
     textTransform: 'capitalize',
     border: '1px solid #B4B4B4',
     padding: '1px 5px 0px 6px',
     '&:hover': {
-      backgroundColor: '#646464',
+      backgroundColor: '#969696',
     },
   },
   divider: {
-    padding: '0 0 3px 0',
-    fontSize: '23px',
-    borderRight: '1px solid #969696',
+    borderRight: '2px solid #969696',
     marginLeft: 7,
   },
   /* Custom Styling by Project */
   localFind: {
-    color: '#7AA6B6',
+    color: '#10A075',
   },
   localFindBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#C0E9D7',
   },
   facetSectionCases: {
-    color: '#7AA6B6',
+    color: '#10A075',
   },
   facetSectionCasesBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#C0E9D7',
   },
   facetSectionFiles: {
     color: '#E636E4',
@@ -105,40 +98,20 @@ export default () => ({
   facetSectionFilesBackground: {
     backgroundColor: '#F5C3F1',
   },
-  facetSectionDemographics: {
-    color: '#7AA6B6',
-  },
-  facetSectionDemographicsBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionDiagnosis: {
-    color: '#7AA6B6',
-  },
-  facetSectionDiagnosisBackground: {
-    backgroundColor: '#E4ECE9',
-  },
   facetSectionSamples: {
-    color: '#7AA6B6',
+    color: '#10BEFF',
   },
   facetSectionSamplesBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionDatacategory: {
-    color: '#7AA6B6',
-  },
-  facetSectionDatacategoryBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionStudy: {
-    color: '#7AA6B6',
+    backgroundColor: '#C3EAF5',
   },
-  facetSectionStudyBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionLibrary: {
-    color: '#7AA6B6',
+  expandBtn: {
+    '&:hover': {
+      cursor: 'pointer',
+    },
   },
-  facetSectionLibraryBackground: {
-    backgroundColor: '#E4ECE9',
+  collapseBtn: {
+    '&:hover': {
+      cursor: 'pointer',
+    },
   },
 });