@bento-core/query-bar 1.0.1-ins.6 → 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,7 +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 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;
@@ -62,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 => {
@@ -81,30 +75,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
         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: itemKeys
         });
@@ -129,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
@@ -140,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", {
@@ -157,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.6",
-  "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.2",
+    "@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,10 +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 clearAll = functions && typeof functions.clearAll === 'function'
     ? functions.clearAll
     : DEFAULT_CONFIG.functions.clearAll;
@@ -64,15 +59,9 @@ 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) => {
@@ -82,30 +71,10 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
           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: itemKeys };
         })
         .filter((facet) => facet.items.length > 0);
@@ -148,7 +117,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                         className={clsx(classes.filterName, classes.localFindBackground)}
                         onClick={clearAutocomplete}
                       >
-                        Program Name
+                        Case IDs
                       </span>
                       {' '}
                       {' '}
@@ -185,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) && (
@@ -227,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: {