@bento-core/query-bar 1.0.1-icdc.27 → 1.0.1-icdc.28

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 (11) hide show
  1. package/CopyURL_README.md +42 -0
  2. package/README.md +4 -14
  3. package/dist/components/CheckboxFilter.js +4 -10
  4. package/dist/components/QueryUrl.js +1 -0
  5. package/dist/generators/QueryBarGenerator.js +11 -35
  6. package/dist/generators/config.js +7 -12
  7. package/package.json +1 -1
  8. package/src/components/CheckboxFilter.js +9 -22
  9. package/src/components/QueryUrl.js +1 -0
  10. package/src/generators/QueryBarGenerator.js +127 -177
  11. package/src/generators/config.js +7 -12
package/CopyURL_README.md ADDED
@@ -0,0 +1,42 @@
1
+ # DQB copy URL button Configuration
2
+
3
+ ```
4
+ DashTemplateController.js
5
+
6
+ export const setActiveFilterByPathQuery = (match) => {
7
+ const query = decodeURI(match.params.filterQuery || '');
8
+ const filterObject = JSON.parse(query);
9
+ const { autocomplete = [], upload = [], uploadMetadata } = filterObject;
10
+
11
+ const activeFilterValues = Object.keys(filterObject).reduce((curr, key) => {
12
+ if (Array.isArray(filterObject[key])) {
13
+ const activeFilters = filterObject[key].reduce((value, item) => ({
14
+ ...value,
15
+ [item]: true,
16
+ }), {});
17
+ return {
18
+ ...curr,
19
+ [key]: activeFilters,
20
+ };
21
+ }
22
+ return curr;
23
+ }, {});
24
+ store.dispatch(clearAllAndSelectFacet(activeFilterValues));
25
+ store.dispatch(updateAutocompleteData(autocomplete));
26
+ store.dispatch(updateUploadData(upload));
27
+ store.dispatch(updateUploadMetadata(uploadMetadata));
28
+ };
29
+
30
+
31
+ // redirect
32
+ if (match.params.filterQuery) {
33
+ setActiveFilterByPathQuery(match);
34
+ const redirectUrl = '/explore';
35
+ history.push(redirectUrl);
36
+ }
37
+
38
+ ```
39
+
40
+ # DQB copy URL button theme style
41
+
42
+ ``` https://github.com/CBIIT/bento-icdc-frontend/tree/v4.0.1/src/pages/dashboard/filterQueryBar```
package/README.md CHANGED
@@ -64,24 +64,15 @@ const CONFIG = {
64
64
  */
65
65
  displayAllActiveFilters: false,
66
66
  /**
67
- * key to access label text
67
+ * set root path for copy url (COPYURL_README)
68
68
  * @var {boolean}
69
69
  */
70
- group: 'group',
71
-
72
- /**
73
- * root path of bento app {window.location.href} or react PUBLIC_URL
74
- * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
75
- * @var {string}
76
- */
77
- rootPath: null,
70
+ rootPath: `${window.location.href}/`,
78
71
  /**
79
- * display query URL
72
+ * display copy url button (COPYURL_README)
80
73
  * @var {boolean}
81
- * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
82
74
  */
83
- viewQueryURL: false,
84
-
75
+ viewQueryURL: true,
85
76
  },
86
77
 
87
78
  /* Component Helper Functions */
@@ -139,7 +130,6 @@ const CONFIG = {
139
130
  * @returns {void}
140
131
  */
141
132
  resetFacetSlider: (section) => {},
142
-
143
133
  },
144
134
  };
145
135
  ```
package/dist/components/CheckboxFilter.js CHANGED
@@ -16,20 +16,14 @@ var _default = _ref => {
16
16
  classes,
17
17
  maxItems,
18
18
  onSectionClick,
19
- onItemClick,
20
- displayAllActiveFilters
19
+ onItemClick
21
20
  } = _ref;
22
21
  const {
23
22
  items,
24
23
  section
25
24
  } = data;
26
- const [expand, setExpand] = (0, _react.useState)(false);
25
+ const [expand, setExpand] = (0, _react.useState)(true);
27
26
  const noOfItems = expand ? items.length : maxItems;
28
- (0, _react.useEffect)(() => {
29
- if (items.length <= maxItems && expand) {
30
- setExpand(!expand);
31
- }
32
- }, [items]);
33
27
  const clsName = function clsName() {
34
28
  let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
35
29
  let attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -48,10 +42,10 @@ var _default = _ref => {
48
42
  className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
49
43
  key: idx,
50
44
  onClick: () => onItemClick(data, d)
51
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
45
+ }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
52
46
  className: classes.expandBtn,
53
47
  onClick: () => setExpand(!expand)
54
- }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
48
+ }, "...")), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
55
49
  className: classes.collapseBtn,
56
50
  onClick: () => setExpand(!expand)
57
51
  }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
package/dist/components/QueryUrl.js CHANGED
@@ -112,6 +112,7 @@ const QueryUrl = _ref2 => {
112
112
  alt: "copy icon"
113
113
  }))))), /*#__PURE__*/_react.default.createElement(_core.Dialog, {
114
114
  open: open,
115
+ onClose: () => toggleOpen(!open),
115
116
  "aria-labelledby": "alert-dialog-title",
116
117
  "aria-describedby": "alert-dialog-description",
117
118
  className: (0, _clsx.default)(classes.dialogBox, 'dialogBox')
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -40,11 +40,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
40
40
  const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
41
41
  const queryURLRootPath = config && typeof config.rootPath === 'string' ? config.rootPath : _config.default.config.rootPath;
42
42
  const viewQueryURL = config && typeof config.viewQueryURL === 'boolean' ? config.viewQueryURL : _config.default.config.viewQueryURL;
43
- const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean' ? config.displayAllActiveFilters : _config.default.config.displayAllActiveFilters;
44
-
45
- // const group = config && typeof config.group === 'string'
46
- // ? config.group : DEFAULT_CONFIG.config.group;
47
-
48
43
  const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
49
44
  const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
50
45
  const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -69,13 +64,8 @@ const QueryBarGenerator = function QueryBarGenerator() {
69
64
  autocomplete,
70
65
  upload
71
66
  } = localFind;
72
- const [expand, setExpand] = (0, _react.useState)(false);
67
+ const [expand, setExpand] = (0, _react.useState)(true);
73
68
  const noOfItems = expand ? autocomplete.length : maxItems;
74
- (0, _react.useEffect)(() => {
75
- if (autocomplete.length <= maxItems && expand) {
76
- setExpand(!expand);
77
- }
78
- }, [autocomplete]);
79
69
 
80
70
  // Remove any sections without checkboxes selected
81
71
  const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -88,16 +78,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
88
78
  const itemKeys = Object.keys(items);
89
79
  itemKeys.sort((a, b) => a.localeCompare(b));
90
80
 
91
- /* Find any SELECTED CHECKBOXES that do NOT have any data
92
- * and remove them from the list of selected checkboxes artificially */
93
- // itemKeys.forEach((item) => {
94
- // if (data.findIndex((d) => d.group === item) < 0) {
95
- // itemKeys.splice(itemKeys.indexOf(item), 1);
96
- // }
97
- // });
98
-
99
81
  /**
100
- * commenting out line 89-93
101
82
  * to display all the active filters in the query bar
102
83
  * ICDC-3287
103
84
  */
@@ -108,28 +89,24 @@ const QueryBarGenerator = function QueryBarGenerator() {
108
89
  if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
109
90
  return null;
110
91
  }
111
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
92
+ return /*#__PURE__*/_react.default.createElement("div", {
112
93
  className: classes.queryWrapper
113
- }, /*#__PURE__*/_react.default.createElement("div", null, config.useSpanForClearButton ? /*#__PURE__*/_react.default.createElement("span", {
114
- className: classes.clearQueryButton,
115
- onClick: clearAll
116
- }, "Clear") : /*#__PURE__*/_react.default.createElement(_core.Button, {
94
+ }, /*#__PURE__*/_react.default.createElement(_core.Button, {
117
95
  className: classes.clearQueryButton,
118
96
  color: "primary",
119
97
  variant: "outlined",
120
- onClick: clearAll,
121
- size: "small"
122
- }, "Clear"), /*#__PURE__*/_react.default.createElement("span", {
98
+ onClick: clearAll
99
+ }, "Clear Query"), /*#__PURE__*/_react.default.createElement("span", {
123
100
  className: classes.divider
124
101
  }), /*#__PURE__*/_react.default.createElement("span", {
125
102
  className: classes.queryContainer
126
103
  }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
127
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground, classes.standAloneInputSet),
104
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
128
105
  onClick: clearUpload
129
106
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
130
107
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
131
108
  onClick: clearAutocomplete
132
- }, "Case ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
109
+ }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
133
110
  className: classes.operators
134
111
  }, 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", {
135
112
  className: classes.bracketsOpen
@@ -140,10 +117,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
140
117
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
141
118
  key: idx,
142
119
  onClick: () => deleteAutocompleteItem(d.title)
143
- }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
120
+ }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
144
121
  className: classes.expandBtn,
145
122
  onClick: () => setExpand(!expand)
146
- }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
123
+ }, "...")), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
147
124
  className: classes.collapseBtn,
148
125
  onClick: () => setExpand(!expand)
149
126
  }, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
@@ -157,16 +134,15 @@ const QueryBarGenerator = function QueryBarGenerator() {
157
134
  type: filter.type,
158
135
  data: filter,
159
136
  maxItems: maxItems,
160
- displayAllActiveFilters: displayAllActiveFilters,
161
137
  classes: classes,
162
138
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
163
139
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
164
- }))))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
140
+ })))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
165
141
  classes: classes,
166
142
  localFind: localFind,
167
143
  filterItems: mappedInputs,
168
144
  rootPath: queryURLRootPath
169
- }))));
145
+ }));
170
146
  })
171
147
  };
172
148
  };
package/dist/generators/config.js CHANGED
@@ -19,19 +19,14 @@ var _default = {
19
19
  */
20
20
  displayAllActiveFilters: false,
21
21
  /**
22
- * key to access label text
23
- * @var {boolean}
24
- */
25
- group: 'group',
22
+ * set root path for copy url
23
+ * @var {boolean}
24
+ */
25
+ rootPath: "".concat(window.location.href, "/"),
26
26
  /**
27
- * root path of bento app
28
- * @var {boolean}
29
- */
30
- rootPath: null,
31
- /**
32
- * display query URL
33
- * @var {boolean}
34
- */
27
+ * display copy url button
28
+ * @var {boolean}
29
+ */
35
30
  viewQueryURL: false
36
31
  },
37
32
  /* Component Helper Functions */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-icdc.27",
3
+ "version": "1.0.1-icdc.28",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/CheckboxFilter.js CHANGED
@@ -1,21 +1,14 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { 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,
8
7
  }) => {
9
8
  const { items, section } = data;
10
- const [expand, setExpand] = useState(false);
9
+ const [expand, setExpand] = useState(true);
11
10
  const noOfItems = expand ? items.length : maxItems;
12
11
 
13
- useEffect(() => {
14
- if (items.length <= maxItems && expand) {
15
- setExpand(!expand);
16
- }
17
- }, [items]);
18
-
19
12
  const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
20
13
 
21
14
  return (
@@ -49,20 +42,14 @@ export default ({
49
42
  {idx === (maxItems - 1) ? null : ' '}
50
43
  </>
51
44
  ))}
52
- {items.length > maxItems && (
45
+ {(items.length > maxItems && !expand) && (
53
46
  <>
54
- {
55
- displayAllActiveFilters
56
- ? (
57
- <span
58
- className={classes.expandBtn}
59
- onClick={() => setExpand(!expand)}
60
- >
61
- ...
62
- </span>
63
- )
64
- : '...'
65
- }
47
+ <span
48
+ className={classes.expandBtn}
49
+ onClick={() => setExpand(!expand)}
50
+ >
51
+ ...
52
+ </span>
66
53
  </>
67
54
  )}
68
55
  {(expand && items.length > maxItems) && (
package/src/components/QueryUrl.js CHANGED
@@ -142,6 +142,7 @@ const QueryUrl = ({
142
142
  </div>
143
143
  <Dialog
144
144
  open={open}
145
+ onClose={() => toggleOpen(!open)}
145
146
  aria-labelledby="alert-dialog-title"
146
147
  aria-describedby="alert-dialog-description"
147
148
  className={clsx(classes.dialogBox, 'dialogBox')}
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,5 +1,4 @@
1
- /* eslint-disable */
2
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState } from 'react';
3
2
  import { withStyles, Button } from '@material-ui/core';
4
3
  import { InputTypes } from '@bento-core/facet-filter';
5
4
  import clsx from 'clsx';
@@ -33,13 +32,6 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
33
32
  ? config.viewQueryURL
34
33
  : DEFAULT_CONFIG.config.viewQueryURL;
35
34
 
36
- const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
37
- ? config.displayAllActiveFilters
38
- : DEFAULT_CONFIG.config.displayAllActiveFilters;
39
-
40
- // const group = config && typeof config.group === 'string'
41
- // ? config.group : DEFAULT_CONFIG.config.group;
42
-
43
35
  const clearAll = functions && typeof functions.clearAll === 'function'
44
36
  ? functions.clearAll
45
37
  : DEFAULT_CONFIG.functions.clearAll;
@@ -76,15 +68,9 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
76
68
 
77
69
  const { autocomplete, upload } = localFind;
78
70
 
79
- const [expand, setExpand] = useState(false);
71
+ const [expand, setExpand] = useState(true);
80
72
  const noOfItems = expand ? autocomplete.length : maxItems;
81
73
 
82
- useEffect(() => {
83
- if (autocomplete.length <= maxItems && expand) {
84
- setExpand(!expand);
85
- }
86
- }, [autocomplete]);
87
-
88
74
  // Remove any sections without checkboxes selected
89
75
  const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
90
76
  .map((facet) => {
@@ -94,16 +80,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
94
80
  const itemKeys = Object.keys(items);
95
81
  itemKeys.sort((a, b) => a.localeCompare(b));
96
82
 
97
- /* Find any SELECTED CHECKBOXES that do NOT have any data
98
- * and remove them from the list of selected checkboxes artificially */
99
- // itemKeys.forEach((item) => {
100
- // if (data.findIndex((d) => d.group === item) < 0) {
101
- // itemKeys.splice(itemKeys.indexOf(item), 1);
102
- // }
103
- // });
104
-
105
83
  /**
106
- * commenting out line 89-93
107
84
  * to display all the active filters in the query bar
108
85
  * ICDC-3287
109
86
  */
@@ -116,161 +93,134 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
116
93
  }
117
94
 
118
95
  return (
119
- <>
120
- <div className={classes.queryWrapper}>
121
- <div>
122
- {
123
- config.useSpanForClearButton ? (
124
- <span className={classes.clearQueryButton} onClick={clearAll}>Clear</span>
125
- ) : (
126
- <Button
127
- className={classes.clearQueryButton}
128
- color="primary"
129
- variant="outlined"
130
- onClick={clearAll}
131
- size="small"
132
- >
133
- Clear
134
- </Button>
135
-
136
- )
137
- }
138
- <span className={classes.divider} />
139
- <span className={classes.queryContainer}>
140
- {/* Local Find Selections */}
141
- {/* TODO: Refactor this into a separate component */}
142
- {(autocomplete.length || upload.length) ? (
143
- <span>
144
- {/* Standalone case set button */}
145
- {(upload.length && !autocomplete.length)
146
- ? (
147
- <span
148
- className={
149
- clsx(
150
- classes.filterCheckboxes,
151
- classes.localFindBackground,
152
- classes.standAloneInputSet,
153
- )
154
- }
155
- onClick={clearUpload}
156
- >
157
- INPUT CASE SET
158
- </span>
159
- ) : null}
160
- {autocomplete.length
161
- ? (
162
- <span>
163
- {' '}
164
- <span
165
- className={clsx(classes.filterName, classes.localFindBackground)}
166
- onClick={clearAutocomplete}
167
- >
168
- Case ID
169
- </span>
170
- {' '}
171
- {' '}
172
- <span className={classes.operators}>
173
- {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
174
- </span>
175
- </span>
176
- ) : null}
96
+ <div className={classes.queryWrapper}>
97
+ <Button
98
+ className={classes.clearQueryButton}
99
+ color="primary"
100
+ variant="outlined"
101
+ onClick={clearAll}
102
+ >
103
+ Clear Query
104
+ </Button>
105
+ <span className={classes.divider} />
106
+ <span className={classes.queryContainer}>
107
+ {/* Local Find Selections */}
108
+ {/* TODO: Refactor this into a separate component */}
109
+ {(autocomplete.length || upload.length) ? (
110
+ <span>
111
+ {/* Standalone case set button */}
112
+ {(upload.length && !autocomplete.length)
113
+ ? (
114
+ <span
115
+ className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
116
+ onClick={clearUpload}
117
+ >
118
+ INPUT CASE SET
119
+ </span>
120
+ ) : null}
121
+ {autocomplete.length
122
+ ? (
177
123
  <span>
178
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
179
- ? <span className={classes.bracketsOpen}>(</span>
180
- : null}
181
- {upload.length && autocomplete.length ? (
182
- <>
183
- {' '}
184
- <span
185
- className={clsx(classes.filterCheckboxes, classes.localFind)}
186
- onClick={clearUpload}
187
- >
188
- INPUT CASE SET
189
- </span>
190
- {' '}
191
- </>
192
- ) : null}
193
- {autocomplete.slice(0, noOfItems).map((d, idx) => (
194
- <>
195
- <span
196
- className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
197
- key={idx}
198
- onClick={() => deleteAutocompleteItem(d.title)}
199
- >
200
- {d.title}
201
- </span>
202
- {idx === (noOfItems - 1) ? null : ' '}
203
- </>
204
- ))}
205
- {autocomplete.length > maxItems && (
206
- <>
207
- {
208
- displayAllActiveFilters
209
- ? (
210
- <span
211
- className={classes.expandBtn}
212
- onClick={() => setExpand(!expand)}
213
- >
214
- ...
215
- </span>
216
- )
217
- : '...'
218
- }
219
- </>
220
- )}
221
- {(expand && autocomplete.length > maxItems) && (
222
- <span
223
- className={classes.collapseBtn}
224
- onClick={() => setExpand(!expand)}
225
- >
226
- {' LESS'}
227
- </span>
228
- )}
229
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
230
- ? <span className={classes.bracketsClose}>)</span>
231
- : null}
124
+ {' '}
125
+ <span
126
+ className={clsx(classes.filterName, classes.localFindBackground)}
127
+ onClick={clearAutocomplete}
128
+ >
129
+ Case IDs
130
+ </span>
131
+ {' '}
132
+ {' '}
133
+ <span className={classes.operators}>
134
+ {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
135
+ </span>
232
136
  </span>
233
- </span>
234
- ) : null}
235
-
236
- {/* Facet Sidebar Selections */}
237
- {((autocomplete.length || upload.length) && mappedInputs.length)
238
- ? <span className={classes.operators}> AND </span>
239
- : null}
240
- {mappedInputs.map((filter, index) => (
241
- <span className={clsName(filter.section)}>
242
- <Filter
243
- index={index}
244
- type={filter.type}
245
- data={filter}
246
- maxItems={maxItems}
247
- displayAllActiveFilters={displayAllActiveFilters}
248
- classes={classes}
249
- onSectionClick={filter.type === CHECKBOX
250
- ? resetFacetSection
251
- : resetFacetSlider}
252
- onItemClick={filter.type === CHECKBOX
253
- ? resetFacetCheckbox
254
- : resetFacetSlider}
255
- />
256
- </span>
257
- ))}
137
+ ) : null}
138
+ <span>
139
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
140
+ ? <span className={classes.bracketsOpen}>(</span>
141
+ : null}
142
+ {upload.length && autocomplete.length ? (
143
+ <>
144
+ {' '}
145
+ <span
146
+ className={clsx(classes.filterCheckboxes, classes.localFind)}
147
+ onClick={clearUpload}
148
+ >
149
+ INPUT CASE SET
150
+ </span>
151
+ {' '}
152
+ </>
153
+ ) : null}
154
+ {autocomplete.slice(0, noOfItems).map((d, idx) => (
155
+ <>
156
+ <span
157
+ className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
158
+ key={idx}
159
+ onClick={() => deleteAutocompleteItem(d.title)}
160
+ >
161
+ {d.title}
162
+ </span>
163
+ {idx === (noOfItems - 1) ? null : ' '}
164
+ </>
165
+ ))}
166
+ {(autocomplete.length > maxItems && !expand) && (
167
+ <>
168
+ <span
169
+ className={classes.expandBtn}
170
+ onClick={() => setExpand(!expand)}
171
+ >
172
+ ...
173
+ </span>
174
+ </>
175
+ )}
176
+ {(expand && autocomplete.length > maxItems) && (
177
+ <span
178
+ className={classes.collapseBtn}
179
+ onClick={() => setExpand(!expand)}
180
+ >
181
+ {' LESS'}
182
+ </span>
183
+ )}
184
+ {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
185
+ ? <span className={classes.bracketsClose}>)</span>
186
+ : null}
187
+ </span>
188
+ </span>
189
+ ) : null}
190
+
191
+ {/* Facet Sidebar Selections */}
192
+ {((autocomplete.length || upload.length) && mappedInputs.length)
193
+ ? <span className={classes.operators}> AND </span>
194
+ : null}
195
+ {mappedInputs.map((filter, index) => (
196
+ <span className={clsName(filter.section)}>
197
+ <Filter
198
+ index={index}
199
+ type={filter.type}
200
+ data={filter}
201
+ maxItems={maxItems}
202
+ classes={classes}
203
+ onSectionClick={filter.type === CHECKBOX
204
+ ? resetFacetSection
205
+ : resetFacetSlider}
206
+ onItemClick={filter.type === CHECKBOX
207
+ ? resetFacetCheckbox
208
+ : resetFacetSlider}
209
+ />
258
210
  </span>
259
- </div>
260
- {
261
- (viewQueryURL && queryURLRootPath) && (
262
- <div>
263
- <QueryUrl
264
- classes={classes}
265
- localFind={localFind}
266
- filterItems={mappedInputs}
267
- rootPath={queryURLRootPath}
268
- />
269
- </div>
270
- )
271
- }
272
- </div>
273
- </>
211
+ ))}
212
+ </span>
213
+ {
214
+ (viewQueryURL && queryURLRootPath) && (
215
+ <QueryUrl
216
+ classes={classes}
217
+ localFind={localFind}
218
+ filterItems={mappedInputs}
219
+ rootPath={queryURLRootPath}
220
+ />
221
+ )
222
+ }
223
+ </div>
274
224
  );
275
225
  }),
276
226
  };
package/src/generators/config.js CHANGED
@@ -13,19 +13,14 @@ export default {
13
13
  */
14
14
  displayAllActiveFilters: false,
15
15
  /**
16
- * key to access label text
17
- * @var {boolean}
18
- */
19
- group: 'group',
16
+ * set root path for copy url
17
+ * @var {boolean}
18
+ */
19
+ rootPath: `${window.location.href}/`,
20
20
  /**
21
- * root path of bento app
22
- * @var {boolean}
23
- */
24
- rootPath: null,
25
- /**
26
- * display query URL
27
- * @var {boolean}
28
- */
21
+ * display copy url button
22
+ * @var {boolean}
23
+ */
29
24
  viewQueryURL: false,
30
25
  },
31
26