@bento-core/query-bar 1.0.1-ccdihub.0 → 1.0.1-ccdihub.10

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 (7) hide show
  1. package/dist/components/CheckboxFilter.js +3 -1
  2. package/dist/generators/QueryBarGenerator.js +7 -7
  3. package/dist/generators/styles.js +46 -33
  4. package/package.json +2 -2
  5. package/src/components/CheckboxFilter.js +1 -1
  6. package/src/generators/QueryBarGenerator.js +7 -7
  7. package/src/generators/styles.js +45 -32
package/dist/components/CheckboxFilter.js CHANGED
@@ -33,7 +33,9 @@ var _default = _ref => {
33
33
  className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
34
34
  key: idx,
35
35
  onClick: () => onItemClick(data, d)
36
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && '...', items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
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", {
37
39
  className: classes.bracketsClose
38
40
  }, ")")));
39
41
  };
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -60,7 +60,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
60
60
  return facet;
61
61
  }
62
62
  const {
63
- data,
64
63
  items
65
64
  } = facet;
66
65
  const itemKeys = Object.keys(items);
@@ -68,11 +67,12 @@ const QueryBarGenerator = function QueryBarGenerator() {
68
67
 
69
68
  /* Find any SELECTED CHECKBOXES that do NOT have any data
70
69
  * and remove them from the list of selected checkboxes artificially */
71
- itemKeys.forEach(item => {
72
- if (data.findIndex(d => d.group === item) < 0) {
73
- itemKeys.splice(itemKeys.indexOf(item), 1);
74
- }
75
- });
70
+ // itemKeys.forEach((item) => {
71
+ // if (data.findIndex((d) => d.group === item) < 0) {
72
+ // itemKeys.splice(itemKeys.indexOf(item), 1);
73
+ // }
74
+ // });
75
+
76
76
  return _objectSpread(_objectSpread({}, facet), {}, {
77
77
  items: itemKeys
78
78
  });
@@ -97,7 +97,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
97
97
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
98
98
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
99
99
  onClick: clearAutocomplete
100
- }, "Participant IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
100
+ }, "Participant ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
101
101
  className: classes.operators
102
102
  }, 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
103
  className: classes.bracketsOpen
package/dist/generators/styles.js CHANGED
@@ -15,46 +15,51 @@ var _default = () => ({
15
15
  overflowY: 'auto'
16
16
  },
17
17
  queryContainer: {
18
- marginLeft: 7,
18
+ marginLeft: 5,
19
19
  position: 'relative',
20
20
  lineHeight: '2.4em',
21
- letterSpacing: '0.5px',
22
21
  fontFamily: 'Nunito',
23
- fontSize: '14px',
24
- color: '#0e3151'
22
+ fontSize: '12px',
23
+ color: '#000000'
25
24
  },
26
25
  filterName: {
27
26
  textTransform: 'uppercase',
28
- padding: '5px 6px 5px 7px',
27
+ padding: '3px 6px 3px 6px',
29
28
  borderRadius: 4,
30
29
  fontSize: 12,
31
30
  fontWeight: 600,
32
31
  cursor: 'pointer'
33
32
  },
34
33
  filterCheckboxes: {
35
- padding: '4px 7px 3px 6px',
36
- borderRadius: 4,
34
+ padding: '3px 6px 3px 6px',
35
+ borderRadius: 5,
37
36
  fontSize: 12,
38
37
  fontWeight: 600,
39
- border: '0.75px solid #898989',
38
+ border: '0.5px solid #646464',
40
39
  width: 'fit-content',
41
40
  backgroundColor: '#fff',
42
41
  cursor: 'pointer'
43
42
  },
44
43
  bracketsOpen: {
45
- fontSize: 18,
46
- fontFamily: 'Nunito Sans Semibold',
47
- color: '#787878',
44
+ fontSize: 20,
45
+ fontFamily: 'Nunito',
46
+ color: '#646464',
48
47
  marginRight: 3,
49
48
  fontWeight: 600
50
49
  },
51
50
  bracketsClose: {
52
- fontSize: 18,
53
- fontFamily: 'Nunito Sans Semibold',
54
- color: '#787878',
51
+ fontSize: 20,
52
+ fontFamily: 'Nunito',
53
+ color: '#646464',
55
54
  marginLeft: 3,
56
55
  fontWeight: 600
57
56
  },
57
+ ellipsis: {
58
+ fontFamily: 'Nunito',
59
+ fontWeight: 600,
60
+ fontSize: 10,
61
+ marginLeft: 3
62
+ },
58
63
  operators: {
59
64
  color: '#646464',
60
65
  marginLeft: '3px',
@@ -68,9 +73,9 @@ var _default = () => ({
68
73
  margin: '1px',
69
74
  marginLeft: -6,
70
75
  fontWeight: 600,
71
- fontSize: '13px',
76
+ fontSize: '12px',
72
77
  color: '#fff',
73
- borderRadius: '15px',
78
+ borderRadius: '5px',
74
79
  fontFamily: 'Nunito',
75
80
  boxSizing: 'border-box',
76
81
  backgroundColor: '#646464',
@@ -82,7 +87,9 @@ var _default = () => ({
82
87
  }
83
88
  },
84
89
  divider: {
85
- borderRight: '2px solid #969696',
90
+ padding: '0 0 3px 0',
91
+ fontSize: '23px',
92
+ borderRight: '1px solid #969696',
86
93
  marginLeft: 7
87
94
  },
88
95
  /* Custom Styling by Project */
@@ -105,40 +112,46 @@ var _default = () => ({
105
112
  backgroundColor: '#F5C3F1'
106
113
  },
107
114
  facetSectionDemographics: {
108
- color: '#7AA6B6'
115
+ color: '#357288'
109
116
  },
110
117
  facetSectionDemographicsBackground: {
111
- backgroundColor: '#E4ECE9'
118
+ backgroundColor: '#E4ECE9',
119
+ border: '1px solid #646464'
112
120
  },
113
121
  facetSectionDiagnosis: {
114
- color: '#7AA6B6'
122
+ color: '#8C3F8D'
115
123
  },
116
124
  facetSectionDiagnosisBackground: {
117
- backgroundColor: '#E4ECE9'
125
+ backgroundColor: '#E1C9E140',
126
+ border: '1px solid #646464'
118
127
  },
119
128
  facetSectionSamples: {
120
- color: '#7AA6B6'
129
+ color: '#907642'
121
130
  },
122
131
  facetSectionSamplesBackground: {
123
- backgroundColor: '#E4ECE9'
132
+ backgroundColor: '#F0DFBD40',
133
+ border: '1px solid #646464'
124
134
  },
125
- facetSectionAssay: {
126
- color: '#7AA6B6'
135
+ facetSectionDatacategory: {
136
+ color: '#A85348'
127
137
  },
128
- facetSectionAssayBackground: {
129
- backgroundColor: '#E4ECE9'
138
+ facetSectionDatacategoryBackground: {
139
+ backgroundColor: '#F8D7D240',
140
+ border: '1px solid #646464'
130
141
  },
131
142
  facetSectionStudy: {
132
- color: '#7AA6B6'
143
+ color: '#1F6BBF'
133
144
  },
134
145
  facetSectionStudyBackground: {
135
- backgroundColor: '#E4ECE9'
146
+ backgroundColor: '#CEDEF040',
147
+ border: '1px solid #646464'
136
148
  },
137
- facetSectionLibrary: {
138
- color: '#7AA6B6'
149
+ facetSectionSequencinglibrary: {
150
+ color: '#14A773'
139
151
  },
140
- facetSectionLibraryBackground: {
141
- backgroundColor: '#E4ECE9'
152
+ facetSectionSequencinglibraryBackground: {
153
+ backgroundColor: '#DDEAE540',
154
+ border: '1px solid #646464'
142
155
  }
143
156
  });
144
157
  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.0",
3
+ "version": "1.0.1-ccdihub.10",
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": {
@@ -32,5 +32,5 @@
32
32
  "url": "https://github.com/CBIIT/bento-frontend/issues"
33
33
  },
34
34
  "homepage": "https://github.com/CBIIT/bento-frontend#readme",
35
- "devDependencies": {}
35
+ "gitHead": "434b75e40defa37c9816a7f74de184b0129683e2"
36
36
  }
package/src/components/CheckboxFilter.js CHANGED
@@ -38,7 +38,7 @@ export default ({
38
38
  {idx === (maxItems - 1) ? null : ' '}
39
39
  </>
40
40
  ))}
41
- {items.length > maxItems && '...'}
41
+ {items.length > maxItems && <span className={classes.ellipsis}>...</span>}
42
42
  {items.length > 1 && <span className={classes.bracketsClose}>)</span>}
43
43
  </span>
44
44
  </span>
package/src/generators/QueryBarGenerator.js CHANGED
@@ -59,17 +59,17 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
59
59
  .map((facet) => {
60
60
  if (facet.type !== CHECKBOX) { return facet; }
61
61
 
62
- const { data, items } = facet;
62
+ const { items } = facet;
63
63
  const itemKeys = Object.keys(items);
64
64
  itemKeys.sort((a, b) => a.localeCompare(b));
65
65
 
66
66
  /* Find any SELECTED CHECKBOXES that do NOT have any data
67
67
  * and remove them from the list of selected checkboxes artificially */
68
- itemKeys.forEach((item) => {
69
- if (data.findIndex((d) => d.group === item) < 0) {
70
- itemKeys.splice(itemKeys.indexOf(item), 1);
71
- }
72
- });
68
+ // itemKeys.forEach((item) => {
69
+ // if (data.findIndex((d) => d.group === item) < 0) {
70
+ // itemKeys.splice(itemKeys.indexOf(item), 1);
71
+ // }
72
+ // });
73
73
 
74
74
  return { ...facet, items: itemKeys };
75
75
  })
@@ -113,7 +113,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
113
113
  className={clsx(classes.filterName, classes.localFindBackground)}
114
114
  onClick={clearAutocomplete}
115
115
  >
116
- Participant IDs
116
+ Participant ID
117
117
  </span>
118
118
  {' '}
119
119
  {' '}
package/src/generators/styles.js CHANGED
@@ -9,46 +9,51 @@ export default () => ({
9
9
  overflowY: 'auto',
10
10
  },
11
11
  queryContainer: {
12
- marginLeft: 7,
12
+ marginLeft: 5,
13
13
  position: 'relative',
14
14
  lineHeight: '2.4em',
15
- letterSpacing: '0.5px',
16
15
  fontFamily: 'Nunito',
17
- fontSize: '14px',
18
- color: '#0e3151',
16
+ fontSize: '12px',
17
+ color: '#000000',
19
18
  },
20
19
  filterName: {
21
20
  textTransform: 'uppercase',
22
- padding: '5px 6px 5px 7px',
21
+ padding: '3px 6px 3px 6px',
23
22
  borderRadius: 4,
24
23
  fontSize: 12,
25
24
  fontWeight: 600,
26
25
  cursor: 'pointer',
27
26
  },
28
27
  filterCheckboxes: {
29
- padding: '4px 7px 3px 6px',
30
- borderRadius: 4,
28
+ padding: '3px 6px 3px 6px',
29
+ borderRadius: 5,
31
30
  fontSize: 12,
32
31
  fontWeight: 600,
33
- border: '0.75px solid #898989',
32
+ border: '0.5px solid #646464',
34
33
  width: 'fit-content',
35
34
  backgroundColor: '#fff',
36
35
  cursor: 'pointer',
37
36
  },
38
37
  bracketsOpen: {
39
- fontSize: 18,
40
- fontFamily: 'Nunito Sans Semibold',
41
- color: '#787878',
38
+ fontSize: 20,
39
+ fontFamily: 'Nunito',
40
+ color: '#646464',
42
41
  marginRight: 3,
43
42
  fontWeight: 600,
44
43
  },
45
44
  bracketsClose: {
46
- fontSize: 18,
47
- fontFamily: 'Nunito Sans Semibold',
48
- color: '#787878',
45
+ fontSize: 20,
46
+ fontFamily: 'Nunito',
47
+ color: '#646464',
49
48
  marginLeft: 3,
50
49
  fontWeight: 600,
51
50
  },
51
+ ellipsis: {
52
+ fontFamily: 'Nunito',
53
+ fontWeight: 600,
54
+ fontSize: 10,
55
+ marginLeft: 3,
56
+ },
52
57
  operators: {
53
58
  color: '#646464',
54
59
  marginLeft: '3px',
@@ -62,9 +67,9 @@ export default () => ({
62
67
  margin: '1px',
63
68
  marginLeft: -6,
64
69
  fontWeight: 600,
65
- fontSize: '13px',
70
+ fontSize: '12px',
66
71
  color: '#fff',
67
- borderRadius: '15px',
72
+ borderRadius: '5px',
68
73
  fontFamily: 'Nunito',
69
74
  boxSizing: 'border-box',
70
75
  backgroundColor: '#646464',
@@ -76,7 +81,9 @@ export default () => ({
76
81
  },
77
82
  },
78
83
  divider: {
79
- borderRight: '2px solid #969696',
84
+ padding: '0 0 3px 0',
85
+ fontSize: '23px',
86
+ borderRight: '1px solid #969696',
80
87
  marginLeft: 7,
81
88
  },
82
89
  /* Custom Styling by Project */
@@ -99,39 +106,45 @@ export default () => ({
99
106
  backgroundColor: '#F5C3F1',
100
107
  },
101
108
  facetSectionDemographics: {
102
- color: '#7AA6B6',
109
+ color: '#357288',
103
110
  },
104
111
  facetSectionDemographicsBackground: {
105
112
  backgroundColor: '#E4ECE9',
113
+ border: '1px solid #646464',
106
114
  },
107
115
  facetSectionDiagnosis: {
108
- color: '#7AA6B6',
116
+ color: '#8C3F8D',
109
117
  },
110
118
  facetSectionDiagnosisBackground: {
111
- backgroundColor: '#E4ECE9',
119
+ backgroundColor: '#E1C9E140',
120
+ border: '1px solid #646464',
112
121
  },
113
122
  facetSectionSamples: {
114
- color: '#7AA6B6',
123
+ color: '#907642',
115
124
  },
116
125
  facetSectionSamplesBackground: {
117
- backgroundColor: '#E4ECE9',
126
+ backgroundColor: '#F0DFBD40',
127
+ border: '1px solid #646464',
118
128
  },
119
- facetSectionAssay: {
120
- color: '#7AA6B6',
129
+ facetSectionDatacategory: {
130
+ color: '#A85348',
121
131
  },
122
- facetSectionAssayBackground: {
123
- backgroundColor: '#E4ECE9',
132
+ facetSectionDatacategoryBackground: {
133
+ backgroundColor: '#F8D7D240',
134
+ border: '1px solid #646464',
124
135
  },
125
136
  facetSectionStudy: {
126
- color: '#7AA6B6',
137
+ color: '#1F6BBF',
127
138
  },
128
139
  facetSectionStudyBackground: {
129
- backgroundColor: '#E4ECE9',
140
+ backgroundColor: '#CEDEF040',
141
+ border: '1px solid #646464',
130
142
  },
131
- facetSectionLibrary: {
132
- color: '#7AA6B6',
143
+ facetSectionSequencinglibrary: {
144
+ color: '#14A773',
133
145
  },
134
- facetSectionLibraryBackground: {
135
- backgroundColor: '#E4ECE9',
146
+ facetSectionSequencinglibraryBackground: {
147
+ backgroundColor: '#DDEAE540',
148
+ border: '1px solid #646464',
136
149
  },
137
150
  });