@bento-core/query-bar 1.0.1-ccdihub.5 → 1.0.1-icdc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/CheckboxFilter.js +27 -8
  2. package/dist/generators/QueryBarGenerator.js +49 -9
  3. package/dist/generators/config.js +6 -1
  4. package/dist/generators/styles.js +29 -56
  5. package/package.json +1 -1
  6. package/src/components/CheckboxFilter.js +39 -5
  7. package/src/generators/QueryBarGenerator.js +80 -21
  8. package/src/generators/config.js +5 -0
  9. package/src/generators/styles.js +29 -56
package/dist/components/CheckboxFilter.js CHANGED
@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
8
  var _clsx = _interopRequireDefault(require("clsx"));
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ 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); }
11
+ 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; }
10
12
  var _default = _ref => {
11
13
  let {
12
14
  index,
@@ -14,28 +16,45 @@ var _default = _ref => {
14
16
  classes,
15
17
  maxItems,
16
18
  onSectionClick,
17
- onItemClick
19
+ onItemClick,
20
+ displayAllActiveFilters
18
21
  } = _ref;
19
22
  const {
20
23
  items,
21
24
  section
22
25
  } = data;
26
+ const [expand, setExpand] = (0, _react.useState)(false);
27
+ const noOfItems = expand ? items.length : maxItems;
28
+ (0, _react.useEffect)(() => {
29
+ if (items.length <= maxItems && expand) {
30
+ setExpand(!expand);
31
+ }
32
+ }, [items]);
33
+ const clsName = function clsName() {
34
+ let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
35
+ let attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
36
+ return "facetSection".concat(text.replace(/\s+/g, '')).concat(attr);
37
+ };
23
38
  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, ' ', index !== 0 ? /*#__PURE__*/_react.default.createElement("span", {
24
39
  className: classes.operators
25
40
  }, " AND ") : '', /*#__PURE__*/_react.default.createElement("span", {
26
- className: (0, _clsx.default)(classes.filterName, classes["facetSection".concat(section, "Background")]),
41
+ className: (0, _clsx.default)(classes.filterName, classes["".concat(clsName(section, 'Background'))]),
27
42
  onClick: () => onSectionClick(data)
28
43
  }, data.label), ' '), /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
29
44
  className: classes.operators
30
45
  }, items.length === 1 ? 'IS ' : 'IN '), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
31
46
  className: classes.bracketsOpen
32
- }, "("), items.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
33
- className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
47
+ }, "("), items.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
48
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
34
49
  key: idx,
35
50
  onClick: () => onItemClick(data, d)
36
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
37
- className: classes.ellipsis
38
- }, "..."), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
51
+ }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
52
+ className: classes.expandBtn,
53
+ onClick: () => setExpand(!expand)
54
+ }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
55
+ className: classes.collapseBtn,
56
+ onClick: () => setExpand(!expand)
57
+ }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
39
58
  className: classes.bracketsClose
40
59
  }, ")")));
41
60
  };
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.QueryBarGenerator = void 0;
7
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
8
  var _core = require("@material-ui/core");
9
9
  var _facetFilter = require("@bento-core/facet-filter");
10
10
  var _clsx = _interopRequireDefault(require("clsx"));
@@ -12,6 +12,8 @@ var _FilterMap = require("../components/FilterMap");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _config = _interopRequireDefault(require("./config"));
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ 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); }
16
+ 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; }
15
17
  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; }
16
18
  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; }
17
19
  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; }
@@ -27,12 +29,15 @@ const QueryBarGenerator = function QueryBarGenerator() {
27
29
  let uiConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _config.default;
28
30
  const {
29
31
  config,
30
- functions
32
+ functions,
33
+ customStyles = {}
31
34
  } = uiConfig;
32
35
  const {
33
36
  CHECKBOX
34
37
  } = _facetFilter.InputTypes;
38
+ const styles = () => _objectSpread(_objectSpread({}, (0, _styles.default)()), customStyles);
35
39
  const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
40
+ const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean' ? config.displayAllActiveFilters : _config.default.config.displayAllActiveFilters;
36
41
  const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
37
42
  const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
38
43
  const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -40,8 +45,12 @@ const QueryBarGenerator = function QueryBarGenerator() {
40
45
  const resetFacetSection = functions && typeof functions.resetFacetSection === 'function' ? functions.resetFacetSection : _config.default.functions.resetFacetSection;
41
46
  const resetFacetCheckbox = functions && typeof functions.resetFacetCheckbox === 'function' ? functions.resetFacetCheckbox : _config.default.functions.resetFacetCheckbox;
42
47
  const resetFacetSlider = functions && typeof functions.resetFacetSlider === 'function' ? functions.resetFacetSlider : _config.default.functions.resetFacetSlider;
48
+ const clsName = function clsName() {
49
+ let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'filter-section';
50
+ return text.replace(/\s+/g, '-').toLowerCase();
51
+ };
43
52
  return {
44
- QueryBar: (0, _core.withStyles)(_styles.default, {
53
+ QueryBar: (0, _core.withStyles)(styles, {
45
54
  withTheme: true
46
55
  })(props => {
47
56
  const {
@@ -53,6 +62,13 @@ const QueryBarGenerator = function QueryBarGenerator() {
53
62
  autocomplete,
54
63
  upload
55
64
  } = localFind;
65
+ const [expand, setExpand] = (0, _react.useState)(false);
66
+ const noOfItems = expand ? autocomplete.length : maxItems;
67
+ (0, _react.useEffect)(() => {
68
+ if (autocomplete.length <= maxItems && expand) {
69
+ setExpand(!expand);
70
+ }
71
+ }, [autocomplete]);
56
72
 
57
73
  // Remove any sections without checkboxes selected
58
74
  const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -73,8 +89,23 @@ const QueryBarGenerator = function QueryBarGenerator() {
73
89
  itemKeys.splice(itemKeys.indexOf(item), 1);
74
90
  }
75
91
  });
92
+ // return { ...facet, items: itemKeys };
93
+ /**
94
+ * Maintain consistant behavior with facet filter component
95
+ * Display the active filter items based on the count value
96
+ * Display active filter items in query bar only if count is greater than 0
97
+ * behavior similar to filter component
98
+ */
99
+ const displayItems = itemKeys.reduce((accumulator, item) => {
100
+ const itemList = data.filter(d => d.group === item && d.count > 0) || [];
101
+ if (itemList.length > 0) {
102
+ const labels = itemList.map(filter => filter.group);
103
+ accumulator.push(labels);
104
+ }
105
+ return accumulator;
106
+ }, []);
76
107
  return _objectSpread(_objectSpread({}, facet), {}, {
77
- items: itemKeys
108
+ items: displayItems
78
109
  });
79
110
  }).filter(facet => facet.items.length > 0);
80
111
  if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
@@ -97,30 +128,39 @@ const QueryBarGenerator = function QueryBarGenerator() {
97
128
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
98
129
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
99
130
  onClick: clearAutocomplete
100
- }, "Participant ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
131
+ }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
101
132
  className: classes.operators
102
133
  }, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
103
134
  className: classes.bracketsOpen
104
135
  }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
105
136
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
106
137
  onClick: clearUpload
107
- }, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
138
+ }, "INPUT CASE SET"), ' ') : null, autocomplete.slice(0, noOfItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
108
139
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
109
140
  key: idx,
110
141
  onClick: () => deleteAutocompleteItem(d.title)
111
- }, d.title), idx === maxItems - 1 ? null : ' ')), autocomplete.length > maxItems && '...', (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
142
+ }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
143
+ className: classes.expandBtn,
144
+ onClick: () => setExpand(!expand)
145
+ }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
146
+ className: classes.collapseBtn,
147
+ onClick: () => setExpand(!expand)
148
+ }, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
112
149
  className: classes.bracketsClose
113
150
  }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
114
151
  className: classes.operators
115
- }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
152
+ }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement("span", {
153
+ className: clsName(filter.section)
154
+ }, /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
116
155
  index: index,
117
156
  type: filter.type,
118
157
  data: filter,
119
158
  maxItems: maxItems,
159
+ displayAllActiveFilters: displayAllActiveFilters,
120
160
  classes: classes,
121
161
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
122
162
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
123
- }))));
163
+ })))));
124
164
  })
125
165
  };
126
166
  };
package/dist/generators/config.js CHANGED
@@ -12,7 +12,12 @@ var _default = {
12
12
  * The maximum number of items to display in a query bar facet section
13
13
  * @var {number}
14
14
  */
15
- maxItems: 2
15
+ maxItems: 2,
16
+ /**
17
+ * overirdes maxItems to display all the active filter items
18
+ * @var {boolean}
19
+ */
20
+ displayAllActiveFilters: false
16
21
  },
17
22
  /* Component Helper Functions */
18
23
  functions: {
package/dist/generators/styles.js CHANGED
@@ -15,51 +15,46 @@ var _default = () => ({
15
15
  overflowY: 'auto'
16
16
  },
17
17
  queryContainer: {
18
- marginLeft: 5,
18
+ marginLeft: 7,
19
19
  position: 'relative',
20
20
  lineHeight: '2.4em',
21
+ letterSpacing: '0.5px',
21
22
  fontFamily: 'Nunito',
22
23
  fontSize: '14px',
23
24
  color: '#0e3151'
24
25
  },
25
26
  filterName: {
26
27
  textTransform: 'uppercase',
27
- padding: '3px 6px 3px 6px',
28
+ padding: '5px 6px 5px 7px',
28
29
  borderRadius: 4,
29
30
  fontSize: 12,
30
31
  fontWeight: 600,
31
32
  cursor: 'pointer'
32
33
  },
33
34
  filterCheckboxes: {
34
- padding: '3px 6px 3px 6px',
35
- borderRadius: 5,
35
+ padding: '4px 7px 3px 6px',
36
+ borderRadius: 4,
36
37
  fontSize: 12,
37
38
  fontWeight: 600,
38
- border: '0.5px solid #646464',
39
+ border: '0.75px solid #898989',
39
40
  width: 'fit-content',
40
41
  backgroundColor: '#fff',
41
42
  cursor: 'pointer'
42
43
  },
43
44
  bracketsOpen: {
44
- fontSize: 20,
45
- fontFamily: 'Nunito',
46
- color: '#646464',
45
+ fontSize: 18,
46
+ fontFamily: 'Nunito Sans Semibold',
47
+ color: '#787878',
47
48
  marginRight: 3,
48
49
  fontWeight: 600
49
50
  },
50
51
  bracketsClose: {
51
- fontSize: 20,
52
- fontFamily: 'Nunito',
53
- color: '#646464',
52
+ fontSize: 18,
53
+ fontFamily: 'Nunito Sans Semibold',
54
+ color: '#787878',
54
55
  marginLeft: 3,
55
56
  fontWeight: 600
56
57
  },
57
- ellipsis: {
58
- fontFamily: 'Nunito',
59
- fontWeight: 600,
60
- fontSize: 10,
61
- marginLeft: 3
62
- },
63
58
  operators: {
64
59
  color: '#646464',
65
60
  marginLeft: '3px',
@@ -78,32 +73,30 @@ var _default = () => ({
78
73
  borderRadius: '15px',
79
74
  fontFamily: 'Nunito',
80
75
  boxSizing: 'border-box',
81
- backgroundColor: '#646464',
76
+ backgroundColor: '#969696',
82
77
  textTransform: 'capitalize',
83
78
  border: '1px solid #B4B4B4',
84
79
  padding: '1px 5px 0px 6px',
85
80
  '&:hover': {
86
- backgroundColor: '#646464'
81
+ backgroundColor: '#969696'
87
82
  }
88
83
  },
89
84
  divider: {
90
- padding: '0 0 3px 0',
91
- fontSize: '23px',
92
- borderRight: '1px solid #969696',
85
+ borderRight: '2px solid #969696',
93
86
  marginLeft: 7
94
87
  },
95
88
  /* Custom Styling by Project */
96
89
  localFind: {
97
- color: '#7AA6B6'
90
+ color: '#10A075'
98
91
  },
99
92
  localFindBackground: {
100
- backgroundColor: '#E4ECE9'
93
+ backgroundColor: '#C0E9D7'
101
94
  },
102
95
  facetSectionCases: {
103
- color: '#7AA6B6'
96
+ color: '#10A075'
104
97
  },
105
98
  facetSectionCasesBackground: {
106
- backgroundColor: '#E4ECE9'
99
+ backgroundColor: '#C0E9D7'
107
100
  },
108
101
  facetSectionFiles: {
109
102
  color: '#E636E4'
@@ -111,41 +104,21 @@ var _default = () => ({
111
104
  facetSectionFilesBackground: {
112
105
  backgroundColor: '#F5C3F1'
113
106
  },
114
- facetSectionDemographics: {
115
- color: '#7AA6B6'
116
- },
117
- facetSectionDemographicsBackground: {
118
- backgroundColor: '#E4ECE9'
119
- },
120
- facetSectionDiagnosis: {
121
- color: '#7AA6B6'
122
- },
123
- facetSectionDiagnosisBackground: {
124
- backgroundColor: '#E4ECE9'
125
- },
126
107
  facetSectionSamples: {
127
- color: '#7AA6B6'
108
+ color: '#10BEFF'
128
109
  },
129
110
  facetSectionSamplesBackground: {
130
- backgroundColor: '#E4ECE9'
131
- },
132
- facetSectionDatacategory: {
133
- color: '#7AA6B6'
134
- },
135
- facetSectionDatacategoryBackground: {
136
- backgroundColor: '#E4ECE9'
137
- },
138
- facetSectionStudy: {
139
- color: '#7AA6B6'
111
+ backgroundColor: '#C3EAF5'
140
112
  },
141
- facetSectionStudyBackground: {
142
- backgroundColor: '#E4ECE9'
143
- },
144
- facetSectionLibrary: {
145
- color: '#7AA6B6'
113
+ expandBtn: {
114
+ '&:hover': {
115
+ cursor: 'pointer'
116
+ }
146
117
  },
147
- facetSectionLibraryBackground: {
148
- backgroundColor: '#E4ECE9'
118
+ collapseBtn: {
119
+ '&:hover': {
120
+ cursor: 'pointer'
121
+ }
149
122
  }
150
123
  });
151
124
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-ccdihub.5",
3
+ "version": "1.0.1-icdc.1",
4
4
  "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/CheckboxFilter.js CHANGED
@@ -1,11 +1,22 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState } from 'react';
2
2
  import clsx from 'clsx';
3
3
 
4
4
  export default ({
5
5
  index, data, classes, maxItems,
6
6
  onSectionClick, onItemClick,
7
+ displayAllActiveFilters,
7
8
  }) => {
8
9
  const { items, section } = data;
10
+ const [expand, setExpand] = useState(false);
11
+ const noOfItems = expand ? items.length : maxItems;
12
+
13
+ useEffect(() => {
14
+ if (items.length <= maxItems && expand) {
15
+ setExpand(!expand);
16
+ }
17
+ }, [items]);
18
+
19
+ const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
9
20
 
10
21
  return (
11
22
  <span>
@@ -13,7 +24,7 @@ export default ({
13
24
  {' '}
14
25
  {index !== 0 ? <span className={classes.operators}> AND </span> : ''}
15
26
  <span
16
- className={clsx(classes.filterName, classes[`facetSection${section}Background`])}
27
+ className={clsx(classes.filterName, classes[`${clsName(section, 'Background')}`])}
17
28
  onClick={() => onSectionClick(data)}
18
29
  >
19
30
  {data.label}
@@ -26,10 +37,10 @@ export default ({
26
37
  {items.length === 1 ? 'IS ' : 'IN '}
27
38
  </span>
28
39
  {items.length > 1 && <span className={classes.bracketsOpen}>(</span>}
29
- {items.slice(0, maxItems).map((d, idx) => (
40
+ {items.slice(0, noOfItems).map((d, idx) => (
30
41
  <>
31
42
  <span
32
- className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
43
+ className={clsx(classes.filterCheckboxes, classes[clsName(section)])}
33
44
  key={idx}
34
45
  onClick={() => onItemClick(data, d)}
35
46
  >
@@ -38,7 +49,30 @@ export default ({
38
49
  {idx === (maxItems - 1) ? null : ' '}
39
50
  </>
40
51
  ))}
41
- {items.length > maxItems && <span className={classes.ellipsis}>...</span>}
52
+ {items.length > maxItems && (
53
+ <>
54
+ {
55
+ displayAllActiveFilters
56
+ ? (
57
+ <span
58
+ className={classes.expandBtn}
59
+ onClick={() => setExpand(!expand)}
60
+ >
61
+ ...
62
+ </span>
63
+ )
64
+ : '...'
65
+ }
66
+ </>
67
+ )}
68
+ {(expand && items.length > maxItems) && (
69
+ <span
70
+ className={classes.collapseBtn}
71
+ onClick={() => setExpand(!expand)}
72
+ >
73
+ {' LESS'}
74
+ </span>
75
+ )}
42
76
  {items.length > 1 && <span className={classes.bracketsClose}>)</span>}
43
77
  </span>
44
78
  </span>
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useState, useEffect } from 'react';
2
2
  import { withStyles, Button } from '@material-ui/core';
3
3
  import { InputTypes } from '@bento-core/facet-filter';
4
4
  import clsx from 'clsx';
@@ -13,13 +13,20 @@ import DEFAULT_CONFIG from './config';
13
13
  * @returns {object} { QueryBar }
14
14
  */
15
15
  export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
16
- const { config, functions } = uiConfig;
16
+ const { config, functions, customStyles = {} } = uiConfig;
17
17
  const { CHECKBOX } = InputTypes;
18
+ const styles = () => (
19
+ { ...DEFAULT_STYLES(), ...customStyles }
20
+ );
18
21
 
19
22
  const maxItems = config && typeof config.maxItems === 'number'
20
23
  ? config.maxItems
21
24
  : DEFAULT_CONFIG.config.maxItems;
22
25
 
26
+ const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
27
+ ? config.displayAllActiveFilters
28
+ : DEFAULT_CONFIG.config.displayAllActiveFilters;
29
+
23
30
  const clearAll = functions && typeof functions.clearAll === 'function'
24
31
  ? functions.clearAll
25
32
  : DEFAULT_CONFIG.functions.clearAll;
@@ -48,12 +55,23 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
48
55
  ? functions.resetFacetSlider
49
56
  : DEFAULT_CONFIG.functions.resetFacetSlider;
50
57
 
58
+ const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
59
+
51
60
  return {
52
- QueryBar: withStyles(DEFAULT_STYLES, { withTheme: true })((props) => {
61
+ QueryBar: withStyles(styles, { withTheme: true })((props) => {
53
62
  const { statusReducer, localFind, classes } = props;
54
63
 
55
64
  const { autocomplete, upload } = localFind;
56
65
 
66
+ const [expand, setExpand] = useState(false);
67
+ const noOfItems = expand ? autocomplete.length : maxItems;
68
+
69
+ useEffect(() => {
70
+ if (autocomplete.length <= maxItems && expand) {
71
+ setExpand(!expand);
72
+ }
73
+ }, [autocomplete]);
74
+
57
75
  // Remove any sections without checkboxes selected
58
76
  const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
59
77
  .map((facet) => {
@@ -70,8 +88,23 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
70
88
  itemKeys.splice(itemKeys.indexOf(item), 1);
71
89
  }
72
90
  });
91
+ // return { ...facet, items: itemKeys };
92
+ /**
93
+ * Maintain consistant behavior with facet filter component
94
+ * Display the active filter items based on the count value
95
+ * Display active filter items in query bar only if count is greater than 0
96
+ * behavior similar to filter component
97
+ */
98
+ const displayItems = itemKeys.reduce((accumulator, item) => {
99
+ const itemList = data.filter((d) => (d.group === item && d.count > 0)) || [];
100
+ if (itemList.length > 0) {
101
+ const labels = itemList.map((filter) => filter.group);
102
+ accumulator.push(labels);
103
+ }
104
+ return accumulator;
105
+ }, []);
73
106
 
74
- return { ...facet, items: itemKeys };
107
+ return { ...facet, items: displayItems };
75
108
  })
76
109
  .filter((facet) => facet.items.length > 0);
77
110
 
@@ -113,7 +146,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
113
146
  className={clsx(classes.filterName, classes.localFindBackground)}
114
147
  onClick={clearAutocomplete}
115
148
  >
116
- Participant ID
149
+ Case IDs
117
150
  </span>
118
151
  {' '}
119
152
  {' '}
@@ -138,7 +171,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
138
171
  {' '}
139
172
  </>
140
173
  ) : null}
141
- {autocomplete.slice(0, maxItems).map((d, idx) => (
174
+ {autocomplete.slice(0, noOfItems).map((d, idx) => (
142
175
  <>
143
176
  <span
144
177
  className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
@@ -147,10 +180,33 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
147
180
  >
148
181
  {d.title}
149
182
  </span>
150
- {idx === (maxItems - 1) ? null : ' '}
183
+ {idx === (noOfItems - 1) ? null : ' '}
151
184
  </>
152
185
  ))}
153
- {autocomplete.length > maxItems && '...'}
186
+ {autocomplete.length > maxItems && (
187
+ <>
188
+ {
189
+ displayAllActiveFilters
190
+ ? (
191
+ <span
192
+ className={classes.expandBtn}
193
+ onClick={() => setExpand(!expand)}
194
+ >
195
+ ...
196
+ </span>
197
+ )
198
+ : '...'
199
+ }
200
+ </>
201
+ )}
202
+ {(expand && autocomplete.length > maxItems) && (
203
+ <span
204
+ className={classes.collapseBtn}
205
+ onClick={() => setExpand(!expand)}
206
+ >
207
+ {' LESS'}
208
+ </span>
209
+ )}
154
210
  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
155
211
  ? <span className={classes.bracketsClose}>)</span>
156
212
  : null}
@@ -163,19 +219,22 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
163
219
  ? <span className={classes.operators}> AND </span>
164
220
  : null}
165
221
  {mappedInputs.map((filter, index) => (
166
- <Filter
167
- index={index}
168
- type={filter.type}
169
- data={filter}
170
- maxItems={maxItems}
171
- classes={classes}
172
- onSectionClick={filter.type === CHECKBOX
173
- ? resetFacetSection
174
- : resetFacetSlider}
175
- onItemClick={filter.type === CHECKBOX
176
- ? resetFacetCheckbox
177
- : resetFacetSlider}
178
- />
222
+ <span className={clsName(filter.section)}>
223
+ <Filter
224
+ index={index}
225
+ type={filter.type}
226
+ data={filter}
227
+ maxItems={maxItems}
228
+ displayAllActiveFilters={displayAllActiveFilters}
229
+ classes={classes}
230
+ onSectionClick={filter.type === CHECKBOX
231
+ ? resetFacetSection
232
+ : resetFacetSlider}
233
+ onItemClick={filter.type === CHECKBOX
234
+ ? resetFacetCheckbox
235
+ : resetFacetSlider}
236
+ />
237
+ </span>
179
238
  ))}
180
239
  </span>
181
240
  </div>
package/src/generators/config.js CHANGED
@@ -7,6 +7,11 @@ export default {
7
7
  * @var {number}
8
8
  */
9
9
  maxItems: 2,
10
+ /**
11
+ * overirdes maxItems to display all the active filter items
12
+ * @var {boolean}
13
+ */
14
+ displayAllActiveFilters: false,
10
15
  },
11
16
 
12
17
  /* Component Helper Functions */
package/src/generators/styles.js CHANGED
@@ -9,51 +9,46 @@ export default () => ({
9
9
  overflowY: 'auto',
10
10
  },
11
11
  queryContainer: {
12
- marginLeft: 5,
12
+ marginLeft: 7,
13
13
  position: 'relative',
14
14
  lineHeight: '2.4em',
15
+ letterSpacing: '0.5px',
15
16
  fontFamily: 'Nunito',
16
17
  fontSize: '14px',
17
18
  color: '#0e3151',
18
19
  },
19
20
  filterName: {
20
21
  textTransform: 'uppercase',
21
- padding: '3px 6px 3px 6px',
22
+ padding: '5px 6px 5px 7px',
22
23
  borderRadius: 4,
23
24
  fontSize: 12,
24
25
  fontWeight: 600,
25
26
  cursor: 'pointer',
26
27
  },
27
28
  filterCheckboxes: {
28
- padding: '3px 6px 3px 6px',
29
- borderRadius: 5,
29
+ padding: '4px 7px 3px 6px',
30
+ borderRadius: 4,
30
31
  fontSize: 12,
31
32
  fontWeight: 600,
32
- border: '0.5px solid #646464',
33
+ border: '0.75px solid #898989',
33
34
  width: 'fit-content',
34
35
  backgroundColor: '#fff',
35
36
  cursor: 'pointer',
36
37
  },
37
38
  bracketsOpen: {
38
- fontSize: 20,
39
- fontFamily: 'Nunito',
40
- color: '#646464',
39
+ fontSize: 18,
40
+ fontFamily: 'Nunito Sans Semibold',
41
+ color: '#787878',
41
42
  marginRight: 3,
42
43
  fontWeight: 600,
43
44
  },
44
45
  bracketsClose: {
45
- fontSize: 20,
46
- fontFamily: 'Nunito',
47
- color: '#646464',
46
+ fontSize: 18,
47
+ fontFamily: 'Nunito Sans Semibold',
48
+ color: '#787878',
48
49
  marginLeft: 3,
49
50
  fontWeight: 600,
50
51
  },
51
- ellipsis: {
52
- fontFamily: 'Nunito',
53
- fontWeight: 600,
54
- fontSize: 10,
55
- marginLeft: 3,
56
- },
57
52
  operators: {
58
53
  color: '#646464',
59
54
  marginLeft: '3px',
@@ -72,32 +67,30 @@ export default () => ({
72
67
  borderRadius: '15px',
73
68
  fontFamily: 'Nunito',
74
69
  boxSizing: 'border-box',
75
- backgroundColor: '#646464',
70
+ backgroundColor: '#969696',
76
71
  textTransform: 'capitalize',
77
72
  border: '1px solid #B4B4B4',
78
73
  padding: '1px 5px 0px 6px',
79
74
  '&:hover': {
80
- backgroundColor: '#646464',
75
+ backgroundColor: '#969696',
81
76
  },
82
77
  },
83
78
  divider: {
84
- padding: '0 0 3px 0',
85
- fontSize: '23px',
86
- borderRight: '1px solid #969696',
79
+ borderRight: '2px solid #969696',
87
80
  marginLeft: 7,
88
81
  },
89
82
  /* Custom Styling by Project */
90
83
  localFind: {
91
- color: '#7AA6B6',
84
+ color: '#10A075',
92
85
  },
93
86
  localFindBackground: {
94
- backgroundColor: '#E4ECE9',
87
+ backgroundColor: '#C0E9D7',
95
88
  },
96
89
  facetSectionCases: {
97
- color: '#7AA6B6',
90
+ color: '#10A075',
98
91
  },
99
92
  facetSectionCasesBackground: {
100
- backgroundColor: '#E4ECE9',
93
+ backgroundColor: '#C0E9D7',
101
94
  },
102
95
  facetSectionFiles: {
103
96
  color: '#E636E4',
@@ -105,40 +98,20 @@ export default () => ({
105
98
  facetSectionFilesBackground: {
106
99
  backgroundColor: '#F5C3F1',
107
100
  },
108
- facetSectionDemographics: {
109
- color: '#7AA6B6',
110
- },
111
- facetSectionDemographicsBackground: {
112
- backgroundColor: '#E4ECE9',
113
- },
114
- facetSectionDiagnosis: {
115
- color: '#7AA6B6',
116
- },
117
- facetSectionDiagnosisBackground: {
118
- backgroundColor: '#E4ECE9',
119
- },
120
101
  facetSectionSamples: {
121
- color: '#7AA6B6',
102
+ color: '#10BEFF',
122
103
  },
123
104
  facetSectionSamplesBackground: {
124
- backgroundColor: '#E4ECE9',
125
- },
126
- facetSectionDatacategory: {
127
- color: '#7AA6B6',
128
- },
129
- facetSectionDatacategoryBackground: {
130
- backgroundColor: '#E4ECE9',
131
- },
132
- facetSectionStudy: {
133
- color: '#7AA6B6',
105
+ backgroundColor: '#C3EAF5',
134
106
  },
135
- facetSectionStudyBackground: {
136
- backgroundColor: '#E4ECE9',
137
- },
138
- facetSectionLibrary: {
139
- color: '#7AA6B6',
107
+ expandBtn: {
108
+ '&:hover': {
109
+ cursor: 'pointer',
110
+ },
140
111
  },
141
- facetSectionLibraryBackground: {
142
- backgroundColor: '#E4ECE9',
112
+ collapseBtn: {
113
+ '&:hover': {
114
+ cursor: 'pointer',
115
+ },
143
116
  },
144
117
  });