@bento-core/query-bar 0.2.0 → 0.3.0

package/README.md

@@ -25,14 +25,14 @@ See below for usage instructions.
   });
 
   // Use the component (e.g. In dashTemplateView.js)
-  const Layout = (props) => {
+  const Layout = ({ classes, data, states, /* ... */}) => {
     return (
       {/* other components */}
       <div className={classes.rightContent}>
         <div className={classes.widgetsContainer}>
           {/* other components */}
 
-          <QueryBar />
+          <QueryBar statusReducer={null} localFind={null} />
 
           {/* other components */}
         </div>
@@ -42,6 +42,7 @@ See below for usage instructions.
   };
   ```
 
+  > **Warning**: The `statusReducer` prop requires the dashboard API data merged with the `facetsConfig` property. Please see the example in the demo implementation [here](https://github.com/CBIIT/bento-frontend/blob/7efd62cd3da0c29326e523055d30118244dc2f2f/packages/bento-frontend/src/pages/dashTemplate/filterQueryBar/QueryBarView.js#LL20C14-L20C14).
 </details>
 
 ## Generator Configuration
@@ -137,3 +138,5 @@ This component, which is generated by the provided generator, accepts the follow
   classes={undefined}        // {object} - The Material UI classes object. Overrides default styling for provided classes.
 />
 ```
+
+> **Warning**: The `statusReducer` prop requires the dashboard API data merged with the `facetsConfig` property. Please see the example in the demo implementation [here](https://github.com/CBIIT/bento-frontend/blob/7efd62cd3da0c29326e523055d30118244dc2f2f/packages/bento-frontend/src/pages/dashTemplate/filterQueryBar/QueryBarView.js#LL20C14-L20C14).

package/dist/generators/QueryBarGenerator.js

@@ -59,10 +59,22 @@ const QueryBarGenerator = function QueryBarGenerator() {
         if (facet.type !== CHECKBOX) {
           return facet;
         }
-        const items = Object.keys(facet.items);
-        items.sort((a, b) => a.localeCompare(b));
-        return _objectSpread(_objectSpread({}, 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 _objectSpread(_objectSpread({}, facet), {}, {
+          items: itemKeys
         });
       }).filter(facet => facet.items.length > 0);
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {

package/package.json

@@ -1,28 +1,29 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
-    "build": "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"
+    "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": "https://github.com/CBIIT/bento-frontend",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@bento-core/facet-filter": "*",
     "@material-ui/core": "^4.10.0",
-    "clsx": "*",
+    "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
     "react-redux": "^7.2.1"
   },
   "dependencies": {
+    "@bento-core/facet-filter": "^0.3.0",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "10ee9deeae6dd0f139ecb7a70afc4c96a4e33d74"
+  "gitHead": "9b75062e5092b403db02b167870ea4331361c26f"
 }

package/src/generators/QueryBarGenerator.js

@@ -59,10 +59,19 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
         .map((facet) => {
           if (facet.type !== CHECKBOX) { return facet; }
 
-          const items = Object.keys(facet.items);
-          items.sort((a, b) => a.localeCompare(b));
-
-          return { ...facet, items };
+          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 };
         })
         .filter((facet) => facet.items.length > 0);