@bento-core/query-bar 1.0.0-alpha.0 → 1.0.0-c3dc.0

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 +9 -9
  3. package/dist/generators/styles.js +68 -25
  4. package/package.json +12 -5
  5. package/src/components/CheckboxFilter.js +1 -1
  6. package/src/generators/QueryBarGenerator.js +9 -9
  7. package/src/generators/styles.js +68 -25
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
  });
@@ -94,17 +94,17 @@ const QueryBarGenerator = function QueryBarGenerator() {
94
94
  }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
95
95
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
96
96
  onClick: clearUpload
97
- }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
97
+ }, "INPUT PARTICIPANT 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 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
104
104
  }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
105
105
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
106
106
  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", {
107
+ }, "INPUT PARTICIPANT SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
108
108
  className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
109
109
  key: idx,
110
110
  onClick: () => deleteAutocompleteItem(d.title)
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,35 +73,37 @@ 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
- 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,47 @@ var _default = () => ({
104
111
  facetSectionFilesBackground: {
105
112
  backgroundColor: '#F5C3F1'
106
113
  },
114
+ facetSectionDemographics: {
115
+ color: '#357288'
116
+ },
117
+ facetSectionDemographicsBackground: {
118
+ backgroundColor: '#E4ECE9',
119
+ border: '1px solid #646464'
120
+ },
121
+ facetSectionDiagnosis: {
122
+ color: '#8C3F8D'
123
+ },
124
+ facetSectionDiagnosisBackground: {
125
+ backgroundColor: '#E1C9E140',
126
+ border: '1px solid #646464'
127
+ },
107
128
  facetSectionSamples: {
108
- color: '#10BEFF'
129
+ color: '#907642'
109
130
  },
110
131
  facetSectionSamplesBackground: {
111
- backgroundColor: '#C3EAF5'
132
+ backgroundColor: '#F0DFBD40',
133
+ border: '1px solid #646464'
134
+ },
135
+ facetSectionDatacategory: {
136
+ color: '#A85348'
137
+ },
138
+ facetSectionDatacategoryBackground: {
139
+ backgroundColor: '#F8D7D240',
140
+ border: '1px solid #646464'
141
+ },
142
+ facetSectionStudy: {
143
+ color: '#1F6BBF'
144
+ },
145
+ facetSectionStudyBackground: {
146
+ backgroundColor: '#CEDEF040',
147
+ border: '1px solid #646464'
148
+ },
149
+ facetSectionLibrary: {
150
+ color: '#14A773'
151
+ },
152
+ facetSectionLibraryBackground: {
153
+ backgroundColor: '#DDEAE540',
154
+ border: '1px solid #646464'
112
155
  }
113
156
  });
114
157
  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-alpha.0",
4
- "description": "",
3
+ "version": "1.0.0-c3dc.0",
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
  },
@@ -20,10 +23,14 @@
20
23
  "react-redux": "^7.2.1"
21
24
  },
22
25
  "dependencies": {
23
- "@bento-core/facet-filter": "^1.0.0-alpha.0",
26
+ "@bento-core/facet-filter": "^1.0.0",
24
27
  "lodash": "^4.17.20"
25
28
  },
26
29
  "author": "CTOS Bento Team",
27
30
  "license": "ISC",
28
- "gitHead": "a2b58e6757e02360c33611cc425674a227bd7e5b"
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
@@ -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
  })
@@ -102,7 +102,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
102
102
  className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
103
103
  onClick={clearUpload}
104
104
  >
105
- INPUT CASE SET
105
+ INPUT PARTICIPANT SET
106
106
  </span>
107
107
  ) : null}
108
108
  {autocomplete.length
@@ -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 ID
117
117
  </span>
118
118
  {' '}
119
119
  {' '}
@@ -133,7 +133,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
133
133
  className={clsx(classes.filterCheckboxes, classes.localFind)}
134
134
  onClick={clearUpload}
135
135
  >
136
- INPUT CASE SET
136
+ INPUT PARTICIPANT SET
137
137
  </span>
138
138
  {' '}
139
139
  </>
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,35 +67,37 @@ 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
- 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,46 @@ export default () => ({
98
105
  facetSectionFilesBackground: {
99
106
  backgroundColor: '#F5C3F1',
100
107
  },
108
+ facetSectionDemographics: {
109
+ color: '#357288',
110
+ },
111
+ facetSectionDemographicsBackground: {
112
+ backgroundColor: '#E4ECE9',
113
+ border: '1px solid #646464',
114
+ },
115
+ facetSectionDiagnosis: {
116
+ color: '#8C3F8D',
117
+ },
118
+ facetSectionDiagnosisBackground: {
119
+ backgroundColor: '#E1C9E140',
120
+ border: '1px solid #646464',
121
+ },
101
122
  facetSectionSamples: {
102
- color: '#10BEFF',
123
+ color: '#907642',
103
124
  },
104
125
  facetSectionSamplesBackground: {
105
- backgroundColor: '#C3EAF5',
126
+ backgroundColor: '#F0DFBD40',
127
+ border: '1px solid #646464',
128
+ },
129
+ facetSectionDatacategory: {
130
+ color: '#A85348',
131
+ },
132
+ facetSectionDatacategoryBackground: {
133
+ backgroundColor: '#F8D7D240',
134
+ border: '1px solid #646464',
135
+ },
136
+ facetSectionStudy: {
137
+ color: '#1F6BBF',
138
+ },
139
+ facetSectionStudyBackground: {
140
+ backgroundColor: '#CEDEF040',
141
+ border: '1px solid #646464',
142
+ },
143
+ facetSectionLibrary: {
144
+ color: '#14A773',
145
+ },
146
+ facetSectionLibraryBackground: {
147
+ backgroundColor: '#DDEAE540',
148
+ border: '1px solid #646464',
106
149
  },
107
150
  });