Filter Table Row with Input query

.gitignore

@@ -20,13 +20,11 @@ dist
 .env.development.local
 .env.test.local
 .env.production.local
+.nvmrc
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 # WebStrom
 .idea
-
-# NX
-.nx/*

.nvmrc

@@ -0,0 +1 @@
+16.2.0

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.27.1-alpine3.20-slim AS fnl_base_image
+FROM nginx:1.25.2-alpine3.18-slim
 
 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

packages/all/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/all",
-  "version": "1.1.0",
+  "version": "1.0.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.1.0",
+    "@bento-core/query-bar": "^1.0.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/components/Layout/LayoutView.js

@@ -78,9 +78,7 @@ const Layout = ({ classes, isSidebarOpened }) => {
             <PrivateRoute path="/arm/:id" access={['admin', 'member']} component={ArmDetail} />
             <PrivateRoute path="/fileViewer/:id" requiuredSignIn access={['admin', 'member']} component={JBrowseDetail} />
             {/* bento 4.0 template */}
-            <PrivateRoute exact path="/explore" access={['admin', 'member']} component={DashTemplate} />
-            <PrivateRoute exact path="/explore/:filterQuery" access={['admin', 'member']} component={DashTemplate} />
-
+            <PrivateRoute path="/explore" access={['admin', 'member']} component={DashTemplate} />
             {/* END SECTION */}
 
             {/* SECTION: Admin only Path */}

packages/bento-frontend/src/pages/dashTemplate/sideBar/BentoFacetFilter.js

@@ -10,6 +10,7 @@ import React, { useState } from 'react';
 import {
   AccordionSummary,
   Button,
+  IconButton,
   withStyles,
 } from '@material-ui/core';
 import {
@@ -20,6 +21,7 @@ import {
   resetAllData, chunkSplit,
   SearchView, SearchBoxGenerator, UploadModalGenerator,
 } from '@bento-core/local-find';
+import RefreshIcon from '@material-ui/icons/Refresh';
 import store from '../../../store';
 import styles from './BentoFacetFilterStyle';
 import { FacetFilter, ClearAllFiltersBtn } from '@bento-core/facet-filter';
@@ -180,7 +182,12 @@ const BentoFacetFilter = ({
   * 1. Config local search input for Case
   * 2. Facet Section Name
   */
-  const CustomFacetView = ({ facet, facetClasses }) => {
+  const CustomFacetView = ({
+    facet, 
+    hasSelections, 
+    facetClasses,
+    clearFacetSectionValues
+  }) => {
     return (
       <>
         <CustomExpansionPanelSummary
@@ -200,6 +207,11 @@ const BentoFacetFilter = ({
             }
           >
             {facet.label}
+            {hasSelections ? (
+                <IconButton onClick={clearFacetSectionValues}>
+                  <RefreshIcon />
+                </IconButton>
+              ) : null}
           </div>
         </CustomExpansionPanelSummary>
       </>
@@ -219,6 +231,8 @@ const BentoFacetFilter = ({
           facetsConfig={facetsConfig}
           CustomFacetSection={CustomFacetSection}
           CustomFacetView={CustomFacetView}
+          enableClearSection
+          enableFacetCollapse
         />
       </FacetFilterThemeProvider>
     </div>

packages/facet-filter/README.md

@@ -252,12 +252,66 @@ className={clsx(classes.sectionSummaryText, classes[facetClasses])}
 ## 10  CLearAllFilterButton Component
 Bento Core provides 1. function to clear all active filters, 2. disable flag (true incase of no active filters). Client is responsible for defining view (custom html).
 ```
-import { generateClearAllFilterBtn } from 'bento-core';
+import { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
+import { getFilters } from '@bento-core/facet-filter';
 
 const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
     //...custom component 1. bind onClearFilters fn
     // 2. disable flag to disable button
-}
+} 
+  // get filter data
+  // filterState: state.statusReducer.filterState, (from reducer)
+  // const activeFilters = getFilters(filterState) // formating
+
+  <ClearAllFiltersBtn
+    Component={CustomClearAllFiltersBtn}
+    activeFilters={activeFilters}
+  />  
+```
+
+## 11  Facet Value Component
+```
+// response 
+// filterCaseCountByProgram: [{group: "COP", subjects: 301}]
+const {
+  name,
+  customName,
+  subjects,
+  customSubjects,
+  tooltip,
+} = checkboxItem;
+
+// 1. by default facet value component display group ("COP")
+// 2. set customName to display customize value
+// 3. by default facet value component display subjects (301)
+// 4. set customSubjects to display customize value or adjust correct field for subject count
+// 5. tooltip - provide text value to tooltip text
+
+ /**
+   * Add Bento frontend filter count/subjects
+   * Add tootip text
+   */
+  const filterData = facetsConfig.reduce((acc, item) => {
+    const facetValues = searchData[item.apiPath];
+    if (!facetValues) {
+      return acc;
+    }
+    const subjectCounts = [...facetValues].map((checkbox) => {
+      const text = tooltipText[item.tooltipKey];
+      return {
+        ...checkbox,
+        customSubjects: checkbox.count,
+        tooltip: text ? text[checkbox.group] : undefined,
+      };
+    });
+    return { ...acc, [item.apiPath]: [...subjectCounts] };
+  }, {});
 
-const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn); 
+  <FacetFilter
+    data={filterData}
+    facetSectionConfig={facetSectionVariables}
+    facetsConfig={facetsConfig}
+    CustomFacetSection={CustomFacetSection}
+    CustomFacetView={CustomFacetView}
+  />
 ```

packages/facet-filter/src/FacetFilterController.js

@@ -93,6 +93,7 @@ const FacetFilterController = (props) => {
    * Construct filter object
    * 1. add facet values to facets
    * 2. add 'name' key to each facet value
+   * 3. add '
    */
   const addFacetValues = (facets) => {
     const updateFacets = [];

packages/facet-filter/src/FacetFilterView.js

@@ -1,7 +1,10 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
 import React from 'react';
-import { Divider, withStyles } from '@material-ui/core';
+import {
+  Divider,
+  withStyles,
+} from '@material-ui/core';
 import styles from './FacetFilterStyle';
 import FacetSectionView from './components/section/FacetSectionView';
 import FacetView from './components/facet/ReduxFacetView';
@@ -10,6 +13,7 @@ const BentoFacetFilter = ({
   sideBarSections,
   CustomFacetSection,
   CustomFacetView,
+  clearIcon,
   enableClearSection,
   enableFacetCollapse,
 }) => {
@@ -28,6 +32,7 @@ const BentoFacetFilter = ({
                 CustomView={CustomFacetView}
                 enableClearSection={enableClearSection}
                 enableFacetCollapse={enableFacetCollapse}
+                clearIcon={clearIcon}
               />
             ))}
           </FacetSectionView>

packages/facet-filter/src/components/facet/FacetStyle.js

@@ -14,13 +14,6 @@ export default () => ({
       position: 'initial',
     },
   },
-  subSectionSummaryTextWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    paddingRight: '15px',
-  },
   subSectionSummaryText: {
     marginLeft: '10px',
     lineHeight: 0,
@@ -32,12 +25,11 @@ export default () => ({
   },
   sortGroup: {
     paddingTop: '10px',
-    marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
-    textAlign: 'left',
+    padding: '10px',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'space-between',
   },
   sortGroupIcon: {
     cursor: 'pointer',
@@ -64,6 +56,7 @@ export default () => ({
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
+    float: 'right',
   },
   highlight: {
     color: '#b2c6d6',