[ENH] Implemented styling for table rows of annot-single-tool component

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,46 @@
         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);
+                // 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');
+                    }
+                    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>
+</script>
+<style>
+.column1-color1 {
+  background-color: #f9f9f9;
+}
+.column1-color2 {
+  background-color: #e9ecef;
+}
+.column2-color1 {
+  background-color: #abdde5;
+}
+.column2-color2 {
+  background-color: #aed2d7;
+}
+</style>

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