[FIX] Remove existing annotations from data dictionaries

components/annot-explanation.vue

@@ -7,11 +7,13 @@
                 {{ uiText.cardTitle }}
             </b-card-header>
             <b-card-body>
-                <b-card-text><ul>
-                    <li v-for="(sentence, index) in explanationText.split('.')" :key="index">
+                <b-card-text>
+                    <ul>
+                        <li v-for="(sentence, index) in explanationText.split('.')" :key="index">
                             {{ sentence }}.
                         </li>
-                </ul></b-card-text>
+                    </ul>
+                </b-card-text>
             </b-card-body>
         </b-card>
 

components/tool-navbar.vue

@@ -13,7 +13,9 @@
                     alt="Neurobagel Logo"
                     class="nav-logo" />
                 <div class="nav-title-and-subtitle">
-                    {{ uiText.toolName }} <b-badge v-b-tooltip.hover.right="'This tool is under active development. Please report any requests or issues on GitHub.'" class="badge">beta</b-badge>
+                    {{ uiText.toolName }} <b-badge v-b-tooltip.hover.right="'This tool is under active development. Please report any requests or issues on GitHub.'" class="badge">
+                        beta
+                    </b-badge>
 
                     <br />
                     <p class="nav-subtitle">

cypress/component/home_page.cy.js

@@ -41,6 +41,17 @@ describe("The Home page", () => {
         cy.get("[data-cy='data-dictionary-selector']").should("be.visible").contains("Choose file");
     });
 
+    it("Shows a warning about not being able to reuse annotations in the data dictionary", () => {
+        cy.mount(homePage, {
+
+            mocks: { $store: store },
+            stubs: stubs,
+            plugins: ["bootstrap-vue"]
+        });
+
+        cy.get("[data-cy='cannot-reuse-annotations-button']").should('be.visible').contains("Cannot reuse annotations");
+    });
+
     it("Correctly displays previews of the loaded data", () => {
 
         // Act
@@ -136,4 +147,5 @@ describe("The Home page", () => {
         });
         cy.get("[data-cy='data-dictionary-selector']").contains("example_short.json");
     });
+
 });

cypress/e2e/page/index-pagetests.cy.js

@@ -92,6 +92,28 @@ describe("Tests on the index page via store interaction", () => {
                 // 3. Assert that categorization nav item and next button are *still* enabled
                 cy.assertNextPageAccess("categorization", true);
             });
+
+            it("A big red warning is shown next to the data dictionary button to say: can't use Annotations", () => {
+
+                // 1. Assert that categorization nav item and next button are disabled
+                cy.assertNextPageAccess("categorization", false);
+
+                // 2. Select data table file
+                cy.get("[data-cy='data-table-selector']")
+                    .contains("Choose file")
+                    .selectFile(dataFolder + p_dataset.data_table);
+
+                // 3. Assert that categorization nav item and next button are enabled
+                cy.assertNextPageAccess("categorization", true);
+
+                // 4. Select participants dictionary
+                cy.get("[data-cy='data-dictionary-selector']")
+                    .contains("Choose file")
+                    .selectFile(dataFolder + p_dataset.data_dictionary);
+
+                // 3. Assert that categorization nav item and next button are *still* enabled
+                cy.assertNextPageAccess("categorization", true);
+            });
         });
     });
 });

pages/home.vue

@@ -17,7 +17,9 @@
                     🏗️ This tool (like all of neurobagel) is under active development and we welcome
                     any feedback or suggestions. Feel free to use our feedback widget on the side of the page.
                 </p>
-                <b-button v-b-toggle.collapse-1 variant="primary">Summary of annotation steps</b-button>
+                <b-button v-b-toggle.collapse-1 variant="primary">
+                    Summary of annotation steps
+                </b-button>
                 <b-collapse id="collapse-1">
                     <br />
                     <p>
@@ -27,14 +29,15 @@
                         <li>Upload a TSV phenotypic file (<a href="https://neurobagel.org/data_prep/" target="_blank">see our docs for the TSV requirements</a>)</li>
                         <li>Upload a <a href="https://bids-specification.readthedocs.io/en/stable/03-modality-agnostic-files.html#participants-file" target="_blank">BIDS-compatible JSON data dictionary</a> (optional)</li>
                         <li>Annotate any or all COLUMNS in your data table by telling us what kind of subject information they are "about"</li>
-                        <li>Annotate the unique VALUES in the columns you have annotated, by mapping them to controlled terms from
+                        <li>
+                            Annotate the unique VALUES in the columns you have annotated, by mapping them to controlled terms from
                             <a href="https://neurobagel.org/term_naming_standards/#currently-used-namespaces" target="_blank">existing vocabularies</a>
                         </li>
                         <li>Download your annotated JSON data dictionary</li>
                     </ol>
                     <b>What next?</b>
                     <p>
-                        You can now use the new data dictionary to <a href="https://neurobagel.org/cli/" target="_blank">create a harmonized representation of your subject-level data</a> (optional, uses other neurobagel tools).<br>
+                        You can now use the new data dictionary to <a href="https://neurobagel.org/cli/" target="_blank">create a harmonized representation of your subject-level data</a> (optional, uses other neurobagel tools).<br />
                         To learn more about neurobagel, check out our website: <a href="https://neurobagel.org/" target="_blank">neurobagel.org</a>.
                     </p>
                 </b-collapse>
@@ -71,6 +74,18 @@
         <b-row>
             <b-col>
                 <h3>{{ uiText.dataDictionaryHeader }}</h3>
+                <b-button data-cy="cannot-reuse-annotations-button" v-b-toggle.collapse-2 variant="warning">
+                    Cannot reuse annotations
+                </b-button>
+                <b-collapse id="collapse-2">
+                    <br />
+                    At the moment, the annotation tool is not able to load previously created annotations.
+                    This means that if you provide a data dictionary here that you created with Neurobagel,
+                    any existing semantic annotations will be removed when the data dictionary is loaded.
+
+                    In practice this means that you cannot resume an aborted previous annotation.
+                    This is a limitation we are going to address: <a href="https://github.com/neurobagel/annotation_tool/issues/601" target="_blank">#601</a>.
+                </b-collapse>
                 <file-selector
                     data-cy="data-dictionary-selector"
                     :content-type="contentTypes.dataDictionary"

store/index.js

@@ -682,10 +682,14 @@ export const actions = {
 
     processDataDictionary({ state, commit, getters }, { data, filename }) {
 
-        // 1. Save the user-provided data dictionary
-        commit("setDataDictionary", { newDataDictionary: JSON.parse(data), storeColumns: getters.getColumnNames });
+        // If annotations exist in the provided data, remove them first
+        const userDataDictionary = JSON.parse(data);
 
-        // 2. Save the filename of the user-provided data dictionary
+        Object.keys(userDataDictionary).forEach(key => {
+            delete userDataDictionary[key].Annotations;
+        });
+
+        commit("setDataDictionary", { newDataDictionary: userDataDictionary, storeColumns: getters.getColumnNames });
         commit("setDataDictionaryFilename", filename);
     },