@bento-core/query-bar 1.0.1-ins.5 → 1.1.0

package/README.md

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

package/dist/components/CheckboxFilter.js

@@ -16,20 +16,14 @@ var _default = _ref => {
     classes,
     maxItems,
     onSectionClick,
-    onItemClick,
-    displayAllActiveFilters
+    onItemClick
   } = _ref;
   const {
     items,
     section
   } = data;
-  const [expand, setExpand] = (0, _react.useState)(false);
+  const [expand, setExpand] = (0, _react.useState)(true);
   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] : '';
@@ -48,10 +42,10 @@ var _default = _ref => {
     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(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
+  }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.expandBtn,
     onClick: () => setExpand(!expand)
-  }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
+  }, "...")), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
     className: classes.collapseBtn,
     onClick: () => setExpand(!expand)
   }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {

package/dist/generators/QueryBarGenerator.js

@@ -37,9 +37,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
   } = _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 group = config && typeof config.group === 'string' ? config.group : _config.default.config.group;
-  const count = config && typeof config.count === 'string' ? config.count : _config.default.config.count;
   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;
@@ -64,13 +61,8 @@ const QueryBarGenerator = function QueryBarGenerator() {
         autocomplete,
         upload
       } = localFind;
-      const [expand, setExpand] = (0, _react.useState)(false);
+      const [expand, setExpand] = (0, _react.useState)(true);
       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 => {
@@ -78,37 +70,17 @@ const QueryBarGenerator = function QueryBarGenerator() {
           return facet;
         }
         const {
-          data,
           items
         } = facet;
         const itemKeys = Object.keys(items);
         itemKeys.sort((a, b) => a.localeCompare(b));
 
-        /* Find any SELECTED CHECKBOXES that do NOT have any data
-         * and remove them from the list of selected checkboxes artificially */
-        itemKeys.forEach(item => {
-          if (data.findIndex(d => d.group === item) < 0) {
-            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
+        * to display all the active filters in the query bar
+        * ICDC-3287
         */
-        // const { group, count } = config;
-        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: displayItems
+          items: itemKeys
         });
       }).filter(facet => facet.items.length > 0);
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
@@ -131,7 +103,7 @@ 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
-      }, "Program Name"), ' ', ' ', /*#__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
@@ -142,10 +114,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
         className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
         key: idx,
         onClick: () => deleteAutocompleteItem(d.title)
-      }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
+      }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
         className: classes.expandBtn,
         onClick: () => setExpand(!expand)
-      }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
+      }, "...")), 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", {
@@ -159,7 +131,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
         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

@@ -17,17 +17,7 @@ var _default = {
      * overirdes maxItems to display all the active filter items
      * @var {boolean}
      */
-    displayAllActiveFilters: false,
-    /**
-     * key to access label text
-     * @var {boolean}
-     */
-    group: 'group',
-    /**
-     * key to access count value
-     * @var {boolean}
-     */
-    count: 'subjects'
+    displayAllActiveFilters: false
   },
   /* Component Helper Functions */
   functions: {

package/dist/generators/styles.js

@@ -21,7 +21,7 @@ var _default = () => ({
     letterSpacing: '0.5px',
     fontFamily: 'Nunito',
     fontSize: '14px',
-    color: '#10A075'
+    color: '#0e3151'
   },
   filterName: {
     textTransform: 'uppercase',
@@ -85,17 +85,17 @@ var _default = () => ({
     borderRight: '2px solid #969696',
     marginLeft: 7
   },
-  /* Custom Styling by Programs */
+  /* Custom Styling by Project */
   localFind: {
     color: '#10A075'
   },
   localFindBackground: {
     backgroundColor: '#C0E9D7'
   },
-  facetSectionPrograms: {
+  facetSectionCases: {
     color: '#10A075'
   },
-  facetSectionProgramsBackground: {
+  facetSectionCasesBackground: {
     backgroundColor: '#C0E9D7'
   },
   facetSectionFiles: {

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-ins.5",
-  "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:",
+  "version": "1.1.0",
+  "description": "",
   "main": "dist/index.js",
   "scripts": {
     "build": "npm run lint && cross-env-shell rm -rf dist && NODE_ENV=production BABEL_ENV=es babel src --out-dir dist --copy-files",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint src"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CBIIT/bento-frontend.git"
-  },
+  "repository": "https://github.com/CBIIT/bento-frontend",
   "publishConfig": {
     "access": "public"
   },
@@ -23,14 +20,10 @@
     "react-redux": "^7.2.1"
   },
   "dependencies": {
-    "@bento-core/facet-filter": "1.0.1-ins.1",
+    "@bento-core/facet-filter": "^1.0.0",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/CBIIT/bento-frontend/issues"
-  },
-  "homepage": "https://github.com/CBIIT/bento-frontend#readme",
-  "devDependencies": {}
+  "gitHead": "a5d1f2134a214a75a4d119b47b4f7156361ca966"
 }

package/src/components/CheckboxFilter.js

@@ -1,21 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { 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 [expand, setExpand] = useState(true);
   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 (
@@ -49,20 +42,14 @@ export default ({
             {idx === (maxItems - 1) ? null : ' '}
           </>
         ))}
-        {items.length > maxItems && (
+        {(items.length > maxItems && !expand) && (
           <>
-            {
-              displayAllActiveFilters
-                ? (
-                  <span
-                    className={classes.expandBtn}
-                    onClick={() => setExpand(!expand)}
-                  >
-                    ...
-                  </span>
-                )
-                : '...'
-              }
+            <span
+              className={classes.expandBtn}
+              onClick={() => setExpand(!expand)}
+            >
+              ...
+            </span>
           </>
         )}
         {(expand && items.length > maxItems) && (

package/src/generators/QueryBarGenerator.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { withStyles, Button } from '@material-ui/core';
-// eslint-disable-next-line import/no-unresolved
 import { InputTypes } from '@bento-core/facet-filter';
 import clsx from 'clsx';
 import { Filter } from '../components/FilterMap';
@@ -24,16 +23,6 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? config.maxItems
     : DEFAULT_CONFIG.config.maxItems;
 
-  const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
-    ? config.displayAllActiveFilters
-    : DEFAULT_CONFIG.config.displayAllActiveFilters;
-
-  const group = config && typeof config.group === 'string'
-    ? config.group : DEFAULT_CONFIG.config.group;
-
-  const count = config && typeof config.count === 'string'
-    ? config.count : DEFAULT_CONFIG.config.count;
-
   const clearAll = functions && typeof functions.clearAll === 'function'
     ? functions.clearAll
     : DEFAULT_CONFIG.functions.clearAll;
@@ -70,49 +59,23 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
 
       const { autocomplete, upload } = localFind;
 
-      const [expand, setExpand] = useState(false);
+      const [expand, setExpand] = useState(true);
       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) => {
           if (facet.type !== CHECKBOX) { return facet; }
 
-          const { data, items } = facet;
+          const { items } = facet;
           const itemKeys = Object.keys(items);
           itemKeys.sort((a, b) => a.localeCompare(b));
 
-          /* Find any SELECTED CHECKBOXES that do NOT have any data
-           * and remove them from the list of selected checkboxes artificially */
-          itemKeys.forEach((item) => {
-            if (data.findIndex((d) => d.group === item) < 0) {
-              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
+          * to display all the active filters in the query bar
+          * ICDC-3287
           */
-          // const { group, count } = config;
-          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: displayItems };
+          return { ...facet, items: itemKeys };
         })
         .filter((facet) => facet.items.length > 0);
 
@@ -154,7 +117,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                         className={clsx(classes.filterName, classes.localFindBackground)}
                         onClick={clearAutocomplete}
                       >
-                        Program Name
+                        Case IDs
                       </span>
                       {' '}
                       {' '}
@@ -191,20 +154,14 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                       {idx === (noOfItems - 1) ? null : ' '}
                     </>
                   ))}
-                  {autocomplete.length > maxItems && (
+                  {(autocomplete.length > maxItems && !expand) && (
                     <>
-                      {
-                        displayAllActiveFilters
-                          ? (
-                            <span
-                              className={classes.expandBtn}
-                              onClick={() => setExpand(!expand)}
-                            >
-                              ...
-                            </span>
-                          )
-                          : '...'
-                        }
+                      <span
+                        className={classes.expandBtn}
+                        onClick={() => setExpand(!expand)}
+                      >
+                        ...
+                      </span>
                     </>
                   )}
                   {(expand && autocomplete.length > maxItems) && (
@@ -233,7 +190,6 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                   type={filter.type}
                   data={filter}
                   maxItems={maxItems}
-                  displayAllActiveFilters={displayAllActiveFilters}
                   classes={classes}
                   onSectionClick={filter.type === CHECKBOX
                     ? resetFacetSection

package/src/generators/config.js

@@ -12,16 +12,6 @@ export default {
      * @var {boolean}
      */
     displayAllActiveFilters: false,
-    /**
-     * key to access label text
-     * @var {boolean}
-     */
-    group: 'group',
-    /**
-     * key to access count value
-     * @var {boolean}
-     */
-    count: 'subjects',
   },
 
   /* Component Helper Functions */

package/src/generators/styles.js

@@ -15,7 +15,7 @@ export default () => ({
     letterSpacing: '0.5px',
     fontFamily: 'Nunito',
     fontSize: '14px',
-    color: '#10A075',
+    color: '#0e3151',
   },
   filterName: {
     textTransform: 'uppercase',
@@ -79,17 +79,17 @@ export default () => ({
     borderRight: '2px solid #969696',
     marginLeft: 7,
   },
-  /* Custom Styling by Programs */
+  /* Custom Styling by Project */
   localFind: {
     color: '#10A075',
   },
   localFindBackground: {
     backgroundColor: '#C0E9D7',
   },
-  facetSectionPrograms: {
+  facetSectionCases: {
     color: '#10A075',
   },
-  facetSectionProgramsBackground: {
+  facetSectionCasesBackground: {
     backgroundColor: '#C0E9D7',
   },
   facetSectionFiles: {