-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- **[ALS-5339]** Create Data Hierarchy View (#256) - Initial creation of the Data Hierarchy View. - **[ALS-5208]** Updates to Authorized BDC (#257) - Remove Open Access from Authorized BDC. - Remove the top panel from the Data Access Dashboard. - **[ALS-5209]** Create Auth PIC-SURE Landing Page (#259) - Develop the authorized access landing page. - **[ALS-5439]** Add Open Access Header (#258) - Implementation of the Open Access header. - **[ALS-5379]** Bug Fixes and Improvements (#260) - Resolve actions and variable info modal bugs. - Update `biodatacatalyst-ui/src/main/webapp/picsureui/search-interface/filter-model.js`. - Address study mismatch issue. - **[ALS-2794]** Enhancements to Cardiac Surgery Authorized Tour (#261) - Cardiac surgery now utilized for the Authorized tour.
- Loading branch information
Showing
19 changed files
with
1,077 additions
and
780 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
biodatacatalyst-ui/src/main/webapp/picsureui/landing/landing.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| <style> | ||
| #main-content { | ||
| margin-top: unset; | ||
| padding-top: unset; | ||
| } | ||
| .landing-container { | ||
| width: 80%; | ||
| margin: 2% auto 0 auto; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| height: 75%; | ||
| } | ||
| .landing-nav-buttons { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-around; | ||
| width: 80%; | ||
| } | ||
| .landing-anchor { | ||
| color: var(--catalyst-blue); | ||
| background-color: transparent; | ||
| text-decoration: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| text-align: center; | ||
| } | ||
| .landing-anchor i { | ||
| font-size: 5rem; | ||
| padding-bottom: .3em; | ||
| margin: 0 auto; | ||
| text-decoration: none; | ||
| } | ||
| .landing-anchor p { | ||
| font-size: 1.6rem; | ||
| } | ||
| /* Grow landing anchor on hover */ | ||
| .landing-anchor:hover { | ||
| transform: scale(1.1); | ||
| transition: transform .2s; | ||
| } | ||
| .landing-counts { | ||
| background: var(--catalyst-blue); | ||
| color: white; | ||
| border-radius: 8px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-around; | ||
| padding: 3rem 1rem; | ||
| width: 70%; | ||
| } | ||
| .landing-count { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| font-size: 2.5rem; | ||
| font-weight: 100; | ||
| } | ||
| .search-container { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 2rem; | ||
| } | ||
| .search-container button { | ||
| margin-left: 1rem; | ||
| padding: .625rem 2.5rem; | ||
| border-radius: .625em; | ||
| } | ||
| #landingSearch { | ||
| flex-grow: 1; | ||
| padding: 1rem; | ||
| } | ||
| .search-container input { | ||
| padding: 10px; | ||
| width: 100%; | ||
| border: 1px solid #C2C2C2; | ||
| } | ||
| </style> | ||
| <div class="landing-container"> | ||
| <div> | ||
| <div class="search-container"> | ||
| <input type="text" placeholder="Search studies or variables" class="form-control" style="padding: 10px; width: 100%;" | ||
| id="landingSearchInput"/> | ||
| <button class="btn btn-primary" id="landingSearchButton">Search</button> | ||
| </div> | ||
| <div> | ||
| <p style="font-size: 1.3em"><i>NHLBI BioData Catalyst® Powered by PIC-SURE</i> can be used to explore studies, conduct feasibility tests, create cohorts,<br /> and select data at the variable-value and genomic variant level.</p> | ||
| </div> | ||
| </div> | ||
| <div class="landing-nav-buttons"> | ||
| <a class="landing-anchor" href="/picsureui/queryBuilder" tabindex="0"> | ||
| <div> | ||
| <i class="fa-solid fa-magnifying-glass-chart"></i> | ||
| <p>Search Variables,<br/> Build Cohorts, and<br /> Export Participant-<br/>Level Data in<br/> <b>Authorized Access</b></p> | ||
| </div> | ||
| </a> | ||
| <a class="landing-anchor" href="/picsureui/dataAccess" tabindex="0"> | ||
| <div> | ||
| <i class="fa-solid fa-table-list"></i> | ||
| <p>Browse Your<br/>Access to<br/>Studies in<br/><b>Data Access<br/> Dashboard</b></p> | ||
| </div> | ||
| </a> | ||
| <a class="landing-anchor" href="https://biodatacatalyst.nhlbi.nih.gov/" target="_blank" tabindex="0"> | ||
| <div> | ||
| <i class="fa-solid fa-graduation-cap"></i> | ||
| <p>Learn<br/> About the <br/><b>BDC Ecosystem</b></p> | ||
| </div> | ||
| </a> | ||
| <a href="https://openpicsure.biodatacatalyst.nhlbi.nih.gov/picsureui/" target="_blank" class="landing-anchor" | ||
| tabindex="0"> | ||
| <div style="justify-content: center"> | ||
| <i class="fa-solid fa-lock-open"></i> | ||
| <p>Discover and<br/> Explore All Studies in<br/><b>Open PIC-SURE</b></p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="landing-counts"> | ||
| <div class="landing-count"> | ||
| <div id="authorized-studies"></div> | ||
| <div id="authorized-studies-spinner">0</div> | ||
| <p>Available Studies</p> | ||
| </div> | ||
| <div class="landing-count"> | ||
| <div id="authorized-participants"></div> | ||
| <div id="authorized-participants-spinner">0</div> | ||
| <p>Total Participants</p> | ||
| </div> | ||
| <div class="landing-count"> | ||
| <div id="authorized-variables"></div> | ||
| <div id="authorized-variables-spinner">0</div> | ||
| <p>Total Variables</p> | ||
| </div> | ||
| </div> | ||
| </div> |
106 changes: 106 additions & 0 deletions
106
biodatacatalyst-ui/src/main/webapp/picsureui/landing/landing.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| define(["underscore", "jquery", "backbone", "handlebars", "text!landing/landing.hbs", "picSure/search", "picSure/settings", | ||
| "picSure/queryBuilder", "common/spinner", "common/transportErrors", "studyAccess/study-utility", | ||
| "search-interface/search-util",], | ||
| function (_, $, BB, HBS, landingTemplate, search, settings, queryBuilder, spinner, | ||
| transportErrors, studyUtility, searchUtil) { | ||
| const landing = { | ||
| resources: { | ||
| auth: settings.picSureResourceId | ||
| } | ||
| }; | ||
|
|
||
| return BB.View.extend({ | ||
| initialize: function () { | ||
| this.template = HBS.compile(landingTemplate); | ||
| }, | ||
| events: { | ||
| "click #landingSearchButton": "handleLandingSearch", | ||
| "keypress #landingSearchInput": "handleLandingSearchKeypress", | ||
| }, | ||
| handleLandingSearchKeypress: function (event) { | ||
| if (event.keyCode === 13) { | ||
| this.handleLandingSearch(event); | ||
| } | ||
| }, | ||
| handleLandingSearch: function (event) { | ||
| // Log the search event | ||
| let searchQuery = $("#landingSearchInput").val(); | ||
|
|
||
| // encode the search query | ||
| searchQuery = encodeURIComponent(searchQuery); | ||
| sessionStorage.setItem("landingSearchQuery", searchQuery); | ||
|
|
||
| // Navigate to the explorer page | ||
| window.location.href = "/picsureui/queryBuilder"; | ||
| }, | ||
| render: function () { | ||
| // get counts for studies and participants | ||
| let records = studyUtility.groupRecordsByAccess(); | ||
|
|
||
| // get counts for studies and participants | ||
| let temp = records.permitted.map((rec) => { | ||
| return rec.study_identifier; | ||
| }); | ||
| temp = [...new Set(temp)]; | ||
| let authStudiesCount = temp.length; | ||
|
|
||
| // query for participant counts of authorized and open access resources | ||
| let query = queryBuilder.createQueryNew({}, {}, landing.resources.auth); | ||
| query.query.expectedResultType = "COUNT"; | ||
| queryBuilder.updateConsentFilters(query, settings); | ||
| let deferredParticipants = $.ajax({ | ||
| url: window.location.origin + "/picsure/query/sync", | ||
| type: 'POST', | ||
| headers: {"Authorization": "Bearer " + JSON.parse(sessionStorage.getItem("session")).token}, | ||
| contentType: 'application/json', | ||
| data: JSON.stringify(query), | ||
| success: (function (response) { | ||
| $("#authorized-participants").html(parseInt(response).toLocaleString()); | ||
| $("#authorized-participants-spinner").html(""); | ||
| $('#authorized-studies').html(authStudiesCount); | ||
| $('#authorized-studies-spinner').html(""); | ||
| }).bind(this), | ||
| statusCode: { | ||
| 401: function () { | ||
| } | ||
| }, | ||
| error: function () { | ||
| $("#authorized-participants").html("0"); | ||
| $("#authorized-participants-spinner").html(""); | ||
| } | ||
| }); | ||
|
|
||
| let excludedTags = searchUtil.getAntiScopeTags(); | ||
| let deferredVariables = $.ajax({ | ||
| url: window.location.origin + "/picsure/search/36363664-6231-6134-2D38-6538652D3131", | ||
| type: 'POST', | ||
| contentType: 'application/json', | ||
| data: JSON.stringify({ | ||
| "query": { | ||
| "searchTerm": "", | ||
| "includedTags": [], | ||
| "excludedTags": excludedTags, | ||
| "returnTags": false, | ||
| "limit": 1 | ||
| } | ||
| }), | ||
| success: function (response) { | ||
| $("#authorized-variables").html(parseInt(response.results.numResults).toLocaleString()); | ||
| $('#authorized-variables-spinner').html(""); | ||
| }, | ||
| error: function (response) { | ||
| console.log(response); | ||
| } | ||
| }); | ||
|
|
||
| spinner.medium(deferredVariables, "#authorized-variables-spinner", "spinner2"); | ||
| spinner.medium(deferredParticipants, "#authorized-participants-spinner", "spinner2"); | ||
| spinner.medium(deferredParticipants, "#authorized-studies-spinner", "spinner2"); | ||
|
|
||
| this.$el.html(this.template()); | ||
| return this; | ||
| } | ||
| }); | ||
| }) | ||
| ; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.