@bento-core/facet-filter 0.2.0

package/README.md

@@ -0,0 +1,255 @@
+# 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 <br>
+**bold** text indicates variables <br>
+active - when input type is checked <br>
+**{indexType}** = 'Even' /'Odd' based on index of the facet values <br>
+**{checkedSection}** = section name (attribute of facetsConfig) (like Cases, Sample, Files)
+
+**Slider Component** <br>
+**{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); 
+```

package/babel.config.json

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-react-jsx",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

package/dist/FacetFilterController.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Types = require("./components/inputs/Types");
+var _FacetFilterView = _interopRequireDefault(require("./FacetFilterView"));
+const _excluded = ["section"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const FacetFilterController = props => {
+  /**
+   * update checkbox state
+   * 1. checkbox state
+   * 2. subject state
+   */
+  const {
+    filterState,
+    data,
+    facetsConfig,
+    facetSectionConfig
+  } = props;
+  const updateFacetState = filterSections => {
+    const updateSections = [...filterSections];
+    if (!_lodash.default.isEmpty(filterState)) {
+      for (const [key, value] of Object.entries(filterState)) {
+        updateSections.forEach(sideBar => {
+          if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
+            sideBar.facetValues.forEach(item => {
+              item.isChecked = value[item.name] ? value[item.name] : false;
+            });
+          }
+          if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
+            sideBar.facetValues = value;
+          }
+        });
+      }
+    } else {
+      updateSections.forEach(sideBar => {
+        if (sideBar.type === _Types.InputTypes.CHECKBOX) {
+          sideBar.facetValues.forEach(item => {
+            item.isChecked = false;
+          });
+        }
+        /**
+         * set default value for slider - on clear all filter
+         */
+        if (sideBar.type === _Types.InputTypes.SLIDER) {
+          const {
+            minLowerBound,
+            maxUpperBound
+          } = sideBar;
+          sideBar.facetValues = [minLowerBound, maxUpperBound];
+        }
+      });
+    }
+    return updateSections;
+  };
+  const arrangeBySections = arr => {
+    const sideBar = {};
+    arr.forEach(_ref => {
+      let {
+          section
+        } = _ref,
+        item = _objectWithoutProperties(_ref, _excluded);
+      if (!sideBar[section]) {
+        sideBar[section] = {
+          name: section,
+          sectionName: section,
+          expandSection: facetSectionConfig[section].isExpanded,
+          items: []
+        };
+      }
+      sideBar[section].items.push(_objectSpread({
+        section
+      }, item));
+    });
+    return Object.values(sideBar);
+  };
+
+  /**
+   * Construct filter object
+   * 1. add facet values to facets
+   * 2. add 'name' key to each facet value
+   */
+  const addFacetValues = facets => {
+    const updateFacets = [];
+    if (facets) {
+      facets.forEach(facet => {
+        const updateFacet = _objectSpread(_objectSpread({}, facet), {}, {
+          facetValues: []
+        });
+        const {
+          field,
+          ApiLowerBoundName,
+          ApiUpperBoundName,
+          apiForFiltering
+        } = updateFacet;
+        if (data[apiForFiltering]) {
+          if (Array.isArray(data[apiForFiltering])) {
+            const updateField = data[apiForFiltering].map(item => {
+              const addField = _objectSpread({}, item);
+              addField.name = item[field];
+              return addField;
+            });
+            updateFacet.facetValues = updateField;
+          }
+          /**
+          * add object to facet values
+          */
+          if (facet.type === _Types.InputTypes.SLIDER) {
+            const lowerBound = data[apiForFiltering][ApiLowerBoundName];
+            const upperBound = data[apiForFiltering][ApiUpperBoundName];
+            updateFacet.minLowerBound = lowerBound;
+            updateFacet.maxUpperBound = upperBound;
+            updateFacet.facetValues = [lowerBound, upperBound];
+          }
+        }
+        updateFacets.push(updateFacet);
+      });
+    }
+    return updateFacets;
+  };
+
+  /**
+   * Generate facet sections state
+   *
+   */
+  const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
+  const facetStates = addFacetValues(displayFacets);
+  const updateState = updateFacetState(facetStates);
+  const facetSections = arrangeBySections(updateState);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FacetFilterView.default, _extends({}, props, {
+    sideBarSections: facetSections
+  })));
+};
+const mapStateToProps = state => ({
+  filterState: state.statusReducer.filterState
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(FacetFilterController);
+exports.default = _default;

package/dist/FacetFilterStyle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => ({
+  sectionSummaryText: {
+    color: '#323232',
+    fontFamily: 'Raleway',
+    fontSize: '15px',
+    fontWeight: 'bold',
+    letterSpacing: '0.25px',
+    marginLeft: '15px',
+    lineHeight: '26px'
+  },
+  sortGroup: {
+    paddingTop: '10px',
+    paddingBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    marginLeft: '-5px',
+    boxShadow: 'inset -10px 2px 10px -7px rgb(50 50 50 / 25%)'
+  },
+  sortGroupItem: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  }
+});
+exports.default = _default;

package/dist/FacetFilterView.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
+var _FacetSectionView = _interopRequireDefault(require("./components/section/FacetSectionView"));
+var _ReduxFacetView = _interopRequireDefault(require("./components/facet/ReduxFacetView"));
+var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable arrow-body-style */
+/* eslint-disable padded-blocks */
+
+const BentoFacetFilter = _ref => {
+  let {
+    sideBarSections,
+    CustomFacetSection,
+    CustomFacetView
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sideBarSections.map((section, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
+    variant: "middle",
+    className: "divider".concat(index)
+  }), /*#__PURE__*/_react.default.createElement(_FacetSectionView.default, {
+    section: section,
+    CustomSection: CustomFacetSection
+  }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
+    facet: facet,
+    CustomView: CustomFacetView
+  }, /*#__PURE__*/_react.default.createElement(_core.List, {
+    className: "List_".concat(facet.label)
+  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+    facet: facet
+  }))))))));
+};
+var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
+exports.default = _default;

package/dist/components/facet/FacetStyle.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = () => ({
+  expansionPanelDetailsRoot: {
+    display: 'block'
+  },
+  expansionPanelsideBarItem: {
+    boxShadow: 'none',
+    borderTop: '1px solid #D2D2D2',
+    '&:last-child': {
+      borderBottom: '1px solid #D2D2D2'
+    },
+    margin: 'auto',
+    position: 'initial',
+    '&:before': {
+      position: 'initial'
+    }
+  },
+  subSectionSummaryText: {
+    marginLeft: '10px',
+    lineHeight: 0,
+    color: '#323232',
+    fontFamily: 'Raleway',
+    fontSize: '13px',
+    fontWeight: 'bold',
+    letterSpacing: '0.25px'
+  },
+  sortGroup: {
+    paddingTop: '10px',
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    marginLeft: '-5px'
+  },
+  sortGroupIcon: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '12px',
+    marginLeft: '16px'
+  },
+  sortGroupItem: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  NonSortGroup: {
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    paddingLeft: '10px'
+  },
+  NonSortGroupItem: {
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  sortGroupItemCounts: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
+  },
+  highlight: {
+    color: '#b2c6d6'
+  },
+  showMore: {
+    textAlign: 'right',
+    paddingRight: '5px',
+    cursor: 'pointer',
+    fontSize: '10px',
+    width: '100%'
+  }
+});
+exports.default = _default;