Merge branch 'main' into surchs/issue616

.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"

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) |

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", () => {

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 ==== */
+    });
+});

nuxt.config.js

@@ -25,7 +25,6 @@ export default {
 
 	// Global CSS: https://go.nuxtjs.dev/config-css
 	css: [
-
 		"@/assets/css/main.css"
 	],
 

package.json

@@ -36,9 +36,7 @@
     "editorconfig": "^2.0.0",
     "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.18.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",

pages/index.vue

@@ -7,15 +7,6 @@
             <h3>{{ uiText.dataTableHeader }}</h3>
         </b-row>
 
-        <!-- Shows file contents -->
-        <b-row>
-            <textarea
-                :cols="textArea.height"
-                :rows="textArea.width"
-                :value="stringifiedDataTable"
-                data-cy="data-table-display" />
-        </b-row>
-
         <!-- Selects data table file (i.e. participants.tsv) -->
         <b-row>
             <file-selector
@@ -25,19 +16,23 @@
                 :enabled="true" />
         </b-row>
 
-
-        <!-- Data dictionary file loading area -->
+        <!-- Shows file contents -->
         <b-row>
-            <h3>{{ uiText.dataDictionaryHeader }}</h3>
+            <b-table
+                v-if="dataTable.length > 0"
+                outlined
+                sticky-header
+                :items="dataTable"
+                data-cy="data-table-display" />
+            <p v-else class="instructions-text">
+                Please provide a data table to see a preview here.
+            </p>
         </b-row>
 
-        <!-- Shows file contents -->
+
+        <!-- Data dictionary file loading area -->
         <b-row>
-            <textarea
-                :cols="textArea.height"
-                :rows="textArea.width"
-                :value="stringifiedDataDictionary"
-                data-cy="data-dictionary-display" />
+            <h3>{{ uiText.dataDictionaryHeader }}</h3>
         </b-row>
 
         <b-row>
@@ -49,6 +44,20 @@
                 :enabled="dataTableSelected" />
         </b-row>
 
+        <!-- Shows file contents -->
+        <b-row>
+            <pre
+                v-if="Object.keys(this.dataDictionary.userProvided).length > 0"
+                style="height: 200px; width: 100%; overflow: auto;"
+                data-cy="data-dictionary-display">
+                {{ stringifiedDataDictionary }}
+            </pre>
+            <p v-else class="instructions-text">
+                Provide a data dictionary to see the preview.
+                If you load a data table, a skeleton data dictionary will be created for you
+            </p>
+        </b-row>
+
     </b-container>
 
 </template>
@@ -101,19 +110,9 @@
                 // (used to enable data dictionary selection)
                 return ( this.dataTable.length > 0 );
             },
-
             stringifiedDataDictionary() {
 
-                return ( 0 === Object.keys(this.dataDictionary.userProvided).length )
-                    ? "" : JSON.stringify(this.dataDictionary.userProvided, null, 4);
-            },
-
-            stringifiedDataTable() {
-
-                // Returns only the cell values of the table as a formatted string (no column names)
-                return this.dataTable.map(row => {
-                    return Object.values(row).join("\t");
-                }).join("\n");
+                return JSON.stringify(this.dataDictionary.userProvided, null, 4);
             }
         },