@bento-core/facet-filter 0.2.0 → 0.3.0

package/dist/FacetFilterController.js

@@ -75,10 +75,11 @@ const FacetFilterController = props => {
         } = _ref,
         item = _objectWithoutProperties(_ref, _excluded);
       if (!sideBar[section]) {
+        var _facetSectionConfig$s;
         sideBar[section] = {
           name: section,
           sectionName: section,
-          expandSection: facetSectionConfig[section].isExpanded,
+          expandSection: ((_facetSectionConfig$s = facetSectionConfig[section]) === null || _facetSectionConfig$s === void 0 ? void 0 : _facetSectionConfig$s.isExpanded) || true,
           items: []
         };
       }

package/dist/components/inputs/checkbox/CheckboxView.js

@@ -90,8 +90,11 @@ const CheckBoxView = _ref => {
       root: classes.checkboxRoot
     }
   }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    id: datafield,
     title: tooltip
-  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: datafield
+  }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked

package/dist/components/inputs/slider/SliderView.js

@@ -33,6 +33,12 @@ const SliderView = _ref => {
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
+
+  // Determines whether the lower bound and upper bound values are valid
+  const isValid = () => {
+    const checks = [lowerBoundValue <= upperBoundValue, lowerBoundValue >= minLowerBound, upperBoundValue <= maxUpperBound];
+    return checks.every(condition => condition === true);
+  };
   const handleChangeCommittedSlider = value => {
     if (!value.includes('')) {
       onSliderToggle(_objectSpread({
@@ -93,8 +99,8 @@ const SliderView = _ref => {
     max: maxUpperBound,
     classes: {
       rail: classes.rail,
-      thumb: lowerBoundValue <= upperBoundValue ? classes.thumb : classes.invalidThumb,
-      track: lowerBoundValue <= upperBoundValue ? classes.track : classes.invalidTrack
+      thumb: isValid() ? classes.thumb : classes.invalidThumb,
+      track: isValid() ? classes.track : classes.invalidTrack
     }
   })), /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
@@ -103,7 +109,7 @@ const SliderView = _ref => {
   }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
   }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    className: lowerBoundValue <= upperBoundValue ? classes.sliderText : classes.invalidSliderText
+    className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };
 var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);

package/dist/components/reset/ReduxClearAllBtn.js

@@ -9,18 +9,9 @@ var _reactRedux = require("react-redux");
 var _Actions = require("../../store/actions/Actions");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable block-scoped-var */
-/* eslint-disable no-plusplus */
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-shadow */
-/* eslint-disable no-var */
-/* eslint-disable vars-on-top */
-/* eslint-disable block-spacing */
-/* eslint-disable no-param-reassign */
-
 const ClearAllFiltersBtn = _ref => {
   let {
-    CustomClearAllBtn,
+    Component,
     onClearAllFilters,
     activeFilters = {}
   } = _ref;
@@ -29,30 +20,28 @@ const ClearAllFiltersBtn = _ref => {
   (0, _react.useEffect)(() => {
     if (activeFilters) {
       const filters = Object.keys(activeFilters).reduce((count, key) => {
+        // eslint-disable-next-line no-param-reassign
         if (activeFilters[key].length > 0) {
           count += 1;
         }
         return count;
       }, 0);
-      if (!disable && filters === 0) {
+      if (filters === 0) {
         setDisable(true);
       } else {
         setDisable(false);
       }
     }
   }, [activeFilters]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CustomClearAllBtn, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, {
     onClearAllFilters: dispatchClearAllFilters,
     disable: disable
   }));
 };
-const mapStateToProps = state => ({
-  filterState: state.statusReducer.filterState
-});
 const mapDispatchToProps = dispatch => ({
   onClearAllFilters: () => {
     dispatch((0, _Actions.clearAllFilters)());
   }
 });
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ClearAllFiltersBtn);
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(ClearAllFiltersBtn);
 exports.default = _default;

package/dist/generator/component.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateFacetSectionView = exports.generateClearAllFilterBtn = void 0;
+exports.generateFacetSectionView = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FacetSectionView = _interopRequireDefault(require("../components/section/FacetSectionView"));
-var _ReduxClearAllBtn = _interopRequireDefault(require("../components/reset/ReduxClearAllBtn"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable no-multiple-empty-lines */
 /* eslint-disable no-trailing-spaces */
@@ -19,18 +18,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable no-multiple-empty-lines */
 /* eslint-disable semi */
 
-/**
- * accepts button as component
- * @param {*} CustomBtn
- * 
- */
-const generateClearAllFilterBtn = (CustomBtn, activeFilters) => {
-  return /*#__PURE__*/_react.default.createElement(_ReduxClearAllBtn.default, {
-    activeFilters: activeFilters,
-    CustomClearAllBtn: props => /*#__PURE__*/_react.default.createElement(CustomBtn, props)
-  });
-};
-exports.generateClearAllFilterBtn = generateClearAllFilterBtn;
 const generateFacetSectionView = props => {
   return /*#__PURE__*/_react.default.createElement(_FacetSectionView.default, props);
 };

package/dist/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ClearAllFiltersBtn", {
+  enumerable: true,
+  get: function get() {
+    return _ReduxClearAllBtn.default;
+  }
+});
 Object.defineProperty(exports, "FacetFilter", {
   enumerable: true,
   get: function get() {
@@ -39,12 +45,6 @@ Object.defineProperty(exports, "clearSliderSection", {
     return _Actions.clearSliderSection;
   }
 });
-Object.defineProperty(exports, "generateClearAllFilterBtn", {
-  enumerable: true,
-  get: function get() {
-    return _component.generateClearAllFilterBtn;
-  }
-});
 Object.defineProperty(exports, "generateFacetSectionView", {
   enumerable: true,
   get: function get() {
@@ -130,4 +130,5 @@ var _Types = require("./components/inputs/Types");
 var _SideBarReducer = require("./store/reducers/SideBarReducer");
 var _Actions = require("./store/actions/Actions");
 var _component = require("./generator/component");
+var _ReduxClearAllBtn = _interopRequireDefault(require("./components/reset/ReduxClearAllBtn"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
-    "build": "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 && 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"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.4"
+    "lodash": "^4.17.20"
   },
   "peerDependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.9.1",
+    "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
     "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
   "license": "ISC",
-  "gitHead": "10ee9deeae6dd0f139ecb7a70afc4c96a4e33d74"
+  "gitHead": "9b75062e5092b403db02b167870ea4331361c26f"
 }

package/src/FacetFilterController.js

@@ -68,7 +68,7 @@ const FacetFilterController = (props) => {
         sideBar[section] = {
           name: section,
           sectionName: section,
-          expandSection: facetSectionConfig[section].isExpanded,
+          expandSection: facetSectionConfig[section]?.isExpanded || true,
           items: [],
         };
       }

package/src/components/facet/FacetView.js

@@ -1,6 +1,3 @@
-/* eslint-disable react/jsx-wrap-multilines */
-/* eslint-disable react/jsx-indent */
-/* eslint-disable react/jsx-closing-tag-location */
 import React, { useEffect, useState } from 'react';
 import {
   Accordion,
@@ -96,13 +93,15 @@ const FacetView = ({
         )}
         {
           (facet.type === InputTypes.SLIDER || facetValues.length === 0)
-          && (<div className={classes.NonSortGroup}>
-              <span
-                className={classes.NonSortGroupItem}
-              >
-                No data for this field
-              </span>
-          </div>)
+          && (
+          <div className={classes.NonSortGroup}>
+            <span
+              className={classes.NonSortGroupItem}
+            >
+              No data for this field
+            </span>
+          </div>
+          )
         }
         {
           (facet.type === InputTypes.SLIDER || facetValues.length > 0)
@@ -121,35 +120,38 @@ const FacetView = ({
                 />
               </Icon>
             </span>
-        { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
-          && (<>
-                <span
-                  className={
+            { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
+          && (
+          <>
+            <span
+              className={
                     clsx(classes.sortGroupItem, {
                       [classes.highlight]: sortBy === sortType.ALPHABET,
                     })
                   }
-                  onClick={() => {
-                    onSortFacet(sortType.ALPHABET);
-                  }}
-                >
-                  Sort alphabetically
-                </span>
-                <span
-                  className={
+              onClick={() => {
+                onSortFacet(sortType.ALPHABET);
+              }}
+            >
+              Sort alphabetically
+            </span>
+            <span
+              className={
                     clsx(classes.sortGroupItemCounts, {
                       [classes.highlight]: sortBy === sortType.NUMERIC,
                     })
                   }
-                  onClick={() => {
-                    onSortFacet(sortType.NUMERIC);
-                  }}
-                >
-                  Sort by count
-                </span>
-            </>)}
+              onClick={() => {
+                onSortFacet(sortType.NUMERIC);
+              }}
+            >
+              Sort by count
+            </span>
+          </>
+          )}
           </div>
-        )}
+          )
+}
         <FilterItems
           facet={facet}
           sortBy={sortBy}

package/src/components/inputs/checkbox/CheckboxView.js

@@ -94,8 +94,10 @@ const CheckBoxView = ({
           classes={{ root: classes.checkboxRoot }}
         />
         { tooltip ? (
-          <Tooltip title={tooltip}>
-            <LabelComponent />
+          <Tooltip id={datafield} title={tooltip}>
+            <div className={datafield}>
+              <LabelComponent />
+            </div>
           </Tooltip>
         ) : (
           <LabelComponent />

package/src/components/inputs/slider/SliderView.js

@@ -18,6 +18,16 @@ const SliderView = ({
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
+  // Determines whether the lower bound and upper bound values are valid
+  const isValid = () => {
+    const checks = [
+      lowerBoundValue <= upperBoundValue,
+      lowerBoundValue >= minLowerBound,
+      upperBoundValue <= maxUpperBound,
+    ];
+
+    return checks.every((condition) => condition === true);
+  };
   const handleChangeCommittedSlider = (value) => {
     if (!value.includes('')) {
       onSliderToggle({ sliderValue: value, ...facet });
@@ -84,8 +94,8 @@ const SliderView = ({
             max={maxUpperBound}
             classes={{
               rail: classes.rail,
-              thumb: lowerBoundValue <= upperBoundValue ? classes.thumb : classes.invalidThumb,
-              track: lowerBoundValue <= upperBoundValue ? classes.track : classes.invalidTrack,
+              thumb: isValid() ? classes.thumb : classes.invalidThumb,
+              track: isValid() ? classes.track : classes.invalidTrack,
             }}
           />
         </div>
@@ -103,7 +113,7 @@ const SliderView = ({
         (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
         && (
           <Typography
-            className={lowerBoundValue <= upperBoundValue
+            className={isValid()
               ? classes.sliderText
               : classes.invalidSliderText}
           >

package/src/components/reset/ReduxClearAllBtn.js

@@ -1,17 +1,9 @@
-/* eslint-disable block-scoped-var */
-/* eslint-disable no-plusplus */
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-shadow */
-/* eslint-disable no-var */
-/* eslint-disable vars-on-top */
-/* eslint-disable block-spacing */
-/* eslint-disable no-param-reassign */
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { clearAllFilters } from '../../store/actions/Actions';
 
 const ClearAllFiltersBtn = ({
-  CustomClearAllBtn,
+  Component,
   onClearAllFilters,
   activeFilters = {},
 }) => {
@@ -21,10 +13,11 @@ const ClearAllFiltersBtn = ({
   useEffect(() => {
     if (activeFilters) {
       const filters = Object.keys(activeFilters).reduce((count, key) => {
-        if (activeFilters[key].length > 0) { count += 1;}
+        // eslint-disable-next-line no-param-reassign
+        if (activeFilters[key].length > 0) { count += 1; }
         return count;
       }, 0);
-      if (!disable && filters === 0) {
+      if (filters === 0) {
         setDisable(true);
       } else {
         setDisable(false);
@@ -34,7 +27,7 @@ const ClearAllFiltersBtn = ({
 
   return (
     <>
-      <CustomClearAllBtn
+      <Component
         onClearAllFilters={dispatchClearAllFilters}
         disable={disable}
       />
@@ -42,12 +35,8 @@ const ClearAllFiltersBtn = ({
   );
 };
 
-const mapStateToProps = (state) => ({
-  filterState: state.statusReducer.filterState,
-});
-
 const mapDispatchToProps = (dispatch) => ({
-  onClearAllFilters: () => {dispatch(clearAllFilters());},
+  onClearAllFilters: () => { dispatch(clearAllFilters()); },
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ClearAllFiltersBtn);
+export default connect(null, mapDispatchToProps)(ClearAllFiltersBtn);

package/src/generator/component.js

@@ -11,19 +11,6 @@
 
 import React from 'react';
 import FacetSectionView from '../components/section/FacetSectionView';
-import ClearAllFiltersBtn from '../components/reset/ReduxClearAllBtn';
-
-/**
- * accepts button as component
- * @param {*} CustomBtn
- * 
- */
-export const generateClearAllFilterBtn = (CustomBtn, activeFilters) => {
-  return ( <ClearAllFiltersBtn
-    activeFilters={activeFilters}
-    CustomClearAllBtn={(props) => (<CustomBtn {...props} />)}
-  />);
-};
 
 export const generateFacetSectionView = (props) => {
   return (

package/src/index.js

@@ -24,7 +24,8 @@ export {
   clearAllAndSelectFacet,
 } from './store/actions/Actions';
 export {
-  generateClearAllFilterBtn,
   generateFacetSectionView,
 } from './generator/component';
-
+export {
+  default as ClearAllFiltersBtn,
+} from './components/reset/ReduxClearAllBtn';