Merge branch 'temp' into dependabot/npm_and_yarn/nuxt-2.17.2

neurobagel · Nov 13, 2023 · e3d2081 · e3d2081
2 parents c02dc8e + 6f210a2
commit e3d2081
Show file tree

Hide file tree

Showing 28 changed files with 357 additions and 467 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -24,8 +24,6 @@ updates:
         update-types: ["version-update:semver-major"]
       - dependency-name: 'bootstrap'
         update-types: ["version-update:semver-major"]
-      - dependency-name: 'eslint-plugin-prettier'
-        update-types: ["version-update:semver-major"]
     labels:
       - "_bot"
       - "maint:dependency"

diff --git a/README.md b/README.md
@@ -28,11 +28,14 @@
         
 <br>
 
-[Neurobagel's](https://www.neurobagel.org/) annotation tool takes BID-style [phenotypic data](https://github.com/neurobagel/annotation_tool/blob/main/cypress/fixtures/examples/good/ds003653_participant.tsv) and [corresponding data description files](https://github.com/neurobagel/annotation_tool/blob/main/cypress/fixtures/examples/good/ds003653_participant.json) and gives users the ability to annotate their data using the Neurobagel data model for preparation to inject that modeled data into Neurobagel's graph database for [federated querying](https://github.com/neurobagel/query-tool).
+[Neurobagel's](https://www.neurobagel.org/) annotation tool takes BIDS-style [phenotypic data](https://github.com/neurobagel/annotation_tool/blob/main/cypress/fixtures/examples/good/ds003653_participant.tsv) and [corresponding data description files](https://github.com/neurobagel/annotation_tool/blob/main/cypress/fixtures/examples/good/ds003653_participant.json) and gives users the ability to annotate their data using the Neurobagel data model for preparation to inject that modeled data into Neurobagel's graph database for [federated querying](https://github.com/neurobagel/query-tool).
 
 The annotation tool is a Vue application, developed in [JavaScript](https://www.javascript.com/) using a variety of tools including [Nuxt](https://nuxtjs.org/), [Cypress](https://www.cypress.io/), and [BootstrapVue](https://bootstrap-vue.org/docs).
 
+Please refer to our [**official documentation**](https://neurobagel.org/annotation_tool/) for more information on how to use the annotation tool.
+
 [Quickstart](#quickstart) |
+[Documentation](https://neurobagel.org/annotation_tool/) |
 [Local Installation](#local-installation) |
 [Workflow](#annotation-workflow) |
 [Navigation](#general-navigation) |

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -75,4 +75,14 @@
 
 	background-color: white;
 	color: black;
+}
+
+.category-transparent {
+
+	opacity: 0.5;
+}
+
+.category-opaque {
+
+	opacity: 1.0;
 }
diff --git a/components/category-select-table.vue b/components/category-select-table.vue
@@ -2,9 +2,9 @@
 
     <div>
 
-        <b-row class="no-padding-row">
+        <b-row>
 
-            <b-col cols="12" class="no-padding-col">
+            <b-col cols="12">
                 <b-table
                     outlined
                     selectable
@@ -84,18 +84,4 @@
         }
     };
 
-</script>
-
-<style>
-
-    .category-transparent {
-
-        opacity: 0.5;
-    }
-
-    .category-opaque {
-
-        opacity: 1.0;
-    }
-
-</style>
+</script>
diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
@@ -1,18 +1,17 @@
 <template>
-    <div>
-        <b-row>
-            <b-col cols="6">
+    <b-row>
+        <b-col cols="4">
+            <b-row>
                 <v-select
                     v-if="tableRows.length > 0"
                     data-cy="toolgroup-select"
                     :options="toolTerms"
                     outlined
                     @input="selectTool"
-                    :selectable="(option) => !getSelectedTools.some(el => el.identifier.includes(option.identifier))" />
-            </b-col>
-        </b-row>
-        <b-row>
-            <b-col>
+                    :selectable="(option) => !getSelectedTools.some(el => el.identifier.includes(option.identifier))"
+                    class="aligned-element" />
+            </b-row>
+            <b-row>
                 <b-table
                     v-if="getSelectedTools.length > 0"
                     data-cy="assessment-tool-table"
@@ -26,22 +25,21 @@
                     @row-selected="highlightRow"
                     :tbody-tr-class="styleTableRow"
                     thead-class="hidden" />
-
-            </b-col>
-            <b-col>
-                <b-table
-                    v-if="tableRows.length > 0"
-                    data-cy="assessment-column-table"
-                    outlined
-                    head-variant="dark"
-                    :items="tableRows"
-                    selected-variant=""
-                    thead-class="hidden"
-                    @row-clicked="mapColumn"
-                    :tbody-tr-class="styleRow" />
-            </b-col>
-        </b-row>
-    </div>
+            </b-row>
+        </b-col>
+        <b-col cols="8" class="margin-top">
+            <b-table
+                v-if="tableRows.length > 0"
+                data-cy="assessment-column-table"
+                outlined
+                head-variant="dark"
+                :items="tableRows"
+                selected-variant=""
+                thead-class="hidden"
+                @row-clicked="mapColumn"
+                :tbody-tr-class="styleRow" />
+        </b-col>
+    </b-row>
 </template>
 
 <script>
@@ -98,30 +96,34 @@
 
             styleTableRow(p_row) {
                 if (p_row.identifier === this.selectedTool.identifier) {
-                    return "selected-tool";
+                    return "category-style-5";
                 }
                 return "";
             },
             mapColumn(row) {
                 this.alterColumnToToolMapping({columnName: row.column, toolIdentifier: this.selectedTool.identifier});
             },
-            styleRow(p_row) {
-                if (
-                    (this.columnToToolMap[p_row.column] !== null) &&
-                    (this.columnToToolMap[p_row.column] === this.selectedTool.identifier)
-                ) {
-                    return "selected-tool";
-                } else {
-                    return "";
+            styleRow(row) {
+                const styleClass = [];
+                if ((this.columnToToolMap[row.column] !== null) ) {
+                    styleClass.push("category-style-5");
+                    if (
+                        (this.columnToToolMap[row.column] !== this.selectedTool.identifier)) {
+                        styleClass.push("category-transparent");
+                    }
                 }
+                return styleClass;
             }
         }
     };
 </script>
 <style>
 
-.selected-tool {
-    background-color: red !important;
+.margin-top {
+    margin-top: 66px;
+}
+.aligned-element {
+    flex: 1;
 }
 
 </style>
diff --git a/cypress.config.js b/cypress.config.js
@@ -6,6 +6,8 @@ const fs = require("fs");
 module.exports = defineConfig({
 
     e2e: {
+        viewportHeight: 1080,
+        viewportWidth: 1920,
 
         baseUrl: "http://localhost:3000",
 

diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
@@ -24,7 +24,7 @@ describe("Tool Group component", () => {
         };
         getters = {
             getColumnsForCategory: () => (p_category) => {
-                return ["column1", "column3"];
+                return ["column1", "column2", "column3"];
             },
             getSelectedTools: () => {
                 return [
@@ -88,8 +88,8 @@ describe("Tool Group component", () => {
             }})
         });
 
-        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')").should('not.have.class', 'selected-tool');
-        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should('not.have.class', 'selected-tool');
+        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')").should('not.have.class', 'category-style-5');
+        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should('not.have.class', 'category-style-5');
 
     });
 
@@ -220,15 +220,26 @@ describe("Tool Group component", () => {
             mocks: { $store: store },
             computed: store.getters
         });
-        // Starting out with a different tool selected
+        // Starting out with a different tool selected and then checking the background color
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
         cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')")
         .invoke("css", "background-color").then((InitialBackgroundColor) => {
             cy.get("[data-cy='assessment-tool-table']")
             // Selecting the tool my column is mapped to should change my columns styling
             .find("tr:contains('UPDRSIII')").click();
-            // assert that element has different color after
-            cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should("not.have.css", "background-color", InitialBackgroundColor);
+            // assert that element has the same background color after
+            cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should("have.css", "background-color", InitialBackgroundColor);
+        });
+
+        // Starting out with a different tool selected and then checking the opacity
+        cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
+        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')")
+        .invoke("css", "opacity").then((InitialOpacity) => {
+            cy.get("[data-cy='assessment-tool-table']")
+            // Selecting the tool my column is mapped to should change my columns styling
+            .find("tr:contains('UPDRSIII')").click();
+            // assert that element has a different opacity after
+            cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should("not.have.css", "Opacity", InitialOpacity);
         });
     });
 });
diff --git a/cypress/component/index_page.cy.js b/cypress/component/index_page.cy.js
@@ -35,9 +35,9 @@ describe("The index page", () => {
         });
 
         // Assert
-        cy.get("[data-cy='data-table-display']").should("be.visible.and.empty");
+        cy.get("[data-cy='data-table-display']").should("not.exist");
         cy.get("[data-cy='data-table-selector']").should("be.visible").contains("Choose file");
-        cy.get("[data-cy='data-dictionary-display']").should("be.visible.and.empty");
+        cy.get("[data-cy='data-dictionary-display']").should("not.exist");
         cy.get("[data-cy='data-dictionary-selector']").should("be.visible").contains("Choose file");
     });
 
@@ -77,10 +77,9 @@ describe("The index page", () => {
             plugins: ["bootstrap-vue"]
         });
 
-        // Assert - Because we're looking at an input field, we need to assert
-        // over the value and can't just use .contains as usual
-        cy.get("[data-cy='data-table-display']").should('include.value', 'val1\tval2');
-        cy.get("[data-cy='data-dictionary-display']").should('include.value', '"col1": "something"');
+        cy.get("[data-cy='data-table-display']").contains("val1");
+        cy.get("[data-cy='data-table-display']").contains("val2");
+        cy.get("[data-cy='data-dictionary-display']").contains('"col1": "something"');
     });
 
     it("Dispatches an action when a dataTable is loaded", () => {

diff --git a/cypress/e2e/app/simple-e2etest.cy.js b/cypress/e2e/app/simple-e2etest.cy.js
@@ -13,11 +13,7 @@ describe("End to end test using a simple UI path through the app", () => {
     ];
 
     beforeEach(() => {
-
-        // Standard setup for annotation tool testing
-        cy.appSetup();
-
-        // 2. Open the index page
+        // 1. Open the index page
         cy.visit("/");
     });
 

diff --git a/cypress/e2e/app/validate-output-example-synthetic-e2etest.cy.js b/cypress/e2e/app/validate-output-example-synthetic-e2etest.cy.js
@@ -6,7 +6,7 @@ describe("to annotate an assessment ", () => {
 
         /* ==== Generated with Cypress Studio ==== */
         cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button').click();
-        cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button > input').selectFile('cypress/fixtures/examples/good/example_synthetic.json', { force: true });
+        cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button > input').selectFile('cypress/fixtures/examples/good/example_synthetic_participants.json', { force: true });
         /* ==== End Cypress Studio ==== */
         cy.get("[data-cy='button-nextpage']").click();
 
@@ -105,7 +105,7 @@ describe("to annotate an assessment ", () => {
         cy.task("downloads", "cypress/downloads").then(folderStateAfter => {
             cy.readFile('cypress/downloads/' + folderStateAfter[folderStateAfter.length - 1]).then((outputContent) => {
 
-                const expectedOutput = require('../../fixtures/examples/good/example_synthetic_expected_output.json');
+                const expectedOutput = require('../../fixtures/examples/good/example_synthetic.json');
                 expect(outputContent).to.deep.equal(expectedOutput);
               });
         });

diff --git a/cypress/e2e/page/annotation-pagetests.cy.js b/cypress/e2e/page/annotation-pagetests.cy.js
@@ -8,12 +8,6 @@ describe("tests on annotation page ui with programmatic state loading and store
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("Annotation page tests with " + p_dataset.description + " data", () => {

diff --git a/cypress/e2e/page/categorization-pagetests.cy.js b/cypress/e2e/page/categorization-pagetests.cy.js
@@ -9,12 +9,6 @@ describe("Tests on categorization page ui via programmatic state loading and sto
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("Categorization page tests with " + p_dataset.description + " data", () => {

diff --git a/cypress/e2e/page/download-pagetests.cy.js b/cypress/e2e/page/download-pagetests.cy.js
@@ -9,12 +9,6 @@ describe("tests on download page ui via programmatic state loading and store int
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("download page tests with " + p_dataset.description + " data", () => {

diff --git a/cypress/e2e/page/home-pagetests.cy.js b/cypress/e2e/page/home-pagetests.cy.js
@@ -0,0 +1,14 @@
+describe("On My homepage", () => {
+    it("I can upload some data", () => {
+        cy.visit('/');
+        // Before I load anything, I have a little notification that my preview will
+        // appear once I upload a table
+        // Load a table
+        cy.get('[data-cy="data-table-selector"]').get('input').selectFile('cypress/fixtures/examples/good/example_synthetic.tsv', { force: true });
+
+        /* ==== Generated with Cypress Studio ==== */
+        cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button').click();
+        cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button > input').selectFile('cypress/fixtures/examples/good/example_synthetic_participants.json', { force: true });
+        /* ==== End Cypress Studio ==== */
+    });
+});
diff --git a/cypress/e2e/page/index-pagetests.cy.js b/cypress/e2e/page/index-pagetests.cy.js
@@ -12,12 +12,6 @@ describe("Tests on the index page via store interaction", () => {
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("index page with " + p_dataset.description + " data", () => {

diff --git a/cypress/fixtures/examples/good/example.json b/cypress/fixtures/examples/good/example.json
@@ -6,8 +6,8 @@
 	"sex": {
 		"Description": "sex of the participant as reported by the participant",
 		"Levels": {
-			"M": "male",
-			"F": "female"
+			"1": "male",
+			"2": "female"
 		}
 	},
 	"group": {