@bento-core/query-bar 1.0.0 → 1.0.1-ccdihub.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 (7) hide show
  1. package/dist/components/CheckboxFilter.js +3 -1
  2. package/dist/generators/QueryBarGenerator.js +1 -1
  3. package/dist/generators/styles.js +58 -21
  4. package/package.json +11 -4
  5. package/src/components/CheckboxFilter.js +1 -1
  6. package/src/generators/QueryBarGenerator.js +1 -1
  7. package/src/generators/styles.js +58 -21
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
@@ -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
- }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
100
+ }, "Participant IDs"), ' ', ' ', /*#__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
22
  fontSize: '14px',
24
23
  color: '#0e3151'
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',
@@ -73,30 +78,32 @@ var _default = () => ({
73
78
  borderRadius: '15px',
74
79
  fontFamily: 'Nunito',
75
80
  boxSizing: 'border-box',
76
- backgroundColor: '#969696',
81
+ backgroundColor: '#646464',
77
82
  textTransform: 'capitalize',
78
83
  border: '1px solid #B4B4B4',
79
84
  padding: '1px 5px 0px 6px',
80
85
  '&:hover': {
81
- backgroundColor: '#969696'
86
+ backgroundColor: '#646464'
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 */
89
96
  localFind: {
90
- color: '#10A075'
97
+ color: '#7AA6B6'
91
98
  },
92
99
  localFindBackground: {
93
- backgroundColor: '#C0E9D7'
100
+ backgroundColor: '#E4ECE9'
94
101
  },
95
102
  facetSectionCases: {
96
- color: '#10A075'
103
+ color: '#7AA6B6'
97
104
  },
98
105
  facetSectionCasesBackground: {
99
- backgroundColor: '#C0E9D7'
106
+ backgroundColor: '#E4ECE9'
100
107
  },
101
108
  facetSectionFiles: {
102
109
  color: '#E636E4'
@@ -104,11 +111,41 @@ var _default = () => ({
104
111
  facetSectionFilesBackground: {
105
112
  backgroundColor: '#F5C3F1'
106
113
  },
114
+ facetSectionDemographics: {
115
+ color: '#7AA6B6'
116
+ },
117
+ facetSectionDemographicsBackground: {
118
+ backgroundColor: '#E4ECE9'
119
+ },
120
+ facetSectionDiagnosis: {
121
+ color: '#7AA6B6'
122
+ },
123
+ facetSectionDiagnosisBackground: {
124
+ backgroundColor: '#E4ECE9'
125
+ },
107
126
  facetSectionSamples: {
108
- color: '#10BEFF'
127
+ color: '#7AA6B6'
109
128
  },
110
129
  facetSectionSamplesBackground: {
111
- backgroundColor: '#C3EAF5'
130
+ backgroundColor: '#E4ECE9'
131
+ },
132
+ facetSectionAssay: {
133
+ color: '#7AA6B6'
134
+ },
135
+ facetSectionAssayBackground: {
136
+ backgroundColor: '#E4ECE9'
137
+ },
138
+ facetSectionStudy: {
139
+ color: '#7AA6B6'
140
+ },
141
+ facetSectionStudyBackground: {
142
+ backgroundColor: '#E4ECE9'
143
+ },
144
+ facetSectionLibrary: {
145
+ color: '#7AA6B6'
146
+ },
147
+ facetSectionLibraryBackground: {
148
+ backgroundColor: '#E4ECE9'
112
149
  }
113
150
  });
114
151
  exports.default = _default;
package/package.json CHANGED
@@ -1,14 +1,17 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.0",
4
- "description": "",
3
+ "version": "1.0.1-ccdihub.1",
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": {
7
7
  "build": "npm run lint && cross-env-shell rm -rf dist && NODE_ENV=production BABEL_ENV=es babel src --out-dir dist --copy-files",
8
8
  "test": "echo \"Error: no test specified\" && exit 1",
9
9
  "lint": "eslint src"
10
10
  },
11
- "repository": "https://github.com/CBIIT/bento-frontend",
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/CBIIT/bento-frontend.git"
14
+ },
12
15
  "publishConfig": {
13
16
  "access": "public"
14
17
  },
@@ -25,5 +28,9 @@
25
28
  },
26
29
  "author": "CTOS Bento Team",
27
30
  "license": "ISC",
28
- "gitHead": "4493c4a5fa666211345fea022ec06841a323d446"
31
+ "bugs": {
32
+ "url": "https://github.com/CBIIT/bento-frontend/issues"
33
+ },
34
+ "homepage": "https://github.com/CBIIT/bento-frontend#readme",
35
+ "devDependencies": {}
29
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
@@ -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
- Case IDs
116
+ Participant IDs
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
16
  fontSize: '14px',
18
17
  color: '#0e3151',
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',
@@ -67,30 +72,32 @@ export default () => ({
67
72
  borderRadius: '15px',
68
73
  fontFamily: 'Nunito',
69
74
  boxSizing: 'border-box',
70
- backgroundColor: '#969696',
75
+ backgroundColor: '#646464',
71
76
  textTransform: 'capitalize',
72
77
  border: '1px solid #B4B4B4',
73
78
  padding: '1px 5px 0px 6px',
74
79
  '&:hover': {
75
- backgroundColor: '#969696',
80
+ backgroundColor: '#646464',
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 */
83
90
  localFind: {
84
- color: '#10A075',
91
+ color: '#7AA6B6',
85
92
  },
86
93
  localFindBackground: {
87
- backgroundColor: '#C0E9D7',
94
+ backgroundColor: '#E4ECE9',
88
95
  },
89
96
  facetSectionCases: {
90
- color: '#10A075',
97
+ color: '#7AA6B6',
91
98
  },
92
99
  facetSectionCasesBackground: {
93
- backgroundColor: '#C0E9D7',
100
+ backgroundColor: '#E4ECE9',
94
101
  },
95
102
  facetSectionFiles: {
96
103
  color: '#E636E4',
@@ -98,10 +105,40 @@ export default () => ({
98
105
  facetSectionFilesBackground: {
99
106
  backgroundColor: '#F5C3F1',
100
107
  },
108
+ facetSectionDemographics: {
109
+ color: '#7AA6B6',
110
+ },
111
+ facetSectionDemographicsBackground: {
112
+ backgroundColor: '#E4ECE9',
113
+ },
114
+ facetSectionDiagnosis: {
115
+ color: '#7AA6B6',
116
+ },
117
+ facetSectionDiagnosisBackground: {
118
+ backgroundColor: '#E4ECE9',
119
+ },
101
120
  facetSectionSamples: {
102
- color: '#10BEFF',
121
+ color: '#7AA6B6',
103
122
  },
104
123
  facetSectionSamplesBackground: {
105
- backgroundColor: '#C3EAF5',
124
+ backgroundColor: '#E4ECE9',
125
+ },
126
+ facetSectionAssay: {
127
+ color: '#7AA6B6',
128
+ },
129
+ facetSectionAssayBackground: {
130
+ backgroundColor: '#E4ECE9',
131
+ },
132
+ facetSectionStudy: {
133
+ color: '#7AA6B6',
134
+ },
135
+ facetSectionStudyBackground: {
136
+ backgroundColor: '#E4ECE9',
137
+ },
138
+ facetSectionLibrary: {
139
+ color: '#7AA6B6',
140
+ },
141
+ facetSectionLibraryBackground: {
142
+ backgroundColor: '#E4ECE9',
106
143
  },
107
144
  });