From be651ef70e6c6a8c6cd4c25c73c2de2be5828bad Mon Sep 17 00:00:00 2001
From: rmanaem <rmanaem@protonmail.ch>
Date: Sat, 9 Dec 2023 14:37:24 -0500
Subject: [PATCH 1/3] Implemented styling for rows

---
 components/annot-single-tool.vue | 42 +++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
index ae4d3b23..e69f379f 100644
--- a/components/annot-single-tool.vue
+++ b/components/annot-single-tool.vue
@@ -2,10 +2,10 @@
 
     <div>
         <b-table
-            striped
             :data-cy="('tool-annotation-for-' + name)"
             :fields="toolFields"
-            :items="uniqueColumnValues">
+            :items="uniqueColumnValues"
+            :tbody-tr-class="styleTableRow">
             <template #cell(missing_value)="row">
                 <b-button
                     :data-cy="'missingValueButton_' + row.index"
@@ -52,8 +52,44 @@
         methods: {
             emitMissingValue(column, value) {
                 this.$emit("declareMissing", {column, value});
+            },
+            styleTableRow(row) {
+                const styleClass = [];
+                const columns = this.uniqueColumnValues.map(item => item.column);
+                const uniqueColumns = [...new Set(columns)];
+                const colIndex = uniqueColumns.indexOf(row.column);
+                if (colIndex % 2 === 0) {
+                    if (this.uniqueColumnValues.indexOf(row) % 2 === 0) {
+                        styleClass.push('column1-color1');
+                    }
+                    else {
+                        styleClass.push('column1-color2');
+                    }
+                } else {
+                    if (this.uniqueColumnValues.indexOf(row) % 2 === 0) {
+                        styleClass.push('column2-color1');
+                    }
+                    else {
+                        styleClass.push('column2-color2');
+                    }
+                }
+                return styleClass;
             }
         }
     };
 
-</script>
\ No newline at end of file
+</script>
+<style>
+.column1-color1 {
+  background-color: #f9f9f9;
+}
+.column1-color2 {
+  background-color: #e9ecef;
+}
+.column2-color1 {
+  background-color: #abdde5;
+}
+.column2-color2 {
+  background-color: #aed2d7;
+}
+</style>
\ No newline at end of file

From 75190719dd8d8e7d29c16fd129f90f6aacbeaaec Mon Sep 17 00:00:00 2001
From: rmanaem <rmanaem@protonmail.ch>
Date: Sat, 9 Dec 2023 14:45:45 -0500
Subject: [PATCH 2/3] Added a test for the rows' css class

---
 cypress/component/annot-tool-single.cy.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/cypress/component/annot-tool-single.cy.js b/cypress/component/annot-tool-single.cy.js
index ad4c5082..526e57a4 100644
--- a/cypress/component/annot-tool-single.cy.js
+++ b/cypress/component/annot-tool-single.cy.js
@@ -69,5 +69,28 @@ describe("Annotation tool component", () => {
             });
 
     });
+    it("Displays rows in the table with the correct background color", () => {
+        cy.mount(annotSingleTool, {
+            propsData: props
+        });
+        cy.get('table')
+        .find('tr')
+        .eq(1)
+        .then(row => {
+            cy.wrap(row).should('have.class', 'column1-color1');
+        });
+        cy.get('table')
+        .find('tr')
+        .eq(2)
+        .then(row => {
+            cy.wrap(row).should('have.class', 'column2-color2');
+        });
+        cy.get('table')
+        .find('tr')
+        .eq(3)
+        .then(row => {
+            cy.wrap(row).should('have.class', 'column2-color1');
+        });
+    });
 
 });

From e0862c10ee04c2f7c750e9045205f3a2019f66a7 Mon Sep 17 00:00:00 2001
From: Arman Jahanpour <77515879+rmanaem@users.noreply.github.com>
Date: Fri, 15 Dec 2023 11:22:55 -0500
Subject: [PATCH 3/3] Added comment

Co-authored-by: Sebastian Urchs <surchs@users.noreply.github.com>
---
 components/annot-single-tool.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
index e69f379f..cedde368 100644
--- a/components/annot-single-tool.vue
+++ b/components/annot-single-tool.vue
@@ -58,7 +58,9 @@
                 const columns = this.uniqueColumnValues.map(item => item.column);
                 const uniqueColumns = [...new Set(columns)];
                 const colIndex = uniqueColumns.indexOf(row.column);
+                // Apply special styling if we are in a row that belongs to an even column
                 if (colIndex % 2 === 0) {
+                    // Apply "stripe" styling if we are in an even row
                     if (this.uniqueColumnValues.indexOf(row) % 2 === 0) {
                         styleClass.push('column1-color1');
                     }