Skip to content

Commit

Permalink
feat(discovery): updates to discovery from HEAL
Browse files Browse the repository at this point in the history
  • Loading branch information
Will committed Jul 8, 2021
1 parent 73fd973 commit 57ab9e5
Show file tree
Hide file tree
Showing 17 changed files with 1,629 additions and 572 deletions.
25 changes: 14 additions & 11 deletions docs/portal_config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ Below is an example, with inline comments describing what each JSON block config
"discoveryConfig": { // config for Discovery page. Required if 'featureFlags.discovery' is true. See src/Discovery/DiscoveryConfig.d.ts for Typescript schema.
"public": true, // optional, defaults to true. If false, requires user to sign in before seeing the Discovery page
"features": {
"exportToWorkspaceBETA": { // configures the export to workspace feature. If enabled, the Discovery page data must contain a field which is a list of GUIDs for each study. See `manifestFieldName`
"exportToWorkspace": { // configures the export to workspace feature. If enabled, the Discovery page data must contain a field which is a list of GUIDs for each study. See `manifestFieldName`
"enable": boolean
"enableDownloadManifest": boolean // enables a button which allows user to download a manifest file for gen3 client
"manifestFieldName": string // the field in the Discovery page data that contains the list of GUIDs that link to each study's data files.
Expand All @@ -412,21 +412,24 @@ Below is an example, with inline comments describing what each JSON block config
"enabled": true
}
},
"advSearchFilters": {
"enabled": true
},
"authorization": {
"enabled": true // toggles whether Discovery page displays users' access to studies. If true, 'useArboristUI' must also be set to true.
}
},
"aggregations": [ // configures the statistics at the top of the discovery page (e.g. 'XX Studies', 'XX,XXX Subjects')
{
"name": "Studies",
"field": "study_id",
"type": "count" // count of rows in data where `field` is non-empty
},
{
"name": "Total Subjects",
"field": "_subjects_count",
"type": "sum" // sums together all numeric values in `row[field]`. `field` must be a numeric field.
}
{
"name": "Studies",
"field": "study_id",
"type": "count" // count of rows in data where `field` is non-empty
},
{
"name": "Total Subjects",
"field": "_subjects_count",
"type": "sum" // sums together all numeric values in `row[field]`. `field` must be a numeric field.
}
],
"tagSelector": {
"title": "Associated tags organized by category"
Expand Down
248 changes: 236 additions & 12 deletions src/Discovery/Discovery.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
.discovery-container {
background-color: #f2f2f2;
padding: 40px 32px;
padding: 30px 32px;
font-family: Montserrat
}

.discovery-container * {
font-family: inherit;
}

/* This is a fix for the global 'button' element style override in portal
Expand Down Expand Up @@ -30,10 +35,10 @@
}

.discovery-header {
border-radius: 5px;
border-radius: 8px;
background-color: #fff;
margin-bottom: 36px;
height: 191px;
padding: 10px 16px;
margin-bottom: 16px;
display: flex;
flex-direction: row;
align-items: center;
Expand Down Expand Up @@ -69,7 +74,7 @@

.discovery-header__stat-border {
width: 1px;
height: 150px;
height: 100px;
border-left: solid #e7e7e7 1px;
}

Expand All @@ -82,6 +87,13 @@

.discovery-header__stat-label {
font-size: 1.25rem;
font-size: 40px;
line-height: 50px;
}

.discovery-header__stat-label {
text-transform: uppercase;
font-size: 14px;
}

.discovery-header__tags-container {
Expand All @@ -95,14 +107,21 @@
border-bottom: solid 1px #e7e7e7;
font-weight: normal;
font-size: 1.125rem;
}

.discovery-header__tags-header {
cursor: default;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #555;
}

.discovery-header__tags {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
justify-content: space-between;
}

.discovery-header__tag-group {
Expand Down Expand Up @@ -139,39 +158,108 @@
user-select: none;
}

.discovery-tag {
line-height: 18px;
font-size: 10px;
box-sizing: border-box;
border-radius: 5px;
border-width: 2px;
margin-bottom: 3px;
}

.discovery-tag--selected {
color: #fff;
}

.discovery-table-container {
.discovery-search {
border-radius: 5px;
max-width: 500px;
}

.discovery-export__selected-ct {
color: var(--g3-color__gray);
}

.discovery-studies-container {
border-radius: 8px;
background-color: #fff;
padding: 20px;
overflow-x: auto;
overflow-x: hidden;
}

.discovery-table__header {
.discovery-studies__header {
width: 100%;
margin-bottom: 12px;
display: flex;
align-items: baseline;
justify-content: space-between;
}

.discovery-filters {
position: absolute;
width: 280px;
margin-right: 20px;
}

.discovery-search-container {
margin-bottom: 10px;
}

.discovery-search {
border-radius: 5px;
border-color: rgb(139, 51, 105);
border-width: 1px;
border-radius: 7px;
max-width: 500px;
}

.discovery-export__selected-ct {
color: var(--g3-color__gray);
color: #7f7f7f;
}

.discovery-table-container {
border-radius: 8px;
background-color: #fff;
transform: translateX(0);
transition: transform 300ms, width 250ms 50ms;
overflow-x: auto;
}

.discovery-table-container--collapsed {
width: calc(100% - 300px);
transform: translateX(300px);
transition: transform 300ms, width 250ms 50ms;
}

.discovery-table-header {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}

.discovery-table__row {
cursor: pointer;
overflow: visible;
position: relative;
}

/* some light css hacks here to override antd default expanded row styles. */
/* HACK: Because the study description row is a separate row under the hood,
* it doesn't change color when you highlight its parent row.
* To fix this, we make the study description row transparent on hover,
* and add an ::after element behind the study description row, to give
* it the appearance of changing color when its parent row is highlighted.
* ------------------------------------------------------------------------
*/

.discovery-table-container td.ant-table-cell {
border-color: #dfe3e2;
}
.discovery-table-container th.ant-table-cell,
.discovery-table-container td.ant-table-cell {
background: #dfe3e2;
}
.discovery-table-container th.ant-table-cell {
border-bottom: 1px solid #dfe3e2;
}
.discovery-table__expanded-row > td.ant-table-cell {
color: var(--g3-color__titanium);
}
Expand All @@ -189,6 +277,61 @@
* Add an ellipsis after N rows of text.
* This css won't work in IE 11, but it's ok, there just won't be an ellipsis.
**/
background: #dfe3e2;
font-size: 12px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}

.discovery-table-container .ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell {
border-color: rgba(0,0,0,0);
}

.discovery-table-container .ant-table-tbody > tr.ant-table-row {
border-color: #dfe3e2;
transition: border-color 0.3s;
}
.discovery-table-container .ant-table-tbody > tr.ant-table-row:hover {
border-color: rgba(0,0,0,0);
}
.discovery-table-container .ant-table-tbody > tr.ant-table-row::after {
display: block;
position: absolute;
bottom: -35px;
left: 0;
z-index: 0;
content: "";
width: 100%;
height: 35px;
background-color: #dfe3e2;
transition: background-color 0.3s, border-color 0.3s;
}
.discovery-table-container .ant-table-tbody > tr:not(.ant-table-row-selected).ant-table-row:hover::after {
background-color: rgb(250,250,250);
}
.discovery-table-container .ant-table-tbody > tr.ant-table-row-selected::after {
background-color: #e6f7ff;
}
/* Make the expanded row's background transparent on hover, so that it appears
* to change color on hover.
*/
.discovery-table-container tr.ant-table-expanded-row > td, tr.ant-table-expanded-row:hover > td {
background: rgba(0,0,0,0);
}
/* ---------------------------------------------------- */
/* END HACK */

.discovery-table__expanded-row-content {
background: inherit;
margin-top: -25px;
cursor: pointer;
height: 35px;
width: 100%;
overflow: hidden;
/* ---------
* Add an ellipsis after N rows of text.
* This css won't work in IE 11, but it's ok, there just won't be an ellipsis.
**/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
Expand All @@ -209,6 +352,56 @@
font-size: 0.625rem;
}

.discovery-popover {
max-width: 500px;
}

.discovery-popover__text {
color: #7f7f7f;
font-size: 12px;
}

.discovery-modal {
box-sizing: border-box;
font-family: Montserrat;
}

.discovery-modal * {
box-sizing: inherit;
}

.discovery-modal__close-button {
color: rgb(139, 51, 105);
text-transform: uppercase;
font-weight: 700;
}

.discovery-modal__header-text {
font-family: 'Montserrat';
margin: 6px;
}

.discovery-modal__header-buttons {
display: flex;
justify-content: space-between;
}

.discovery-modal-attributes-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
}

.discovery-modal__attribute-group--fullwidth {
flex: 1 1 100%;
}

.discovery-modal__attribute-group--halfwidth {
flex: 1 1 40%;
}

.discovery-modal__attribute-group {
display: flex;
flex-direction: column;
Expand All @@ -225,4 +418,35 @@

.discovery-hidden-link {
visibility: hidden;
margin: 12px 6px;
}

.discovery-modal__attribute {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #dfe3e2;
padding: 4px;
border-radius: 4px;
color: #313839;
font-size: 12px;
}

.discovery-modal__attribute:not(:first-child) {
margin-top: 8px;
}

.discovery-modal__attribute-name {
font-weight: 700;
text-transform: uppercase;
margin-right: 10px;
}

.discovery-modal__attribute-value {
text-align: right;
}

.discovery-modal__attribute-value--multiline {
display: block;
text-align: left;
}
2 changes: 1 addition & 1 deletion src/Discovery/Discovery.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ describe('Modal', () => {

// expect field to show correct field name, if configured to show a field name.
if (fieldCfg.includeName !== false) {
expect(field.find('.discovery-modal__attribute-name').first().text()).toBe(`${fieldCfg.name}:`);
expect(field.find('.discovery-modal__attribute-name').first().text()).toBe(`${fieldCfg.name}`);
} else {
expect(field.exists('.discovery-modal__attribute-name')).toBe(false);
}
Expand Down
Loading

0 comments on commit 57ab9e5

Please sign in to comment.