@bento-core/facet-filter

SIDEBAR COMPONENT DESIGN

Bento core sidebar design:

• Use of local state for all the click events
• Use of global redux limited to store active filters
• Limit use of props drilling
• Core layout defined by Bento Core Sidebar component
• Use of generator function to create and configure components (generator funtion is not used for configuring all the sidebar components due to local state issue)
• Simple configuration to maximize the customization of sideBar component
• Apply SOLID principles in react (https://konstantinlebedev.com/solid-in-react/)

1 Redux stores active filters value and configuration

Generate and integrate redux dispatch actions

import { sideBarReducerGenerator } from 'bento-core';
const { statusReducer } = sideBarReducerGenerator();

const reducers = {  statusReducer, ..., otherReducers };
const loggerMiddleware = createLogger();
const store = createStore( 
  combineReducers(reducers), 
  composeWithDevTools (applyMiddleware(ReduxThunk, loggerMiddleware)),
);

Check Global redux store for all active filters

// active filter json structure
statusReducer:
  filterState:
    pr_status:
     {
       Not Reported: true
     },
     rc_scores: {
       11-15: true,
       21-25: true
     }
     tumor_grades: {}
     tumor_sizes: {(1,2]: true} 

(Note: Bento core sideBar provides method to override the redux filter events/ actions.)

2 Importing Component and Configuration

import FacetFilter from 'bento-core';

<FacetFilterThemeProvider>
  <OtherComponent />
  <FacetFilter
    data={searchData}
    facetSectionConfig={facetSectionVariables}
    facetsConfig={facetsConfig}
    CustomFacetSection={CustomFacetSection}
    CustomFacetView={CustomFacetView}
  />
</FacetFilterThemeProvider>

3 Dashboard Data

searchData Pass Dashboard Data. (DASHBOARD_QUERY response)

 <FacetFilter
    data={searchData}
    ...
 />

4 FacetsConfigs

import { InputTypes } from 'bento-core';

export const facetsConfig = [{ 
  section: CASES,
  label: 'Program', 
  apiForFiltering: 'filterSubjectCountByProgram', 
  datafield: 'programs', 
  field: GROUP, 
  type: InputTypes.CHECKBOX, 
  sort_type: sortType.ALPHABET,
  show: true, 
}, {
   section: CASES,
   label: 'Age',
    apiForFiltering: 'filterSubjectCountByAge',
    datafield: 'age_at_index',
    ApiLowerBoundName: 'lowerBound',    
    ApiUpperBoundName: 'upperBound',
    show: true,    
    slider: true,    
    type: InputTypes.SLIDER,
    sort_type: 'none',   
    minLowerBound: 0,  
    maxUpperBound: 100,   
    quantifier: 'Years',
].

1. apiForFiltering refers to object key for retrieving name and subjects count from query response (DASHBOARD_QUERY)
2. dataField field for global redux store to track active filter item
3. Type indicates the type of input (checkbox or slider)
4. sort_type attribute used by Bento core sidebar local state to sorting of facet values
5. section refers to name of the facet section
6. show attribute must to be true to display facet on the Bento core Side bar component

Configuration varies based on the input types like checkbox or slider

(NOTE - SLIDER requires additional attributes)

5 facetSectionConfig

export const facetSectionVariables = { 
Cases: { 
  isExpanded: true,
},  
Samples: {
  isExpanded: true,
},  
Files: {
  isExpanded: true,
}};

Facet section defines the number of sections that will be displayed on Bento core sidebar component. isExpanded attribute set default state for the section i.e if true then facet section expand if false facet section collapse.

6 CustomFacetSection

Bento Core sidebar component provides view customization to some component like FacetSection and Face component.

const CustomFacetSection = ({ section }) => { 
  return (
    <>
     <CustomExpansionPanelSummary>
       <div className={classes.sectionSummaryTextContainer}>
         {section.name} 
       </div>
      </CustomExpansionPanelSummary>
    </> );
}; 

// provide as props
<FacetFilter
  data={searchData}
  facetSectionConfig={facetSectionVariables}
  facetsConfig={facetsConfig}
  CustomFacetSection={CustomFacetSection}
  CustomFacetView={CustomFacetView}
/>

7 CustomFacetView

const CustomFacetView = ({ facet, facetClasses }) => {   
   return (
     <>        
       <CustomExpansionPanelSummary>          
         <div 
           className={clsx(classes.sectionSummaryText, classes[facetClasses])}
          >            
           {facet.label}
         </div>        
       </CustomExpansionPanelSummary>      
    </>    
)};

// provide as props
<FacetFilter
  data={searchData}
  facetSectionConfig={facetSectionVariables}
  facetsConfig={facetsConfig}
  CustomFacetSection={CustomFacetSection}
  CustomFacetView={CustomFacetView}
/>

8 FacetFilterThemeProvider

Bento Core Sidebar assigns classes dynamically to its components (Mui component) based on local state of the component, FacetsConfigs and facetSectionConfig. Bento Core sidebar uses Mui Components widely so ThemeProvider can be used to override styles for each of the components in Bento Core Sidebar. This approach is similar to react useContext, to prevent props drilling.

const theme = {
overrides: {
 MuiListItem:
root: {        
  '&.casesCheckedEven': {
    //refer to class name table 
    ..//styles 
  }
  '&.casesCheckedOdd' :{
    //refer to class name table 
    ..//styles 
  },
  '&.samplesCheckedEven': { 
    //refer to class name table 
  ..//styles 
  }
  '&.samplesCheckedOdd' :{
  ..//styles 
  },
   MuiSvgIcon: {
  root: {
  '&.casesCheckedIcon': {
    //refer to class name table 
    ..//styles 
  }
  '&.samplesCheckedIcon': {
    ..//styles
  }
}

import FacetFilter from 'bento-core';
<ThemeProvider theme={computedTheme}>
   <FacetFilter />
</ThemeProvider>

NOTE: These are example class name and it is based on the configuration so for different configuration this classes may not apply)

CheckBox Component CLASS NAMES TABLE

Sidebar Component	Child Component	Mui	ClassName	Condition
Facet Value	Check box Button	ListItem	{checkedSection}Checked{indexType}	active
Facet Value	Checkbox Input	CheckboxIcon	{checkedSection}CheckedIcon	active
Facet Value	Name	Typography	{checkedSection}NameUnChecked	inactive
Facet Value	Name	Typography	{checkedSection}NameChecked	active
Facet Value	Subject	Typography	{checkedSection}SubjectUnChecked	active
Facet Value	Subject	Typography	{checkedSection}SubjectChecked	inactive

Follows in order of parent to child components
bold text indicates variables
active - when input type is checked
{indexType} = 'Even' /'Odd' based on index of the facet values
{checkedSection} = section name (attribute of facetsConfig) (like Cases, Sample, Files)

Slider Component
{type} -min or max (slider input type)

Sidebar Component	Child Component	Mui	ClassName	Condition
Facet Value	Input Min/Max	Input	slider_{type}	active

9. Styling Non Mui Custom Components

Classes provided by Bento Core Sidebar can be applied to the Custom elements.

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';

const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
    //...custom component 1. bind onClearFilters fn
    // 2. disable flag to disable button
}

const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn);