@bento-core/facet-filter 1.0.1-ins.3 → 1.0.1-popsci.1

package/README.md

@@ -95,6 +95,8 @@ export const facetsConfig = [{
     minLowerBound: 0,  
     maxUpperBound: 100,   
     quantifier: 'Years',
+    CustomLowerUpperBound: CustomLowerUpperBound, // Custom component for displaying lower and upper bounds
+    CustomSliderValue: CustomSliderValue, // Custom component for displaying slider value
 ].
 ```
 1. **apiForFiltering** refers to object key for retrieving name and subjects count from query response (DASHBOARD_QUERY)

package/dist/FacetFilterController.js

@@ -12,13 +12,13 @@ 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 _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; }
 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
@@ -26,28 +26,28 @@ const FacetFilterController = props => {
    * 2. subject state
    */
   const {
-    activeFilters,
+    filterState,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    tooltipText = {}
   } = props;
-  const filterState = {};
-  // console.log(activeFilters);
-  for (const [key, value] of Object.entries(activeFilters)) {
-    if (key !== 'program_names') {
-      filterState[key] = value;
-    }
-  }
   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;
-              item.isChecked = value.indexOf(item.name) > -1;
+            const {
+              facetValues = []
+            } = sideBar;
+            const updateFacetVals = facetValues.map(item => {
+              const facetVal = item[sideBar.field];
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isChecked: value[facetVal] ? value[facetVal] : false
+              });
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -57,9 +57,13 @@ const FacetFilterController = props => {
     } else {
       updateSections.forEach(sideBar => {
         if (sideBar.type === _Types.InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach(item => {
-            item.isChecked = false;
-          });
+          const {
+            facetValues = []
+          } = sideBar;
+          const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
+            isChecked: false
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -104,6 +108,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 = [];
@@ -113,38 +118,13 @@ const FacetFilterController = props => {
           facetValues: []
         });
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const validValues = [];
-            const updateField = data[apiForFiltering].map(item => {
-              const addField = _objectSpread({}, item);
-              addField.name = item[field];
-              validValues.push(addField.name);
-              return addField;
-            });
-            /**
-             * Check if there are orphen filter values and add them to the facet values
-             */
-            if (filterState !== undefined) {
-              const facetFilter = filterState[facet.datafield];
-              if (facetFilter) {
-                facetFilter.forEach(item => {
-                  if (validValues.indexOf(item) === -1) {
-                    const tmp = {};
-                    tmp.group = item;
-                    tmp.name = item;
-                    tmp.subjects = 0;
-                    updateField.push(tmp);
-                  }
-                });
-              }
-            }
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values

package/dist/components/facet/FacetView.js

@@ -31,7 +31,7 @@ const FacetView = _ref => {
     autoComplete,
     upload
   } = _ref;
-  const [expand, setExpand] = (0, _react.useState)(true);
+  const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
 
   /**

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

@@ -37,14 +37,15 @@ const CheckBoxView = _ref => {
   const {
     field = 'group',
     count = 'subjects',
-    customCount = text => "(".concat(text, ")")
+    customCount = text => "(".concat(text, ")"),
+    defaultValue = ''
   } = facet;
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
-  const name = checkboxItem[field] || 'N/A';
+  const name = checkboxItem[field] || defaultValue || 'N/A';
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
+      name: checkboxItem[field],
       datafield: datafield,
       isChecked: !isChecked
     };
@@ -90,6 +91,9 @@ const CheckBoxView = _ref => {
     color: "secondary",
     classes: {
       root: classes.checkboxRoot
+    },
+    inputProps: {
+      'aria-label': 'Select'
     }
   }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     id: datafield,

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

@@ -29,7 +29,9 @@ const SliderView = _ref => {
     maxUpperBound,
     quantifier,
     datafield,
-    facetValues
+    facetValues,
+    CustomLowerUpperBound,
+    CustomSliderValue
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
@@ -102,13 +104,24 @@ const SliderView = _ref => {
       thumb: isValid() ? classes.thumb : classes.invalidThumb,
       track: isValid() ? classes.track : classes.invalidTrack
     }
-  })), /*#__PURE__*/_react.default.createElement(_core.Box, {
+  })), typeof CustomLowerUpperBound === 'function' ? CustomLowerUpperBound({
+    minLowerBound,
+    maxUpperBound,
+    classes
+  }) : /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.lowerBound
   }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
-  }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, maxUpperBound))), typeof CustomSliderValue === 'function' ? CustomSliderValue({
+    sliderValue,
+    minLowerBound,
+    maxUpperBound,
+    isValid,
+    quantifier,
+    classes
+  }) : (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };

package/dist/utils/Sort.js

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

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ins.3",
-  "description": "### Bento core sidebar design:",
+  "version": "1.0.1-popsci.1",
+  "description": "",
   "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": {
-    "type": "git",
-    "url": "git+https://github.com/CBIIT/bento-frontend.git"
-  },
+  "repository": "https://github.com/CBIIT/bento-frontend",
   "publishConfig": {
     "access": "public"
   },
@@ -27,9 +24,5 @@
     "react-redux": "^7.2.1"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/CBIIT/bento-frontend/issues"
-  },
-  "homepage": "https://github.com/CBIIT/bento-frontend#readme"
+  "license": "ISC"
 }

package/src/FacetFilterController.js

@@ -21,30 +21,28 @@ const FacetFilterController = (props) => {
    * 2. subject state
    */
   const {
-    activeFilters,
+    filterState,
     data,
     facetsConfig,
     facetSectionConfig,
+    tooltipText = {},
   } = props;
 
-  const filterState = {};
-  // console.log(activeFilters);
-  for (const [key, value] of Object.entries(activeFilters)) {
-    if (key !== 'program_names') {
-      filterState[key] = value;
-    }
-  }
-
   const updateFacetState = (filterSections) => {
     const updateSections = [...filterSections];
     if (!_.isEmpty(filterState)) {
       for (const [key, value] of Object.entries(filterState)) {
         updateSections.forEach((sideBar) => {
           if (sideBar.type === InputTypes.CHECKBOX && sideBar.datafield === key) {
-            sideBar.facetValues.forEach((item) => {
-              // item.isChecked = value[item.name] ? value[item.name] : false;
-              item.isChecked = value.indexOf(item.name) > -1;
+            const { facetValues = [] } = sideBar;
+            const updateFacetVals = facetValues.map((item) => {
+              const facetVal = item[sideBar.field];
+              return {
+                ...item,
+                isChecked: value[facetVal] ? value[facetVal] : false,
+              };
             });
+            sideBar.facetValues = updateFacetVals;
           }
           if (sideBar.type === InputTypes.SLIDER && sideBar.datafield === key) {
             sideBar.facetValues = value;
@@ -54,9 +52,12 @@ const FacetFilterController = (props) => {
     } else {
       updateSections.forEach((sideBar) => {
         if (sideBar.type === InputTypes.CHECKBOX) {
-          sideBar.facetValues.forEach((item) => {
-            item.isChecked = false;
-          });
+          const { facetValues = [] } = sideBar;
+          const updateFacetVals = facetValues.map((item) => ({
+            ...item,
+            isChecked: false,
+          }));
+          sideBar.facetValues = updateFacetVals;
         }
         /**
          * set default value for slider - on clear all filter
@@ -92,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 = [];
@@ -99,38 +101,13 @@ const FacetFilterController = (props) => {
       facets.forEach((facet) => {
         const updateFacet = { ...facet, facetValues: [] };
         const {
-          field,
           ApiLowerBoundName,
           ApiUpperBoundName,
           apiForFiltering,
         } = updateFacet;
         if (data[apiForFiltering]) {
           if (Array.isArray(data[apiForFiltering])) {
-            const validValues = [];
-            const updateField = data[apiForFiltering].map((item) => {
-              const addField = { ...item };
-              addField.name = item[field];
-              validValues.push(addField.name);
-              return addField;
-            });
-            /**
-             * Check if there are orphen filter values and add them to the facet values
-             */
-            if (filterState !== undefined) {
-              const facetFilter = filterState[facet.datafield];
-              if (facetFilter) {
-                facetFilter.forEach((item) => {
-                  if (validValues.indexOf(item) === -1) {
-                    const tmp = {};
-                    tmp.group = item;
-                    tmp.name = item;
-                    tmp.subjects = 0;
-                    updateField.push(tmp);
-                  }
-                });
-              }
-            }
-            updateFacet.facetValues = updateField;
+            updateFacet.facetValues = data[apiForFiltering];
           }
           /**
           * add object to facet values

package/src/components/facet/FacetView.js

@@ -22,7 +22,7 @@ const FacetView = ({
   autoComplete,
   upload,
 }) => {
-  const [expand, setExpand] = useState(true);
+  const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
 
   /**

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

@@ -41,16 +41,17 @@ const CheckBoxView = ({
     field = 'group',
     count = 'subjects',
     customCount = (text) => `(${text})`,
+    defaultValue = '',
   } = facet;
 
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(/\ /g, '_');
 
-  const name = checkboxItem[field] || 'N/A';
+  const name = checkboxItem[field] || defaultValue || 'N/A';
 
   const handleToggle = () => {
     const toggleCheckBoxItem = {
-      name: name,
+      name: checkboxItem[field],
       datafield: datafield,
       isChecked: !isChecked,
     };
@@ -102,6 +103,7 @@ const CheckBoxView = ({
           disableRipple
           color="secondary"
           classes={{ root: classes.checkboxRoot }}
+          inputProps={{ 'aria-label': 'Select' }}
         />
         { tooltip ? (
           <Tooltip id={datafield} title={tooltip}>

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

@@ -14,7 +14,15 @@ const SliderView = ({
   onSliderToggle,
   filterState,
 }) => {
-  const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
+  const {
+    minLowerBound,
+    maxUpperBound,
+    quantifier,
+    datafield,
+    facetValues,
+    CustomLowerUpperBound,
+    CustomSliderValue,
+  } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
@@ -99,24 +107,26 @@ const SliderView = ({
             }}
           />
         </div>
-        <Box className={classes.lowerUpperBound}>
-          <Typography className={classes.lowerBound}>
-            {minLowerBound}
-          </Typography>
-          <Typography className={classes.upperBound}>
-            {maxUpperBound}
-          </Typography>
-        </Box>
+        {typeof CustomLowerUpperBound === 'function' ? (
+          CustomLowerUpperBound({ minLowerBound, maxUpperBound, classes })
+        ) : (
+          <Box className={classes.lowerUpperBound}>
+            <Typography className={classes.lowerBound}>
+              {minLowerBound}
+            </Typography>
+            <Typography className={classes.upperBound}>
+              {maxUpperBound}
+            </Typography>
+          </Box>
+        )}
       </div>
       {/* Change to red if invalid range */}
-      {
-        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
-        && (
-          <Typography
-            className={isValid()
-              ? classes.sliderText
-              : classes.invalidSliderText}
-          >
+      {typeof CustomSliderValue === 'function' ? (
+        CustomSliderValue({
+          sliderValue, minLowerBound, maxUpperBound, isValid, quantifier, classes })
+      ) : (
+        (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && (
+          <Typography className={isValid() ? classes.sliderText : classes.invalidSliderText}>
             {sliderValue[0]}
             {' - '}
             {sliderValue[1]}
@@ -124,7 +134,7 @@ const SliderView = ({
             {quantifier}
           </Typography>
         )
-      }
+      )}
     </>
   );
 };

package/src/utils/Sort.js

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