Merging Bento 4.1.0 into CTDC-4.0.0

.gitignore

@@ -27,3 +27,6 @@ yarn-error.log*
 
 # WebStrom
 .idea
+
+# NX
+.nx/*

Dockerfile

@@ -8,7 +8,7 @@ RUN NODE_OPTIONS="--max-old-space-size=4096" npm install
 
 RUN NODE_OPTIONS="--max-old-space-size=4096" npx lerna run build
 
-FROM nginx:1.25.2-alpine3.18-slim
+FROM nginx:1.27.1-alpine3.20-slim AS fnl_base_image
 
 COPY --from=build /usr/src/app/packages/bento-frontend/dist /usr/share/nginx/html
 COPY --from=build /usr/src/app/conf/inject.template.js /usr/share/nginx/html/inject.template.js

README.md

@@ -0,0 +1,61 @@
+# Bento Frontend Installation Guide
+
+> ℹ️ **NOTE:** This guide is only for Bento Framework development. If you would like to consume Bento Framework for your project, please refer to the [How get my copy of Bento Frontend?](https://github.com/CBIIT/bento-frontend?tab=readme-ov-file#creating-custom-applications-how-get-my-copy-of-bento-frontend).
+
+🍱 Welcome to the Bento Frontend Installation Guide! 🍱
+---
+### Prerequisites:
+- Node 16.17.1
+- NPM 8.15.0
+- Lerna 6.6.7
+
+### Lerna Installation Steps:
+
+1. **Install Lerna globally:**
+   ```bash
+   npm install -g [email protected]
+
+### Bento Frontend Installation Steps:
+
+1. **Clone Bento Frontend Repository:**
+   ```bash
+   git clone https://github.com/CBIIT/bento-frontend.git
+   cd bento-frontend
+   ```
+
+2. **Install Node Modules:**
+   ```bash
+   npm install
+   ```
+
+3. **Navigate to Nginx Configuration Directory:**
+   ```bash
+   cd packages/bento-frontend/nginx/
+   ```
+
+4. **Install Nginx:**
+   - Use the provided guide "local-nginx-setup-for-frontend.txt" to install Nginx on your Linux-based system.
+
+5. **Return to the Root Folder:**
+   ```bash
+   cd ../../../
+   ```
+
+6. **Run Lerna to Start Bento Frontend:**
+   ```bash
+   lerna run start
+   ```
+
+---
+
+### Creating Custom Applications (How get my copy of Bento Frontend?):
+
+🛠️ If you want to create a custom application using Bento, you can use the following command:
+
+```bash
+npx @bento-core/create-bento-app <My Application Name>
+```
+
+ℹ️ This command will scaffold a new Bento application for you to customize according to your needs.
+
+🚀 Following these steps should have Bento Frontend up and running on your system. Enjoy exploring Bento! 🚀

packages/all/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/all",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -27,7 +27,7 @@
     "@bento-core/nav-bar": "^1.0.0",
     "@bento-core/paginated-table": "^1.0.0",
     "@bento-core/profile": "^1.0.0",
-    "@bento-core/query-bar": "^1.0.0",
+    "@bento-core/query-bar": "^1.1.0",
     "@bento-core/session-timeout": "^1.0.0",
     "@bento-core/stats-bar": "^1.0.0",
     "@bento-core/tab": "^1.0.0",

packages/bento-frontend/src/pages/dashTemplate/filterQueryBar/QueryBarView.js

@@ -30,6 +30,9 @@ const QueryBarView = ({ data, statusReducer, localFind }) => {
   mappedFilterState.sort((a, b) => sectionOrder.indexOf(a.datafield) - sectionOrder.indexOf(b.datafield));
 
   const { QueryBar } = QueryBarGenerator({
+    config: {
+      displayAllActiveFilters: true,
+    },
     functions: {
       clearAll: () => {
         dispatch(resetAllData());

packages/query-bar/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 */

packages/query-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

packages/query-bar/src/components/CheckboxFilter.js

@@ -1,19 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
 
 export default ({
   index, data, classes, maxItems,
   onSectionClick, onItemClick,
 }) => {
   const { items, section } = data;
+  const [expand, setExpand] = useState(true);
+  const noOfItems = expand ? items.length : maxItems;
+
+  const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
 
   return (
     <span>
       <span>
         {' '}
         {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 +30,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 +42,24 @@ export default ({
             {idx === (maxItems - 1) ? null : ' '}
           </>
         ))}
-        {items.length > maxItems && '...'}
+        {(items.length > maxItems && !expand) && (
+          <>
+            <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>

packages/query-bar/src/generators/QueryBarGenerator.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { withStyles, Button } from '@material-ui/core';
 import { InputTypes } from '@bento-core/facet-filter';
 import clsx from 'clsx';
@@ -13,8 +13,11 @@ 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
@@ -48,29 +51,30 @@ 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(true);
+      const noOfItems = expand ? autocomplete.length : maxItems;
+
       // 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);
-            }
-          });
-
+          /**
+          * to display all the active filters in the query bar
+          * ICDC-3287
+          */
           return { ...facet, items: itemKeys };
         })
         .filter((facet) => facet.items.length > 0);
@@ -138,7 +142,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 +151,27 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                       >
                         {d.title}
                       </span>
-                      {idx === (maxItems - 1) ? null : ' '}
+                      {idx === (noOfItems - 1) ? null : ' '}
                     </>
                   ))}
-                  {autocomplete.length > maxItems && '...'}
+                  {(autocomplete.length > maxItems && !expand) && (
+                    <>
+                      <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 +184,21 @@ 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}
+                  classes={classes}
+                  onSectionClick={filter.type === CHECKBOX
+                    ? resetFacetSection
+                    : resetFacetSlider}
+                  onItemClick={filter.type === CHECKBOX
+                    ? resetFacetCheckbox
+                    : resetFacetSlider}
+                />
+              </span>
             ))}
           </span>
         </div>

packages/query-bar/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 */

packages/query-bar/src/generators/styles.js

@@ -104,4 +104,14 @@ export default () => ({
   facetSectionSamplesBackground: {
     backgroundColor: '#C3EAF5',
   },
+  expandBtn: {
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+  collapseBtn: {
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
 });