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

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/README.md +14 -4
  2. package/dist/components/CheckboxFilter.js +10 -4
  3. package/dist/components/QueryUrl.js +99 -28
  4. package/dist/generators/QueryBarGenerator.js +35 -11
  5. package/dist/generators/config.js +12 -7
  6. package/package.json +1 -1
  7. package/src/components/CheckboxFilter.js +22 -9
  8. package/src/components/QueryUrl.js +118 -30
  9. package/src/generators/QueryBarGenerator.js +177 -127
  10. package/src/generators/config.js +12 -7
  11. package/CopyURL_README.md +0 -42
package/README.md CHANGED
@@ -64,15 +64,24 @@ const CONFIG = {
64
64
  */
65
65
  displayAllActiveFilters: false,
66
66
  /**
67
- * set root path for copy url (COPYURL_README)
67
+ * key to access label text
68
68
  * @var {boolean}
69
69
  */
70
- rootPath: `${window.location.href}/`,
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,
71
78
  /**
72
- * display copy url button (COPYURL_README)
79
+ * display query URL
73
80
  * @var {boolean}
81
+ * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
74
82
  */
75
- viewQueryURL: true,
83
+ viewQueryURL: false,
84
+
76
85
  },
77
86
 
78
87
  /* Component Helper Functions */
@@ -130,6 +139,7 @@ const CONFIG = {
130
139
  * @returns {void}
131
140
  */
132
141
  resetFacetSlider: (section) => {},
142
+
133
143
  },
134
144
  };
135
145
  ```
package/dist/components/CheckboxFilter.js CHANGED
@@ -16,14 +16,20 @@ var _default = _ref => {
16
16
  classes,
17
17
  maxItems,
18
18
  onSectionClick,
19
- onItemClick
19
+ onItemClick,
20
+ displayAllActiveFilters
20
21
  } = _ref;
21
22
  const {
22
23
  items,
23
24
  section
24
25
  } = data;
25
- const [expand, setExpand] = (0, _react.useState)(true);
26
+ const [expand, setExpand] = (0, _react.useState)(false);
26
27
  const noOfItems = expand ? items.length : maxItems;
28
+ (0, _react.useEffect)(() => {
29
+ if (items.length <= maxItems && expand) {
30
+ setExpand(!expand);
31
+ }
32
+ }, [items]);
27
33
  const clsName = function clsName() {
28
34
  let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
29
35
  let attr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -42,10 +48,10 @@ var _default = _ref => {
42
48
  className: (0, _clsx.default)(classes.filterCheckboxes, classes[clsName(section)]),
43
49
  key: idx,
44
50
  onClick: () => onItemClick(data, d)
45
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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", {
46
52
  className: classes.expandBtn,
47
53
  onClick: () => setExpand(!expand)
48
- }, "...")), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
54
+ }, "...") : '...'), expand && items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
49
55
  className: classes.collapseBtn,
50
56
  onClick: () => setExpand(!expand)
51
57
  }, ' LESS'), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
package/dist/components/QueryUrl.js CHANGED
@@ -16,15 +16,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
16
16
  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; }
17
17
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
18
18
  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); }
19
- const QueryUrl = _ref => {
19
+ const ViewFullLinkComponent = _ref => {
20
+ let {
21
+ classes,
22
+ url,
23
+ maxWidth = 1200
24
+ } = _ref;
25
+ const linkRef = (0, _react.useRef)(null);
26
+ const [collapseLink, setCollapseLink] = (0, _react.useState)(false);
27
+
28
+ /**
29
+ * Compute url link width based on the windowsize
30
+ */
31
+ (0, _react.useEffect)(() => {
32
+ var _linkRef$current;
33
+ const urlWidth = linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.offsetWidth;
34
+ if (urlWidth > maxWidth / 2) {
35
+ setCollapseLink(true);
36
+ }
37
+ }, []);
38
+ const expandUrl = () => {
39
+ setCollapseLink(false);
40
+ };
41
+ const collapseUrl = () => {
42
+ setCollapseLink(true);
43
+ };
44
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
45
+ ref: linkRef,
46
+ className: classes.link
47
+ }, /*#__PURE__*/_react.default.createElement("span", {
48
+ className: (0, _clsx.default)(classes.viewLink, {
49
+ [classes.collapseLink]: collapseLink
50
+ })
51
+ }, /*#__PURE__*/_react.default.createElement("span", {
52
+ className: (0, _clsx.default)(classes.urlView, {
53
+ [classes.urlViewBtn]: !collapseLink
54
+ }),
55
+ type: "button",
56
+ onClick: collapseUrl
57
+ }, url), collapseLink && /*#__PURE__*/_react.default.createElement("span", {
58
+ className: classes.expandLinkBtn,
59
+ type: "button",
60
+ onClick: expandUrl
61
+ }, "..."))));
62
+ };
63
+ const QueryUrl = _ref2 => {
64
+ var _queryRef$current;
20
65
  let {
21
66
  classes,
22
67
  filterItems,
23
68
  localFind = {},
24
69
  rootPath
25
- } = _ref;
70
+ } = _ref2;
26
71
  const [display, setDisplay] = (0, _react.useState)(false);
27
72
  const toggleDisplay = () => setDisplay(!display);
73
+ const [expand, setExpand] = (0, _react.useState)(false);
28
74
  const [open, toggleOpen] = (0, _react.useState)(false);
29
75
  const pathFilterParams = filterItems.reduce((acc, item) => {
30
76
  const {
@@ -35,7 +81,7 @@ const QueryUrl = _ref => {
35
81
  return acc;
36
82
  }, {});
37
83
  const query = JSON.stringify(_objectSpread(_objectSpread({}, pathFilterParams), localFind));
38
- const url = encodeURI(rootPath.concat(query));
84
+ const url = rootPath + encodeURIComponent(query);
39
85
  const copyUrl = async () => {
40
86
  toggleOpen(!open);
41
87
  await navigator.clipboard.writeText(url);
@@ -47,10 +93,15 @@ const QueryUrl = _ref => {
47
93
  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
48
94
  onClick: toggleDisplay,
49
95
  className: classes.viewLinkToggleBtn
50
- }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
96
+ }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, expand ? /*#__PURE__*/_react.default.createElement("span", {
51
97
  type: "button",
52
- className: (0, _clsx.default)(classes.viewLink)
53
- }, url), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
98
+ onClick: () => setExpand(!expand),
99
+ className: (0, _clsx.default)(classes.link, classes.viewLink, classes.expandLink)
100
+ }, url) : /*#__PURE__*/_react.default.createElement(ViewFullLinkComponent, {
101
+ url: url,
102
+ classes: classes,
103
+ maxWidth: queryRef === null || queryRef === void 0 ? void 0 : (_queryRef$current = queryRef.current) === null || _queryRef$current === void 0 ? void 0 : _queryRef$current.offsetWidth
104
+ }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
54
105
  arrow: true,
55
106
  title: "Copy to Clipboard"
56
107
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
@@ -61,7 +112,6 @@ const QueryUrl = _ref => {
61
112
  alt: "copy icon"
62
113
  }))))), /*#__PURE__*/_react.default.createElement(_core.Dialog, {
63
114
  open: open,
64
- onClose: () => toggleOpen(!open),
65
115
  "aria-labelledby": "alert-dialog-title",
66
116
  "aria-describedby": "alert-dialog-description",
67
117
  className: (0, _clsx.default)(classes.dialogBox, 'dialogBox')
@@ -76,43 +126,48 @@ const QueryUrl = _ref => {
76
126
  const styles = () => ({
77
127
  urlContainer: {
78
128
  display: 'flex',
79
- marginTop: '3px',
129
+ marginTop: '10px',
80
130
  minHeight: '10px'
81
131
  },
82
- viewLink: {
132
+ link: {
133
+ lineBreak: 'anywhere',
83
134
  overflow: 'hidden',
84
- textOverflow: 'ellipsis',
85
135
  fontFamily: 'Nunito',
86
136
  fontSize: '12px',
87
137
  fontWeight: '500',
88
138
  lineHeight: '16px',
89
139
  letterSpacing: '0em',
90
- padding: '2px 5px',
140
+ padding: '5px',
91
141
  borderRadius: '5px',
92
142
  float: 'left',
93
143
  color: '#1D79A8',
94
144
  backgroundColor: '#fff',
95
- margin: '0',
96
- whiteSpace: 'nowrap',
97
- wordBreak: 'break-all',
98
- '@media (max-width: 2560px)': {
99
- maxWidth: '1800px'
100
- },
101
- '@media (max-width: 2000px)': {
102
- maxWidth: '1500px'
103
- },
104
- '@media (max-width: 1600px)': {
105
- maxWidth: '1100px'
106
- },
107
- '@media (max-width: 1300px)': {
108
- maxWidth: '900px'
109
- }
145
+ maxWidth: '80%'
146
+ },
147
+ viewLink: {
148
+ margin: '0'
110
149
  },
111
150
  urlViewBtn: {
112
151
  cursor: 'pointer'
113
152
  },
153
+ collapseLink: {
154
+ maxHeight: '1em',
155
+ display: 'block',
156
+ // display: '-webkit-box',
157
+ '-webkit-box-orient': 'vertical',
158
+ '-webkit-line-clamp': '1',
159
+ overflow: 'hidden'
160
+ },
161
+ expandLink: {
162
+ cursor: 'pointer'
163
+ },
164
+ expandLinkBtn: {
165
+ float: 'left',
166
+ '&:hover': {
167
+ cursor: 'pointer'
168
+ }
169
+ },
114
170
  viewLinkToggleBtn: {
115
- padding: '5px 10px 5px 10px',
116
171
  height: '20px',
117
172
  fontFamily: 'Nunito',
118
173
  fontSize: '12px',
@@ -125,12 +180,28 @@ const styles = () => ({
125
180
  color: '#fff',
126
181
  float: 'left',
127
182
  margin: '0px 10px 0px 0px',
128
- whiteSpace: 'nowrap',
129
183
  '&:hover': {
130
184
  backgroundColor: '#1D79A8',
131
185
  color: '#fff'
132
186
  }
133
187
  },
188
+ urlView: {
189
+ float: 'left',
190
+ width: 'calc(100% - 13px)',
191
+ minWidth: '840px',
192
+ '@media (max-width: 2560px)': {
193
+ maxWidth: '1800px'
194
+ },
195
+ '@media (max-width: 2000px)': {
196
+ maxWidth: '1400px'
197
+ },
198
+ '@media (max-width: 1600px)': {
199
+ maxWidth: '1200px'
200
+ },
201
+ '@media (max-width: 1300px)': {
202
+ maxWidth: '1050px'
203
+ }
204
+ },
134
205
  copyIconBtn: {
135
206
  padding: '0px',
136
207
  height: '20px',
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -40,6 +40,11 @@ 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
+
43
48
  const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
44
49
  const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
45
50
  const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -64,8 +69,13 @@ const QueryBarGenerator = function QueryBarGenerator() {
64
69
  autocomplete,
65
70
  upload
66
71
  } = localFind;
67
- const [expand, setExpand] = (0, _react.useState)(true);
72
+ const [expand, setExpand] = (0, _react.useState)(false);
68
73
  const noOfItems = expand ? autocomplete.length : maxItems;
74
+ (0, _react.useEffect)(() => {
75
+ if (autocomplete.length <= maxItems && expand) {
76
+ setExpand(!expand);
77
+ }
78
+ }, [autocomplete]);
69
79
 
70
80
  // Remove any sections without checkboxes selected
71
81
  const mappedInputs = statusReducer.filter(facet => facet.section && facet.type).map(facet => {
@@ -78,7 +88,16 @@ const QueryBarGenerator = function QueryBarGenerator() {
78
88
  const itemKeys = Object.keys(items);
79
89
  itemKeys.sort((a, b) => a.localeCompare(b));
80
90
 
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
+
81
99
  /**
100
+ * commenting out line 89-93
82
101
  * to display all the active filters in the query bar
83
102
  * ICDC-3287
84
103
  */
@@ -89,24 +108,28 @@ const QueryBarGenerator = function QueryBarGenerator() {
89
108
  if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
90
109
  return null;
91
110
  }
92
- return /*#__PURE__*/_react.default.createElement("div", {
111
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
93
112
  className: classes.queryWrapper
94
- }, /*#__PURE__*/_react.default.createElement(_core.Button, {
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, {
95
117
  className: classes.clearQueryButton,
96
118
  color: "primary",
97
119
  variant: "outlined",
98
- onClick: clearAll
99
- }, "Clear Query"), /*#__PURE__*/_react.default.createElement("span", {
120
+ onClick: clearAll,
121
+ size: "small"
122
+ }, "Clear"), /*#__PURE__*/_react.default.createElement("span", {
100
123
  className: classes.divider
101
124
  }), /*#__PURE__*/_react.default.createElement("span", {
102
125
  className: classes.queryContainer
103
126
  }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
104
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
127
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground, classes.standAloneInputSet),
105
128
  onClick: clearUpload
106
129
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
107
130
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
108
131
  onClick: clearAutocomplete
109
- }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
132
+ }, "Case ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
110
133
  className: classes.operators
111
134
  }, 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", {
112
135
  className: classes.bracketsOpen
@@ -117,10 +140,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
117
140
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
118
141
  key: idx,
119
142
  onClick: () => deleteAutocompleteItem(d.title)
120
- }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && !expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
143
+ }, d.title), idx === noOfItems - 1 ? null : ' ')), autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayAllActiveFilters ? /*#__PURE__*/_react.default.createElement("span", {
121
144
  className: classes.expandBtn,
122
145
  onClick: () => setExpand(!expand)
123
- }, "...")), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
146
+ }, "...") : '...'), expand && autocomplete.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
124
147
  className: classes.collapseBtn,
125
148
  onClick: () => setExpand(!expand)
126
149
  }, ' LESS'), (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
@@ -134,15 +157,16 @@ const QueryBarGenerator = function QueryBarGenerator() {
134
157
  type: filter.type,
135
158
  data: filter,
136
159
  maxItems: maxItems,
160
+ displayAllActiveFilters: displayAllActiveFilters,
137
161
  classes: classes,
138
162
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
139
163
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
140
- })))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
164
+ }))))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
141
165
  classes: classes,
142
166
  localFind: localFind,
143
167
  filterItems: mappedInputs,
144
168
  rootPath: queryURLRootPath
145
- }));
169
+ }))));
146
170
  })
147
171
  };
148
172
  };
package/dist/generators/config.js CHANGED
@@ -19,14 +19,19 @@ var _default = {
19
19
  */
20
20
  displayAllActiveFilters: false,
21
21
  /**
22
- * set root path for copy url
23
- * @var {boolean}
24
- */
25
- rootPath: "".concat(window.location.href, "/"),
22
+ * key to access label text
23
+ * @var {boolean}
24
+ */
25
+ group: 'group',
26
26
  /**
27
- * display copy url button
28
- * @var {boolean}
29
- */
27
+ * root path of bento app
28
+ * @var {boolean}
29
+ */
30
+ rootPath: null,
31
+ /**
32
+ * display query URL
33
+ * @var {boolean}
34
+ */
30
35
  viewQueryURL: false
31
36
  },
32
37
  /* 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.25",
3
+ "version": "1.0.1-icdc.27",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/CheckboxFilter.js CHANGED
@@ -1,14 +1,21 @@
1
- import React, { useState } 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;
9
- const [expand, setExpand] = useState(true);
10
+ const [expand, setExpand] = useState(false);
10
11
  const noOfItems = expand ? items.length : maxItems;
11
12
 
13
+ useEffect(() => {
14
+ if (items.length <= maxItems && expand) {
15
+ setExpand(!expand);
16
+ }
17
+ }, [items]);
18
+
12
19
  const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`;
13
20
 
14
21
  return (
@@ -42,14 +49,20 @@ export default ({
42
49
  {idx === (maxItems - 1) ? null : ' '}
43
50
  </>
44
51
  ))}
45
- {(items.length > maxItems && !expand) && (
52
+ {items.length > maxItems && (
46
53
  <>
47
- <span
48
- className={classes.expandBtn}
49
- onClick={() => setExpand(!expand)}
50
- >
51
- ...
52
- </span>
54
+ {
55
+ displayAllActiveFilters
56
+ ? (
57
+ <span
58
+ className={classes.expandBtn}
59
+ onClick={() => setExpand(!expand)}
60
+ >
61
+ ...
62
+ </span>
63
+ )
64
+ : '...'
65
+ }
53
66
  </>
54
67
  )}
55
68
  {(expand && items.length > maxItems) && (
package/src/components/QueryUrl.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useRef } from 'react';
1
+ import React, { useState, useEffect, useRef } from 'react';
2
2
  import clsx from 'clsx';
3
3
  import {
4
4
  Button,
@@ -12,6 +12,62 @@ import {
12
12
  } from '@material-ui/core';
13
13
  import CopyIcon from '../assets/CopyIcon.svg';
14
14
 
15
+ const ViewFullLinkComponent = ({
16
+ classes,
17
+ url,
18
+ maxWidth = 1200,
19
+ }) => {
20
+ const linkRef = useRef(null);
21
+ const [collapseLink, setCollapseLink] = useState(false);
22
+
23
+ /**
24
+ * Compute url link width based on the windowsize
25
+ */
26
+ useEffect(() => {
27
+ const urlWidth = linkRef?.current?.offsetWidth;
28
+ if (urlWidth > maxWidth / 2) {
29
+ setCollapseLink(true);
30
+ }
31
+ }, []);
32
+
33
+ const expandUrl = () => {
34
+ setCollapseLink(false);
35
+ };
36
+
37
+ const collapseUrl = () => {
38
+ setCollapseLink(true);
39
+ };
40
+
41
+ return (
42
+ <>
43
+ <span ref={linkRef} className={classes.link}>
44
+ <span
45
+ className={clsx(classes.viewLink,
46
+ { [classes.collapseLink]: collapseLink })}
47
+ >
48
+ <span
49
+ className={clsx(classes.urlView,
50
+ { [classes.urlViewBtn]: !collapseLink })}
51
+ type="button"
52
+ onClick={collapseUrl}
53
+ >
54
+ {url}
55
+ </span>
56
+ {(collapseLink) && (
57
+ <span
58
+ className={classes.expandLinkBtn}
59
+ type="button"
60
+ onClick={expandUrl}
61
+ >
62
+ ...
63
+ </span>
64
+ )}
65
+ </span>
66
+ </span>
67
+ </>
68
+ );
69
+ };
70
+
15
71
  const QueryUrl = ({
16
72
  classes,
17
73
  filterItems,
@@ -21,6 +77,8 @@ const QueryUrl = ({
21
77
  const [display, setDisplay] = useState(false);
22
78
  const toggleDisplay = () => setDisplay(!display);
23
79
 
80
+ const [expand, setExpand] = useState(false);
81
+
24
82
  const [open, toggleOpen] = useState(false);
25
83
 
26
84
  const pathFilterParams = filterItems.reduce((acc, item) => {
@@ -33,7 +91,8 @@ const QueryUrl = ({
33
91
  ...pathFilterParams,
34
92
  ...localFind,
35
93
  });
36
- const url = encodeURI(rootPath.concat(query));
94
+
95
+ const url = rootPath + encodeURIComponent(query);
37
96
 
38
97
  const copyUrl = async () => {
39
98
  toggleOpen(!open);
@@ -49,17 +108,26 @@ const QueryUrl = ({
49
108
  onClick={toggleDisplay}
50
109
  className={classes.viewLinkToggleBtn}
51
110
  >
52
- { (display) ? 'Hide Query URL' : 'Show Query URL'}
111
+ {(display) ? 'Hide Query URL' : 'Show Query URL'}
53
112
  </Button>
54
113
  {
55
114
  (display) && (
56
115
  <>
57
- <div
58
- type="button"
59
- className={clsx(classes.viewLink)}
60
- >
61
- {url}
62
- </div>
116
+ {(expand) ? (
117
+ <span
118
+ type="button"
119
+ onClick={() => setExpand(!expand)}
120
+ className={clsx(classes.link, classes.viewLink, classes.expandLink)}
121
+ >
122
+ {url}
123
+ </span>
124
+ ) : (
125
+ <ViewFullLinkComponent
126
+ url={url}
127
+ classes={classes}
128
+ maxWidth={queryRef?.current?.offsetWidth}
129
+ />
130
+ )}
63
131
  <Tooltip
64
132
  arrow
65
133
  title="Copy to Clipboard"
@@ -74,7 +142,6 @@ const QueryUrl = ({
74
142
  </div>
75
143
  <Dialog
76
144
  open={open}
77
- onClose={() => toggleOpen(!open)}
78
145
  aria-labelledby="alert-dialog-title"
79
146
  aria-describedby="alert-dialog-description"
80
147
  className={clsx(classes.dialogBox, 'dialogBox')}
@@ -97,43 +164,48 @@ const QueryUrl = ({
97
164
  const styles = () => ({
98
165
  urlContainer: {
99
166
  display: 'flex',
100
- marginTop: '3px',
167
+ marginTop: '10px',
101
168
  minHeight: '10px',
102
169
  },
103
- viewLink: {
170
+ link: {
171
+ lineBreak: 'anywhere',
104
172
  overflow: 'hidden',
105
- textOverflow: 'ellipsis',
106
173
  fontFamily: 'Nunito',
107
174
  fontSize: '12px',
108
175
  fontWeight: '500',
109
176
  lineHeight: '16px',
110
177
  letterSpacing: '0em',
111
- padding: '2px 5px',
178
+ padding: '5px',
112
179
  borderRadius: '5px',
113
180
  float: 'left',
114
181
  color: '#1D79A8',
115
182
  backgroundColor: '#fff',
183
+ maxWidth: '80%',
184
+ },
185
+ viewLink: {
116
186
  margin: '0',
117
- whiteSpace: 'nowrap',
118
- wordBreak: 'break-all',
119
- '@media (max-width: 2560px)': {
120
- maxWidth: '1800px',
121
- },
122
- '@media (max-width: 2000px)': {
123
- maxWidth: '1500px',
124
- },
125
- '@media (max-width: 1600px)': {
126
- maxWidth: '1100px',
127
- },
128
- '@media (max-width: 1300px)': {
129
- maxWidth: '900px',
130
- },
131
187
  },
132
188
  urlViewBtn: {
133
189
  cursor: 'pointer',
134
190
  },
191
+ collapseLink: {
192
+ maxHeight: '1em',
193
+ display: 'block',
194
+ // display: '-webkit-box',
195
+ '-webkit-box-orient': 'vertical',
196
+ '-webkit-line-clamp': '1',
197
+ overflow: 'hidden',
198
+ },
199
+ expandLink: {
200
+ cursor: 'pointer',
201
+ },
202
+ expandLinkBtn: {
203
+ float: 'left',
204
+ '&:hover': {
205
+ cursor: 'pointer',
206
+ },
207
+ },
135
208
  viewLinkToggleBtn: {
136
- padding: '5px 10px 5px 10px',
137
209
  height: '20px',
138
210
  fontFamily: 'Nunito',
139
211
  fontSize: '12px',
@@ -146,12 +218,28 @@ const styles = () => ({
146
218
  color: '#fff',
147
219
  float: 'left',
148
220
  margin: '0px 10px 0px 0px',
149
- whiteSpace: 'nowrap',
150
221
  '&:hover': {
151
222
  backgroundColor: '#1D79A8',
152
223
  color: '#fff',
153
224
  },
154
225
  },
226
+ urlView: {
227
+ float: 'left',
228
+ width: 'calc(100% - 13px)',
229
+ minWidth: '840px',
230
+ '@media (max-width: 2560px)': {
231
+ maxWidth: '1800px',
232
+ },
233
+ '@media (max-width: 2000px)': {
234
+ maxWidth: '1400px',
235
+ },
236
+ '@media (max-width: 1600px)': {
237
+ maxWidth: '1200px',
238
+ },
239
+ '@media (max-width: 1300px)': {
240
+ maxWidth: '1050px',
241
+ },
242
+ },
155
243
  copyIconBtn: {
156
244
  padding: '0px',
157
245
  height: '20px',
package/src/generators/QueryBarGenerator.js CHANGED
@@ -1,4 +1,5 @@
1
- import React, { useState } from 'react';
1
+ /* eslint-disable */
2
+ import React, { useState, useEffect } from 'react';
2
3
  import { withStyles, Button } from '@material-ui/core';
3
4
  import { InputTypes } from '@bento-core/facet-filter';
4
5
  import clsx from 'clsx';
@@ -32,6 +33,13 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
32
33
  ? config.viewQueryURL
33
34
  : DEFAULT_CONFIG.config.viewQueryURL;
34
35
 
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
+
35
43
  const clearAll = functions && typeof functions.clearAll === 'function'
36
44
  ? functions.clearAll
37
45
  : DEFAULT_CONFIG.functions.clearAll;
@@ -68,9 +76,15 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
68
76
 
69
77
  const { autocomplete, upload } = localFind;
70
78
 
71
- const [expand, setExpand] = useState(true);
79
+ const [expand, setExpand] = useState(false);
72
80
  const noOfItems = expand ? autocomplete.length : maxItems;
73
81
 
82
+ useEffect(() => {
83
+ if (autocomplete.length <= maxItems && expand) {
84
+ setExpand(!expand);
85
+ }
86
+ }, [autocomplete]);
87
+
74
88
  // Remove any sections without checkboxes selected
75
89
  const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type)
76
90
  .map((facet) => {
@@ -80,7 +94,16 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
80
94
  const itemKeys = Object.keys(items);
81
95
  itemKeys.sort((a, b) => a.localeCompare(b));
82
96
 
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
+
83
105
  /**
106
+ * commenting out line 89-93
84
107
  * to display all the active filters in the query bar
85
108
  * ICDC-3287
86
109
  */
@@ -93,134 +116,161 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
93
116
  }
94
117
 
95
118
  return (
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
- ? (
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}
123
177
  <span>
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>
136
- </span>
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'}
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}
182
232
  </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
- />
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
+ ))}
210
258
  </span>
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>
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
+ </>
224
274
  );
225
275
  }),
226
276
  };
package/src/generators/config.js CHANGED
@@ -13,14 +13,19 @@ export default {
13
13
  */
14
14
  displayAllActiveFilters: false,
15
15
  /**
16
- * set root path for copy url
17
- * @var {boolean}
18
- */
19
- rootPath: `${window.location.href}/`,
16
+ * key to access label text
17
+ * @var {boolean}
18
+ */
19
+ group: 'group',
20
20
  /**
21
- * display copy url button
22
- * @var {boolean}
23
- */
21
+ * root path of bento app
22
+ * @var {boolean}
23
+ */
24
+ rootPath: null,
25
+ /**
26
+ * display query URL
27
+ * @var {boolean}
28
+ */
24
29
  viewQueryURL: false,
25
30
  },
26
31
 
package/CopyURL_README.md DELETED
@@ -1,42 +0,0 @@
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```