[ENH] Improved column highlighting in assessment tool workflow (#627)

* Improved column highlighting in assessment tool workflow * Moved styles to `main.css` * Implemented test for checking the opacity change --------- Co-authored-by: Sebastian Urchs <[email protected]>
neurobagel · Nov 13, 2023 · 41cf85d · 41cf85d
1 parent 3cf91bf
commit 41cf85d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 33 deletions.
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
@@ -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
@@ -96,31 +96,29 @@
 
             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;
 }

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