@bento-core/facet-filter 1.0.1-icdc.6 → 1.0.1-ins.0

package/README.md

@@ -72,17 +72,12 @@ import FacetFilter from 'bento-core';
 ```
 import { InputTypes } from 'bento-core';
 
-// fields for labelds and counts
-const GROUP = 'group'; // access labels
-const COUNT = 'subjects'; // access count value
-
 export const facetsConfig = [{ 
   section: CASES,
   label: 'Program', 
   apiForFiltering: 'filterSubjectCountByProgram', 
   datafield: 'programs', 
-  field: GROUP,
-  count: COUNT,
+  field: GROUP, 
   type: InputTypes.CHECKBOX, 
   sort_type: sortType.ALPHABET,
   show: true, 
@@ -270,29 +265,11 @@ const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
 ```
 // response 
 // filterCaseCountByProgram: [{group: "COP", subjects: 301}]
-
-// facet = { 
-//  section: CASES,
-//  label: 'Program', 
-//  apiForFiltering: 'filterSubjectCountByProgram', 
-//  datafield: 'programs', 
-//  field: GROUP,
-//  count: COUNT,
-//  type: InputTypes.CHECKBOX, 
-//  sort_type: sortType.ALPHABET,
-//  show: true, 
-//  customCount = (text) => `(${text})`,
-// }
-
-const {
-  field = 'group',
-  count = 'subjects',
-  customCount = (text) => `(${text})`,
-} = facet;
 const {
-  isChecked = false,
-  index,
-  section,
+  name,
+  customName,
+  subjects,
+  customSubjects,
   tooltip,
 } = checkboxItem;
 

package/dist/FacetFilterView.js

@@ -17,8 +17,7 @@ const BentoFacetFilter = _ref => {
   let {
     sideBarSections,
     CustomFacetSection,
-    CustomFacetView,
-    enableClearSection
+    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",
@@ -28,8 +27,7 @@ const BentoFacetFilter = _ref => {
     CustomSection: CustomFacetSection
   }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
     facet: facet,
-    CustomView: CustomFacetView,
-    enableClearSection: enableClearSection
+    CustomView: CustomFacetView
   }))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);

package/dist/components/facet/FacetStyle.js

@@ -20,13 +20,6 @@ var _default = () => ({
       position: 'initial'
     }
   },
-  subSectionSummaryTextWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    paddingRight: '15px'
-  },
   subSectionSummaryText: {
     marginLeft: '10px',
     lineHeight: 0,
@@ -41,26 +34,21 @@ var _default = () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    // marginLeft: '-5px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-around'
+    marginLeft: '-5px'
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px'
-    // marginRight: '12px',
-    // marginLeft: '16px',
+    fontSize: '10px',
+    marginRight: '12px',
+    marginLeft: '16px'
   },
-
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px'
-    // marginRight: '32px',
+    fontSize: '10px',
+    marginRight: '32px'
   },
-
   NonSortGroup: {
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
@@ -75,12 +63,11 @@ var _default = () => ({
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px'
-    // float: 'right',
-    // marginRight: '10px',
-    // marginTop: '5px',
+    fontSize: '10px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
   },
-
   highlight: {
     color: '#b2c6d6'
   },

package/dist/components/facet/FacetView.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
 var _Types = require("../inputs/Types");
 var _FacetStyle = _interopRequireDefault(require("./FacetStyle"));
@@ -27,7 +25,6 @@ const FacetView = _ref => {
   let {
     classes,
     facet,
-    enableClearSection,
     onClearFacetSection,
     onClearSliderSection,
     CustomView,
@@ -38,8 +35,8 @@ const FacetView = _ref => {
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-   * expand section incase of active local search
-   */
+  * expand section incase of active local search
+  */
   (0, _react.useEffect)(() => {
     if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
       setExpand(true);
@@ -78,25 +75,14 @@ const FacetView = _ref => {
     },
     id: facet.section
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
-    clearFacetSectionValues: onClearSection,
-    hasSelections: selectedItems.length,
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
-  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, !enableClearSection ? /*#__PURE__*/_react.default.createElement("div", {
-    id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
-    className: (0, _clsx.default)(classes.subSectionSummaryText, {
-      ["activeFacet".concat(facet.section)]: isActiveFacet
-    })
-  }, facet.label) : /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.subSectionSummaryTextWrapper
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, /*#__PURE__*/_react.default.createElement("div", {
     id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label), selectedItems.length ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: onClearSection
-  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, null)) : null)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem

package/dist/components/facet/ReduxFacetView.js

@@ -19,7 +19,6 @@ const mapStateToProps = state => {
   };
 };
 const mapDispatchToProps = dispatch => ({
-  onToggle: facet => dispatch((0, _Actions.toggleCheckBox)(facet)),
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
   },

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
-var _clsx = _interopRequireDefault(require("clsx"));
 var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
@@ -64,9 +63,9 @@ const SliderView = _ref => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sliderRoot
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.minMaxInputs, 'minMaxInputs')
+    className: classes.minMaxInputs
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.minValue, 'min_input_box')
+    className: classes.minValue
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.minInputLabel
   }, "Min:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
@@ -77,7 +76,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MIN,
     onInputChange: handleChangeCommittedSlider
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.maxValue, 'max_input_box')
+    className: classes.maxValue
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.maxInputLabel
   }, "Max:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
@@ -88,7 +87,7 @@ const SliderView = _ref => {
     type: _Types.silderTypes.INPUT_MAX,
     onInputChange: handleChangeCommittedSlider
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.slider, 'slider')
+    className: classes.slider
   }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
     disableSwap: true,
     getAriaValueText: valuetext,

package/dist/components/summary/AccordionSummaryView.js

@@ -11,7 +11,6 @@ var _AccordionSummaryStyle = _interopRequireDefault(require("./AccordionSummaryS
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Summary = (0, _core.withStyles)({
   root: {
-    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,

package/dist/utils/Sort.js

@@ -74,7 +74,7 @@ const sortBySection = _ref => {
   /**
    * Display checked item always on top
    */
-  const sortedValues = sortByCheckedItem([...sortfacetValues]);
-  return sortedValues;
+  // const sortedValues = sortByCheckedItem([...sortfacetValues]);
+  return sortfacetValues;
 };
 exports.sortBySection = sortBySection;

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-icdc.6",
-  "description": "",
+  "version": "1.0.1-ins.0",
+  "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {
     "build": "npm run lint && cross-env-shell 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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CBIIT/bento-frontend.git"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -24,5 +27,9 @@
     "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC"
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/CBIIT/bento-frontend/issues"
+  },
+  "homepage": "https://github.com/CBIIT/bento-frontend#readme"
 }

package/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,27 +13,30 @@ const BentoFacetFilter = ({
   sideBarSections,
   CustomFacetSection,
   CustomFacetView,
-  enableClearSection,
 }) => {
   return (
     <>
-      {sideBarSections.map((section, index) => (
-        <>
-          <Divider variant="middle" className={`divider${index}`} />
-          <FacetSectionView
-            section={section}
-            CustomSection={CustomFacetSection}
-          >
-            {section.items.map((facet) => (
-              <FacetView
-                facet={facet}
-                CustomView={CustomFacetView}
-                enableClearSection={enableClearSection}
-              />
-            ))}
-          </FacetSectionView>
-        </>
-      ))}
+      {
+        sideBarSections.map((section, index) => (
+          <>
+            <Divider
+              variant="middle"
+              className={`divider${index}`}
+            />
+            <FacetSectionView
+              section={section}
+              CustomSection={CustomFacetSection}
+            >
+              {section.items.map((facet) => (
+                <FacetView
+                  facet={facet}
+                  CustomView={CustomFacetView}
+                />
+              ))}
+            </FacetSectionView>
+          </>
+        ))
+      }
     </>
   );
 };

package/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,
@@ -35,23 +28,20 @@ export default () => ({
     marginBottom: '5px',
     borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
-    // marginLeft: '-5px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-around',
+    marginLeft: '-5px',
   },
   sortGroupIcon: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    // marginRight: '12px',
-    // marginLeft: '16px',
+    marginRight: '12px',
+    marginLeft: '16px',
   },
   sortGroupItem: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    // marginRight: '32px',
+    marginRight: '32px',
   },
   NonSortGroup: {
     marginBottom: '5px',
@@ -68,9 +58,9 @@ export default () => ({
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    // float: 'right',
-    // marginRight: '10px',
-    // marginTop: '5px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px',
   },
   highlight: {
     color: '#b2c6d6',

package/src/components/facet/FacetView.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Accordion, List, withStyles, Icon,
+  Accordion,
+  List,
+  withStyles,
+  Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import IconButton from '@material-ui/core/IconButton';
 import CustomAccordionSummary from '../summary/AccordionSummaryView';
 import { InputTypes } from '../inputs/Types';
 import styles from './FacetStyle';
@@ -15,7 +16,6 @@ import clearIcon from './assets/clearIcon.svg';
 const FacetView = ({
   classes,
   facet,
-  enableClearSection,
   onClearFacetSection,
   onClearSliderSection,
   CustomView,
@@ -26,13 +26,11 @@ const FacetView = ({
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-   * expand section incase of active local search
-   */
+  * expand section incase of active local search
+  */
   useEffect(() => {
-    if (
-      (autoComplete && autoComplete.length > 0)
-      || (upload && upload.length > 0)
-    ) {
+    if ((autoComplete && autoComplete.length > 0)
+      || (upload && upload.length > 0)) {
       setExpand(true);
     }
   }, [autoComplete, upload]);
@@ -59,7 +57,6 @@ const FacetView = ({
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
   const limitCheckBoxCount = facet?.showCheckboxCount || 5;
-
   return (
     <>
       <Accordion
@@ -71,103 +68,119 @@ const FacetView = ({
         }}
         id={facet.section}
       >
-        {CustomView ? (
+        { CustomView ? (
           <CustomView
-            clearFacetSectionValues={onClearSection}
-            hasSelections={selectedItems.length}
             facet={facet}
             facetClasses={
-              isActiveFacet
-                ? `activeFacet${facet.section}`
-                : `inactiveFacet${facet.section}`
+            isActiveFacet ? `activeFacet${facet.section}`
+              : `inactiveFacet${facet.section}`
             }
           />
         ) : (
           <CustomAccordionSummary>
-            {!enableClearSection ? (
-              <div
-                id={`filterGroup_ ${facet.datafield}
-                ${facet.label}`}
-                className={clsx(classes.subSectionSummaryText, {
-                  [`activeFacet${facet.section}`]: isActiveFacet,
-                })}
-              >
-                {facet.label}
-              </div>
-            ) : (
-              <div className={classes.subSectionSummaryTextWrapper}>
-                <div
-                  id={`filterGroup_ ${facet.datafield}
-                ${facet.label}`}
-                  className={clsx(classes.subSectionSummaryText, {
-                    [`activeFacet${facet.section}`]: isActiveFacet,
-                  })}
-                >
-                  {facet.label}
-                </div>
-                {selectedItems.length ? (
-                  <IconButton onClick={onClearSection}>
-                    <RefreshIcon />
-                  </IconButton>
-                ) : null}
-              </div>
-            )}
+            <div
+              id={
+                `filterGroup_ ${facet.datafield}
+                ${facet.label}`
+              }
+              className={clsx(classes.subSectionSummaryText, {
+                [`activeFacet${facet.section}`]: isActiveFacet,
+              })}
+            >
+              {facet.label}
+            </div>
           </CustomAccordionSummary>
         )}
-        {(facet.type === InputTypes.SLIDER || facetValues.length === 0) && (
+        {
+          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
+          && (
           <div className={classes.NonSortGroup}>
-            <span className={classes.NonSortGroupItem}>
+            <span
+              className={classes.NonSortGroupItem}
+            >
               No data for this field
             </span>
           </div>
-        )}
-        {(facet.type === InputTypes.SLIDER || facetValues.length > 0) && (
+          )
+        }
+        {
+          (facet.type === InputTypes.SLIDER || facetValues.length > 0)
+          && (
           <div className={classes.sortGroup}>
             <span className={classes.sortGroupIcon}>
-              <Icon style={{ fontSize: 10 }} onClick={onClearSection}>
-                <img src={clearIcon} height={12} width={12} alt="clear-icon" />
+              <Icon
+                style={{ fontSize: 10 }}
+                onClick={onClearSection}
+              >
+                <img
+                  src={clearIcon}
+                  height={12}
+                  width={12}
+                  alt="clear-icon"
+                />
               </Icon>
             </span>
-            {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={clsx(classes.sortGroupItemCounts, {
-                    [classes.highlight]: sortBy === sortType.NUMERIC,
-                  })}
-                  onClick={() => {
-                    onSortFacet(sortType.NUMERIC);
-                  }}
-                >
-                  Sort by count
-                </span>
-              </>
-            )}
+            { (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={
+                    clsx(classes.sortGroupItemCounts, {
+                      [classes.highlight]: sortBy === sortType.NUMERIC,
+                    })
+                  }
+              onClick={() => {
+                onSortFacet(sortType.NUMERIC);
+              }}
+            >
+              Sort by count
+            </span>
+          </>
+          )}
           </div>
-        )}
-        {expand && <FilterItems facet={facet} sortBy={sortBy} />}
+          )
+}
+        {(expand)
+          && (
+          <FilterItems
+            facet={facet}
+            sortBy={sortBy}
+          />
+          )}
       </Accordion>
-      {!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0 && (
-        <>
-          <List id="filter_Items">
-            <FilterItems facet={displayFacet} />
-          </List>
-        </>
-      )}
-      {!expand && selectedItems.length > limitCheckBoxCount && (
-        <div className={classes.showMore} onClick={onExpandFacet}>
-          ...expand to see all selections
-        </div>
-      )}
+      {
+        (!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0) && (
+          <>
+            <List id="filter_Items">
+              <FilterItems
+                facet={displayFacet}
+              />
+            </List>
+          </>
+        )
+      }
+      {
+        (!expand && selectedItems.length > limitCheckBoxCount) && (
+          <div
+            className={classes.showMore}
+            onClick={onExpandFacet}
+          >
+            ...expand to see all selections
+          </div>
+        )
+      }
     </>
   );
 };

package/src/components/facet/ReduxFacetView.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import {
-  clearFacetSection,
-  clearSliderSection,
-  toggleCheckBox,
-} from '../../store/actions/Actions';
+import { clearFacetSection, clearSliderSection } from '../../store/actions/Actions';
 import FacetView from './FacetView';
 
-const ReduxFacetView = (props) => <FacetView {...props} />;
+const ReduxFacetView = ((props) => <FacetView {...props} />);
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,
@@ -16,13 +12,8 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  onToggle: (facet) => dispatch(toggleCheckBox(facet)),
-  onClearFacetSection: (facet) => {
-    dispatch(clearFacetSection(facet));
-  },
-  onClearSliderSection: (facet) => {
-    dispatch(clearSliderSection(facet));
-  },
+  onClearFacetSection: (facet) => { dispatch(clearFacetSection(facet)); },
+  onClearSliderSection: (facet) => { dispatch(clearSliderSection(facet)); },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxFacetView);

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

@@ -20,8 +20,7 @@ import {
 } from '@material-ui/core';
 import clsx from 'clsx';
 import {
-  CheckBox as CheckBoxIcon,
-  CheckBoxOutlineBlank as CheckBoxBlankIcon,
+  CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
 import styles from './CheckboxStyle';
 
@@ -32,7 +31,12 @@ const CheckBoxView = ({
   onToggle,
   facet,
 }) => {
-  const { isChecked = false, index, section, tooltip } = checkboxItem;
+  const {
+    isChecked = false,
+    index,
+    section,
+    tooltip,
+  } = checkboxItem;
   const {
     field = 'group',
     count = 'subjects',
@@ -61,7 +65,9 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      <Typography className={classes.checkboxName}>{name}</Typography>
+      <Typography className={classes.checkboxName}>
+        {name}
+      </Typography>
     </Box>
   );
 
@@ -73,9 +79,7 @@ const CheckBoxView = ({
         alignItems="flex-start"
         onClick={handleToggle}
         classes={{ gutters: classes.listItemGutters }}
-        className={clsx({
-          [`${checkedSection}Checked${indexType}`]: isChecked,
-        })}
+        className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
@@ -87,21 +91,23 @@ const CheckBoxView = ({
           }
           onClick={handleToggle}
           checked={isChecked}
-          checkedIcon={
+          checkedIcon={(
             <CheckBoxIcon
               style={{
                 fontSize: 18,
               }}
               className={`${checkedSection}CheckedIcon`}
             />
-          }
+          )}
           disableRipple
           color="secondary"
           classes={{ root: classes.checkboxRoot }}
         />
-        {tooltip ? (
+        { tooltip ? (
           <Tooltip id={datafield} title={tooltip}>
-            <div className={datafield}>{name}</div>
+            <div className={datafield}>
+              {name}
+            </div>
           </Tooltip>
         ) : (
           <LabelComponent />

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { toggleCheckBox } from '../../../store/actions/Actions';
 import CheckboxView from './CheckboxView';
 
-const ReduxCheckbox = (props) => <CheckboxView {...props} />;
+const ReduxCheckbox = ((props) => <CheckboxView {...props} />);
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,

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

@@ -4,7 +4,6 @@
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
-import clsx from 'clsx';
 import styles from './SliderStyle';
 import { silderTypes } from '../Types';
 import InputMinMaxView from './InputMinMaxView';
@@ -54,8 +53,8 @@ const SliderView = ({
   return (
     <>
       <div className={classes.sliderRoot}>
-        <div className={clsx(classes.minMaxInputs, 'minMaxInputs')}>
-          <div className={clsx(classes.minValue, 'min_input_box')}>
+        <div className={classes.minMaxInputs}>
+          <div className={classes.minValue}>
             <Typography className={classes.minInputLabel}>
               Min:
             </Typography>
@@ -68,7 +67,7 @@ const SliderView = ({
               onInputChange={handleChangeCommittedSlider}
             />
           </div>
-          <div className={clsx(classes.maxValue, 'max_input_box')}>
+          <div className={classes.maxValue}>
             <Typography className={classes.maxInputLabel}>
               Max:
             </Typography>
@@ -82,7 +81,7 @@ const SliderView = ({
             />
           </div>
         </div>
-        <div className={clsx(classes.slider, 'slider')}>
+        <div className={classes.slider}>
           {/* Change to red if invalid range */}
           <Slider
             disableSwap

package/src/components/summary/AccordionSummaryView.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import { AccordionSummary, withStyles } from '@material-ui/core';
-import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
+import {
+  AccordionSummary,
+  withStyles,
+} from '@material-ui/core';
+import {
+  ExpandMore as ExpandMoreIcon,
+} from '@material-ui/icons';
 import style from './AccordionSummaryStyle';
 
 const Summary = withStyles({
   root: {
-    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,
@@ -23,7 +27,10 @@ const Summary = withStyles({
   expanded: {},
 })(AccordionSummary);
 
-const CustomAccordionSummary = ({ children, classes }) => (
+const CustomAccordionSummary = ({
+  children,
+  classes,
+}) => (
   <Summary
     expandIcon={(
       <ExpandMoreIcon

package/src/utils/Sort.js

@@ -72,6 +72,6 @@ export const sortBySection = ({
   /**
    * Display checked item always on top
    */
-  const sortedValues = sortByCheckedItem([...sortfacetValues]);
-  return sortedValues;
+  // const sortedValues = sortByCheckedItem([...sortfacetValues]);
+  return sortfacetValues;
 };