[ENH] Added clearer descriptions (#827)

* Made `annot-columns` and `annot-missing-values` collapsable * Added explanation text above dropdown and added placeholder * Added placeholder * Added explanation text under `category-selec-table` and `column-linking-table` * Add categorization page instruction * Addressed the TODO --------- Co-authored-by: Sebastian Urchs <[email protected]>
neurobagel · Dec 11, 2024 · 362722a · 362722a
1 parent 30c0177
commit 362722a
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 59 deletions.
diff --git a/components/annot-columns.vue b/components/annot-columns.vue
@@ -5,25 +5,36 @@
         class="annotation-card">
 
         <!-- TODO: Make this also toggleable like the explanation tab -->
-        <b-card-header>{{ uiText.instructions }}</b-card-header>
-
-        <b-card-body class="columns-card-body">
-            <b-list-group>
-                <b-list-group-item
-                    data-cy="mappedColumns"
-                    class="d-flex justify-content-between align-items-center"
-                    :key="columnName"
-                    v-for="columnName of getColumnsForCategory(activeCategory)">
-                    {{ columnName }} {{ getColumnDescription(columnName) }}
-                    <b-button
-                        :data-cy="'remove_' + columnName"
-                        variant="danger"
-                        @click="alterColumnCategoryMapping({category: activeCategory, columnName: columnName})">
-                        {{ uiText.removeButton }}
-                    </b-button>
-                </b-list-group-item>
-            </b-list-group>
-        </b-card-body>
+        <b-card-header>
+            {{ uiText.instructions }}
+            <b-button
+                v-b-toggle.annot-columns-card-body-collapse
+                class="float-right"
+                data-cy="toggle-collapse-button"
+                @click="toggleCollapse">
+                {{ isCollapsed ? uiText.expandButton : uiText.collapseButton }}
+            </b-button>
+        </b-card-header>
+
+        <b-collapse id="annot-columns-card-body-collapse">
+            <b-card-body class="columns-card-body">
+                <b-list-group>
+                    <b-list-group-item
+                        data-cy="mappedColumns"
+                        class="d-flex justify-content-between align-items-center"
+                        :key="columnName"
+                        v-for="columnName of getColumnsForCategory(activeCategory)">
+                        {{ columnName }} {{ getColumnDescription(columnName) }}
+                        <b-button
+                            :data-cy="'remove_' + columnName"
+                            variant="danger"
+                            @click="alterColumnCategoryMapping({category: activeCategory, columnName: columnName})">
+                            {{ uiText.removeButton }}
+                        </b-button>
+                    </b-list-group-item>
+                </b-list-group>
+            </b-card-body>
+        </b-collapse>
 
     </b-card>
 
@@ -46,11 +57,14 @@
         data() {
 
             return {
+                isCollapsed: true,
 
                 uiText: {
 
                     instructions: "Review the annotated columns",
-                    removeButton: "remove"
+                    removeButton: "remove",
+                    expandButton: "Expand",
+                    collapseButton: "Collapse"
                 }
             };
         },
@@ -65,7 +79,11 @@
         methods: {
             ...mapMutations([
                 "alterColumnCategoryMapping"
-            ])
+            ]),
+
+            toggleCollapse() {
+                this.isCollapsed = !this.isCollapsed;
+            }
         }
     };
 

diff --git a/components/annot-continuous-values.vue b/components/annot-continuous-values.vue
@@ -37,7 +37,10 @@
                         </b-col>
 
                         <b-col cols="4">
+                            {{ uiText.dropDownExplanationText }}
+                            <br />
                             <v-select
+                                placeholder="Select the type of age"
                                 :data-cy="'selectTransform_' + columnName"
                                 :options="getTransformOptions(activeCategory)"
                                 :value="getHeuristic(columnName)"
@@ -82,7 +85,8 @@
 
                     instructions: "Review the age harmonization",
                     missingValueButton: "Mark as missing",
-                    saveButton: "Save Annotation"
+                    saveButton: "Save Annotation",
+                    dropDownExplanationText: "Please select the format of age values in this column"
                 }
             };
         },

diff --git a/components/annot-missing-values.vue b/components/annot-missing-values.vue
@@ -5,25 +5,36 @@
             no-body
             class="annotation-card">
 
-            <b-card-header>{{ uiText.title }}</b-card-header>
-
-            <b-card-body class="missing-values-card-body">
-                <b-table
-                    striped
-                    :fields="fields"
-                    :items="tableItems">
-                    <template #cell(not_missing)="data">
-                        <b-button
-                            variant="danger"
-                            :data-cy="'not-missing-button-' + data.item.column + '-' + data.item.value"
-                            @click="removeValue(data.item)">
-                            {{ uiText.notMissingButton }}
-                        </b-button>
-                    </template>
-
-                </b-table>
-
-            </b-card-body>
+            <b-card-header>
+                {{ uiText.title }}
+                <b-button
+                    v-b-toggle.annot-missing-values-card-body-collapse
+                    class="float-right"
+                    data-cy="toggle-collapse-button"
+                    @click="toggleCollapse">
+                    {{ isCollapsed ? uiText.expandButton : uiText.collapseButton }}
+                </b-button>
+            </b-card-header>
+
+            <b-collapse id="annot-missing-values-card-body-collapse">
+                <b-card-body class="missing-values-card-body">
+                    <b-table
+                        striped
+                        :fields="fields"
+                        :items="tableItems">
+                        <template #cell(not_missing)="data">
+                            <b-button
+                                variant="danger"
+                                :data-cy="'not-missing-button-' + data.item.column + '-' + data.item.value"
+                                @click="removeValue(data.item)">
+                                {{ uiText.notMissingButton }}
+                            </b-button>
+                        </template>
+
+                    </b-table>
+
+                </b-card-body>
+            </b-collapse>
 
         </b-card>
     </div>
@@ -48,6 +59,7 @@
         data() {
 
             return {
+                isCollapsed: true,
 
                 fields: [
 
@@ -60,7 +72,9 @@
                 uiText: {
 
                     notMissingButton: "Not Missing",
-                    title: "Missing Values"
+                    title: "Missing Values",
+                    expandButton: "Expand",
+                    collapseButton: "Collapse"
                 }
             };
         },
@@ -104,6 +118,10 @@
                 "changeMissingStatus"
             ]),
 
+            toggleCollapse() {
+                this.isCollapsed = !this.isCollapsed;
+            },
+
             removeValue(p_tableItem) {
 
                 // Remove this value from the column's missing value list in the store

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
@@ -1,22 +1,11 @@
 <template>
     <div>
-        <b-row>
-            <b-col cols="4">
-                <b-row>
-                    <p
-                        class="instructions-text"
-                        v-if="tableRows.length > 0">
-                        {{ instructions }}
-                    </p>
-                </b-row>
-            </b-col>
-        </b-row>
-
         <b-row>
             <b-col cols="4">
                 <b-row>
                     <v-select
                         v-if="tableRows.length > 0"
+                        placeholder="Select an assessment tool"
                         data-cy="toolgroup-select"
                         :options="toolTerms"
                         outlined
@@ -40,7 +29,7 @@
                         thead-class="hidden" />
                 </b-row>
             </b-col>
-            <b-col cols="8" class="margin-top">
+            <b-col cols="8">
                 <b-table
                     v-if="tableRows.length > 0"
                     data-cy="assessment-column-table"

diff --git a/cypress/component/annot-columns.cy.js b/cypress/component/annot-columns.cy.js
@@ -48,6 +48,7 @@ describe("columns annotation", () =>  {
                 $store: store
             }
         });
+        cy.get("[data-cy='toggle-collapse-button']").click();
         cy.get("[data-cy='remove_column2']").click();
         cy.get("@commitSpy").should("have.been.calledOnceWith", "alterColumnCategoryMapping", {category: "someCategory", columnName: "column2"});
     });

diff --git a/cypress/component/annot-missing-values.cy.js b/cypress/component/annot-missing-values.cy.js
@@ -65,6 +65,7 @@ describe("Missing values", () => {
                 });
 
                 // Act
+                cy.get("[data-cy='toggle-collapse-button']").click();
                 cy.get("[data-cy='not-missing-button-column1-val1']").click();
 
                 // Assert

diff --git a/pages/categorization.vue b/pages/categorization.vue
@@ -34,6 +34,12 @@
             </b-col>
 
         </b-row>
+        <b-row>
+            <b-row>
+                <p class="instructions-text" v-html="uiText.assessmentInstructions" />
+            </b-row>
+        </b-row>
+
         <categoryToolgroup />
 
     </b-container>
@@ -54,7 +60,15 @@
                 // Text for UI elements
                 uiText: {
                     categorySelectInstructions: "Click category and then corresponding column from tsv file",
-                    categorySelectTitle: "Recommended Categories"
+                    categorySelectTitle: "Recommended Categories",
+                    assessmentInstructions: `
+                    Assessment Tool annotation workflow:<br>
+                    1) (ABOVE) Label all columns containing data from assessment tools with the 'Assessment Tool' category on the left.<br>
+                    2) (BELOW) From the dropdown, select each assessment tool present in your data.<br>
+                    3) (BELOW) Select each assessment tool, then click the corresponding columns on the right to link them to the tool.<br>
+                    Optional: (ABOVE) If you cannot find an assessment tool or cannot link all columns, 
+                    you must manually remove the 'Assessment Tool' from the unlinked columns before proceeding.
+                    `
                 }
             };
         },

diff --git a/pages/download.vue b/pages/download.vue
@@ -37,13 +37,13 @@
 
                 <h3>Data Dictionary</h3>
                 <p>
-                Here is the final .json data dictionary that you have created:
+                    Here is the final .json data dictionary that you have created:
                 </p>
                 <b-button data-cy="dictionary-preview-button" size="sm" @click="dictionaryCollapsed = !dictionaryCollapsed">
-                {{ dictionaryCollapsed ? 'Hide' : 'Show' }} Data Dictionary
+                    {{ dictionaryCollapsed ? 'Hide' : 'Show' }} Data Dictionary
                 </b-button>
                 <b-collapse data-cy="dictionary-preview" v-model="dictionaryCollapsed">
-                <pre>{{ formatJson(getJsonOutput) }}</pre>
+                    <pre>{{ formatJson(getJsonOutput) }}</pre>
                 </b-collapse>
                 <p>
                     Here are some next steps:
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,6 +65,7 @@ describe("Missing values", () => { @@
                     });
                     // Act
+                    cy.get("[data-cy='toggle-collapse-button']").click();
                     cy.get("[data-cy='not-missing-button-column1-val1']").click();
                     // Assert
@@ Expand Down @@