[ENH] Implemented separate download buttons for participant and datas…

…et (#145) * Reworked download results button - Implemented two buttons - One for downloading participant-level results tsv - One for downloading dataset-level results tsv - Removed the toggle checkbox - Removed `toggleResultsTSV` data property - Updated `generateTSVString` and `downloadResults` methods - Reworked component template * Updated styles * Imported external style sheet into cypress component config * Updated README.md * Updated tests * Fixed a test case description button -> buttons
neurobagel · Jul 13, 2023 · e9a71fd · e9a71fd
1 parent 3e19918
commit e9a71fd
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 65 deletions.
diff --git 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
@@ -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;
 }
diff --git a/components/DownloadResultsButton.vue b/components/DownloadResultsButton.vue
@@ -4,33 +4,34 @@
     class="d-flex flex-row-reverse"
     style="margin-top: 1em;"
   >
-    <b-row
-      class="flex-column"
-    >
-      <b-col>
-        <input
-          v-model="toggleResultsTSV"
-          data-cy="toggle-tsv-checkbox"
-          class="form-check-input"
-          type="checkbox"
+    <b-row>
+      <div class="d-flex">
+        <b-button
+          class="nb-button"
+          :disabled="downloads.length === 0"
+          data-cy="download-participant-level-results-button"
+          @click="downloadResults('participant-level')"
         >
-        <label
-          class="form-label"
-        >Toggle level of detail to download</label>
-      </b-col>
+          <b-icon
+            icon="download"
+            font-scale="1"
+          />
+          Download Participant-level Results
+        </b-button>
 
-      <b-button
-        class="nb-button"
-        :disabled="downloads.length === 0"
-        data-cy="download-results-button"
-        @click="downloadResults"
-      >
-        <b-icon
-          icon="download"
-          font-scale="1"
-        />
-        {{ toggleDownloadResultsButtonText }}
-      </b-button>
+        <b-button
+          class="nb-button download-dataset-level-results-button"
+          :disabled="downloads.length === 0"
+          data-cy="download-dataset-level-results-button"
+          @click="downloadResults('dataset-level')"
+        >
+          <b-icon
+            icon="download"
+            font-scale="1"
+          />
+          Download Dataset-level Results
+        </b-button>
+      </div>
     </b-row>
   </b-col>
 </template>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')