diff --git a/README.md b/README.md index 03abc01..09a23db 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,6 @@ The query tool offers two different TSV files for results: - Participant-level results TSV contains: dataset id, subject id, age, sex, diagnosis, assessment, session id, session file path, number of sessions, and imaging modality The output files can be joined using `DatasetID` as key.\ -You can choose which file to download by checking and uncehcking the `Toggle Results TSV` checkbox above the `Download Results` button. ## Testing diff --git a/assets/css/main.css b/assets/css/main.css index 7bebe52..d753f41 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -99,6 +99,14 @@ background-color: #2d0644; } +.download-dataset-level-results-button { + margin-left: 0.25em; +} + +input[type="checkbox"]:checked { + background-color: #470A68; +} + #query-controls { padding-top: 1em; padding-bottom: 1em; @@ -121,4 +129,8 @@ display: flex; align-items: center; justify-content: center; +} + +.vs__dropdown-option.vs__dropdown-option--highlight { + background-color: #470A68; } \ No newline at end of file diff --git a/components/DownloadResultsButton.vue b/components/DownloadResultsButton.vue index a4592ee..c9d713b 100644 --- a/components/DownloadResultsButton.vue +++ b/components/DownloadResultsButton.vue @@ -4,33 +4,34 @@ class="d-flex flex-row-reverse" style="margin-top: 1em;" > - - - +
+ - - + + Download Participant-level Results + - - - {{ toggleDownloadResultsButtonText }} - + + + Download Dataset-level Results + +
@@ -47,25 +48,17 @@ export default { default: () => [], }, }, - data() { - return { - toggleResultsTSV: false, - }; - }, computed: { displayDownloadResultsButton() { return !Object.is(this.results, null) && this.results.length !== 0; }, - toggleDownloadResultsButtonText() { - return this.toggleResultsTSV ? 'Download Participant-level Results' : 'Download Dataset-level Results'; - }, }, methods: { - generateTSVString() { + generateTSVString(buttonIdentifier) { const tsvRows = []; const datasets = this.results.filter((res) => this.downloads.includes(res.dataset_name)); - if (this.toggleResultsTSV) { + if (buttonIdentifier === 'participant-level') { const headers = ['DatasetID', 'SubjectID', 'Age', 'Sex', 'Diagnosis', 'Assessment', 'SessionID', 'SessionPath', 'NumSessions', 'Modality'].join('\t'); tsvRows.push(headers); @@ -103,11 +96,11 @@ export default { return tsvRows.join('\n'); }, - downloadResults() { + downloadResults(buttonIdentifier) { const element = document.createElement('a'); element.setAttribute('href', `data:text/tab-separated-values;charset=utf-8, - ${encodeURIComponent(this.generateTSVString())}`); - if (this.toggleResultsTSV) { + ${encodeURIComponent(this.generateTSVString(buttonIdentifier))}`); + if (buttonIdentifier === 'participant-level') { element.setAttribute('download', 'participant-results.tsv'); } else { element.setAttribute('download', 'dataset-results.tsv'); diff --git a/cypress/component/DownloadResultsButton.cy.js b/cypress/component/DownloadResultsButton.cy.js index 647e870..66a41f8 100644 --- a/cypress/component/DownloadResultsButton.cy.js +++ b/cypress/component/DownloadResultsButton.cy.js @@ -22,32 +22,19 @@ const props = { }; describe('Download results button', () => { - it('Displays the disabled download results button', () => { + it('Displays the disabled download results buttons', () => { cy.mount(DownloadResultsButton, { propsData: props, }); - cy.get('[data-cy="download-results-button"]').should('be.visible').should('be.disabled'); + cy.get('[data-cy="download-participant-level-results-button"]').should('be.visible').should('be.disabled'); + cy.get('[data-cy="download-dataset-level-results-button"]').should('be.visible').should('be.disabled'); }); - it('Displays the enabled download results button', () => { + it('Displays the enabled download results buttons', () => { props.downloads = ['cool-dataset']; cy.mount(DownloadResultsButton, { propsData: props, }); - cy.get('[data-cy="download-results-button"]').should('be.visible').should('not.be.disabled'); - }); - it('Displays the toggle results tsv checkbox', () => { - cy.mount(DownloadResultsButton, { - propsData: props, - }); - cy.get('[data-cy="toggle-tsv-checkbox"]').should('be.visible'); - }); - it("Changes the download results button's text when the box is checked and unchecked", () => { - cy.mount(DownloadResultsButton, { - propsData: props, - }); - cy.get('[data-cy="toggle-tsv-checkbox"]').check(); - cy.get('[data-cy="download-results-button"]').contains('Download Participant-level Results'); - cy.get('[data-cy="toggle-tsv-checkbox"]').uncheck(); - cy.get('[data-cy="download-results-button"]').contains('Download Dataset-level Results'); + cy.get('[data-cy="download-participant-level-results-button"]').should('be.visible').should('not.be.disabled'); + cy.get('[data-cy="download-dataset-level-results-button"]').should('be.visible').should('not.be.disabled'); }); }); diff --git a/cypress/component/ResultCard.cy.js b/cypress/component/ResultCard.cy.js index d112d7f..d5f09de 100644 --- a/cypress/component/ResultCard.cy.js +++ b/cypress/component/ResultCard.cy.js @@ -19,6 +19,7 @@ describe('Result card', () => { cy.get('[data-cy="card-cool-dataset-checkbox"]').should('be.visible').should('be.checked'); }); it('Emits update-download when a checkbox is checked/unchecked', () => { + cy.viewport(2000, 1000); cy.mount(ResultCard, { listeners: { 'update-downloads': cy.spy().as('spy'), diff --git a/cypress/component/ResultsContainer.cy.js b/cypress/component/ResultsContainer.cy.js index 4d12889..c666bf5 100644 --- a/cypress/component/ResultsContainer.cy.js +++ b/cypress/component/ResultsContainer.cy.js @@ -77,18 +77,23 @@ describe('Results', () => { cy.get('[data-cy="cool-dataset"]').should('be.visible'); cy.get('[data-cy="not-so-cool-dataset"]').should('be.visible'); }); - it('Displays download results button (and its component) and enables/disables it by checking/unchecking checkboxes', () => { + it('Displays download results buttons (and its component) and enables/disables it by checking/unchecking checkboxes', () => { + cy.viewport(2000, 1000); cy.mount(ResultsContainer, { stubs, propsData: props, }); cy.get('[data-cy="download-results"]').should('be.visible'); - cy.get('[data-cy="download-results-button"]').should('be.disabled'); + cy.get('[data-cy="download-participant-level-results-button"]').should('be.disabled'); + cy.get('[data-cy="download-dataset-level-results-button"]').should('be.disabled'); cy.get('[data-cy="select-all"]').check(); - cy.get('[data-cy="download-results-button"]').should('not.be.disabled'); + cy.get('[data-cy="download-participant-level-results-button"]').should('not.be.disabled'); + cy.get('[data-cy="download-dataset-level-results-button"]').should('not.be.disabled'); cy.get('[data-cy="card-cool-dataset-checkbox"]').uncheck(); - cy.get('[data-cy="download-results-button"]').should('not.be.disabled'); + cy.get('[data-cy="download-participant-level-results-button"]').should('not.be.disabled'); + cy.get('[data-cy="download-dataset-level-results-button"]').should('not.be.disabled'); cy.get('[data-cy="card-not-so-cool-dataset-checkbox"]').uncheck(); - cy.get('[data-cy="download-results-button"]').should('be.disabled'); + cy.get('[data-cy="download-participant-level-results-button"]').should('be.disabled'); + cy.get('[data-cy="download-dataset-level-results-button"]').should('be.disabled'); }); }); diff --git a/cypress/e2e/DatasetResultsTSV.cy.js b/cypress/e2e/DatasetResultsTSV.cy.js index b52c815..4f174a3 100644 --- a/cypress/e2e/DatasetResultsTSV.cy.js +++ b/cypress/e2e/DatasetResultsTSV.cy.js @@ -10,12 +10,12 @@ const response = [ ]; describe('Dataset results TSV', () => { - it('Removes a newline character from a dataset name in the downloaded results file', () => { + it('Removes a newline character from a dataset name in the downloaded dataset-level results file', () => { cy.intercept('query/?*', response).as('call'); cy.visit('/'); cy.get('[data-cy="submit-query"]').click(); cy.get('[data-cy="select-all"]').check(); - cy.get('[data-cy="download-results-button"]').click(); + cy.get('[data-cy="download-dataset-level-results-button"]').click(); cy.readFile('cypress/downloads/dataset-results.tsv').should('contain', 'some name'); }); }); diff --git a/cypress/support/component.js b/cypress/support/component.js index d49173e..a776db3 100644 --- a/cypress/support/component.js +++ b/cypress/support/component.js @@ -21,6 +21,9 @@ import './commands'; import '../../plugins/bootstrap-vue'; import '../../plugins/vue-select'; +// Import styles +import '../../assets/css/main.css'; + // Alternatively you can use CommonJS syntax: // require('./commands')