From 1df0468af24591023de5d454d257409d087eac8c Mon Sep 17 00:00:00 2001
From: rmanaem <rmanaem@protonmail.ch>
Date: Thu, 12 Oct 2023 15:32:00 -0400
Subject: [PATCH 01/45] Added lintfix script to package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index d7aca8f3..867edc04 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start": "nuxt start",
     "generate": "nuxt generate",
     "lint": "npx eslint --ext .vue  --ext .js .",
+    "lintfix": "npm run lint -- --fix",
     "prepare": "husky install",
     "heroku-postbuild": "npm run build",
     "cypress:open": "cypress open",

From 0a37a10478e8ac7a1f27b29ea7ce0e2bd1a8cfc2 Mon Sep 17 00:00:00 2001
From: rmanaem <rmanaem@protonmail.ch>
Date: Thu, 12 Oct 2023 16:15:31 -0400
Subject: [PATCH 02/45] Added assessment column table

and test
---
 components/category-toolgroup.vue          | 30 ++++++++
 cypress/component/category-toolgroup.cy.js | 82 ++++++++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 components/category-toolgroup.vue
 create mode 100644 cypress/component/category-toolgroup.cy.js

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
new file mode 100644
index 00000000..1301272a
--- /dev/null
+++ b/components/category-toolgroup.vue
@@ -0,0 +1,30 @@
+<template>
+    <b-table
+        data-cy="assessment-column-table"
+        outlined
+        selectable
+        head-variant="dark"
+        :items="tableRows"
+        select-mode="single"
+        selected-variant=""
+        thead-class="hidden" />
+</template>
+
+<script>
+
+    import { mapGetters } from 'vuex';
+
+    export default {
+
+        computed: {
+            ...mapGetters([
+                'getColumnsForCategory'
+            ]),
+            tableRows() {
+                return this.getColumnsForCategory('Assessment Tool').map(column => ({
+                    column: column
+                }));
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
new file mode 100644
index 00000000..f1f5556f
--- /dev/null
+++ b/cypress/component/category-toolgroup.cy.js
@@ -0,0 +1,82 @@
+import categoryToolGroup from "~/components/category-toolgroup.vue";
+import { getters } from "~/store";
+
+let store;
+let state;
+
+describe("Tool Group component", () => {
+
+    beforeEach(() => {
+        state = {
+
+            columnToCategoryMap: {
+                column1: "Assessment Tool",
+                column2: "Age",
+                column3: "Assessment Tool"
+            },
+
+            dataDictionary: {
+
+                annotated: {
+
+                    column1: { missingValues: [] },
+                    column2: { missingValues: [] },
+                    column3: { missingValues: ["column3_value1", "column3_value2"] }
+                }
+            },
+
+            dataTable: [
+
+                { column1: 1, column2: "column2_value1", column3: "column3_value1" },
+                { column1: 2, column2: "column2_value2", column3: "column3_value2" },
+                { column1: 1, column2: "column2_value3", column3: "column3_value3" },
+                { column1: 3, column2: "column2_value2", column3: "column3_value4" }
+            ]
+        };
+        store = {
+
+            state: state,
+            getters: {
+                getColumnsForCategory: getters.getColumnsForCategory(state)
+            }
+        };
+    });
+
+    it("mounts", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+
+                $store: store
+            }
+        });
+
+    });
+
+    it("has a table of columns about assessment tools on the right", () => {
+
+        cy.mount(categoryToolGroup, {
+            mocks: {
+
+                $store: store
+            }
+        });
+
+        cy.get("[data-cy='assessment-column-table']").should("be.visible");
+
+    });
+
+    it("gets columns about assessment tools from the store and shows them to me", () => {
+
+        cy.mount(categoryToolGroup, {
+            mocks: {
+
+                $store: store
+            }
+
+        });
+
+        cy.get("[data-cy='assessment-column-table']").contains("column1");
+        cy.get("[data-cy='assessment-column-table']").contains("column3");
+    });
+
+});

From 8fb4cd39119edcb29934181c5378e477fc12015f Mon Sep 17 00:00:00 2001
From: rmanaem <rmanaem@protonmail.ch>
Date: Thu, 12 Oct 2023 16:48:32 -0400
Subject: [PATCH 03/45] Added tool group dropdown and assessment tool table

updated the component test
---
 components/category-toolgroup.vue          | 51 ++++++++++++++++++----
 cypress/component/category-toolgroup.cy.js | 32 ++++++++++++++
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 1301272a..297cc6ba 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -1,13 +1,33 @@
 <template>
-    <b-table
-        data-cy="assessment-column-table"
-        outlined
-        selectable
-        head-variant="dark"
-        :items="tableRows"
-        select-mode="single"
-        selected-variant=""
-        thead-class="hidden" />
+    <div>
+        <b-table
+            data-cy="assessment-column-table"
+            outlined
+            selectable
+            head-variant="dark"
+            :items="tableRows"
+            select-mode="single"
+            selected-variant=""
+            thead-class="hidden" />
+
+        <v-select
+            data-cy="toolgroup-select"
+            label="Select a tool"
+            :options="toolGroups"
+            outlined
+            @input="selectTool" />
+
+        <b-table
+            v-if="selectedTools.length > 0"
+            data-cy="assessment-tool-table"
+            outlined
+            selectable
+            head-variant="dark"
+            :items="selectedTools"
+            select-mode="single"
+            selected-variant=""
+            thead-class="hidden" />
+    </div>
 </template>
 
 <script>
@@ -15,6 +35,13 @@
     import { mapGetters } from 'vuex';
 
     export default {
+        data() {
+            return {
+                toolGroups: ["MOCA", "UPDRSIII", "SomeOtherThing", "AnotherThing"],
+                selectedTools: []
+            };
+
+        },
 
         computed: {
             ...mapGetters([
@@ -25,6 +52,12 @@
                     column: column
                 }));
             }
+        },
+        methods: {
+            selectTool(selectedTool) {
+                this.selectedTools.push({ tool: selectedTool});
+
+            }
         }
     };
 </script>
\ No newline at end of file
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index f1f5556f..33bf645f 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -79,4 +79,36 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='assessment-column-table']").contains("column3");
     });
 
+    it("has a dropdown with different assessment tools", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+
+                $store: store
+            }
+        });
+
+        cy.get("[data-cy='toolgroup-select']").should("be.visible");
+        cy.get("[data-cy='toolgroup-select']").click();
+        // For now the tool groups come from inside the component and we know they will include MOCA
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
+    });
+
+    it("checks tool table functionality", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+        cy.get("[data-cy='assessment-tool-table']").should("not.exist");
+        cy.get("[data-cy='toolgroup-select']").click();
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
+        cy.get("[data-cy='assessment-tool-table']").should("be.visible");
+        cy.get("[data-cy='assessment-tool-table']").contains("MOCA");
+
+
+    });
+
+
 });

From 7e54fcbf1d57b9a24270a5c877a565ce66e4a22a Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 12 Oct 2023 18:33:03 -0400
Subject: [PATCH 04/45] Prevent duplicate tools from being created

---
 components/category-toolgroup.vue          |  6 ++++-
 cypress/component/category-toolgroup.cy.js | 31 +++++++++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 297cc6ba..fc1032a7 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -15,7 +15,8 @@
             label="Select a tool"
             :options="toolGroups"
             outlined
-            @input="selectTool" />
+            @input="selectTool"
+            :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
 
         <b-table
             v-if="selectedTools.length > 0"
@@ -55,7 +56,10 @@
         },
         methods: {
             selectTool(selectedTool) {
+
                 this.selectedTools.push({ tool: selectedTool});
+                console.log('selected', selectedTool);
+                console.log('list', this.selectedTools);
 
             }
         }
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 33bf645f..5b002b29 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -94,7 +94,7 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
     });
 
-    it("checks tool table functionality", () => {
+    it("lets me create new tools and shows them in a table", () => {
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
@@ -107,8 +107,33 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='assessment-tool-table']").should("be.visible");
         cy.get("[data-cy='assessment-tool-table']").contains("MOCA");
 
-
     });
 
-
+    it("if I have already made a tool, I cannot make another one    ", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+        // Do it the first time
+        cy.get("[data-cy='toolgroup-select']").click();
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='toolgroup-select']").click();
+        cy.get("[data-cy='toolgroup-select']").type("SomeOtherThing{enter}");
+        // I hope nobody asks me to explain this
+        cy.get("[data-cy='assessment-tool-table']")
+            .find("tr:contains('MOCA')")
+            .filter((index, element) => Cypress.$(element).text() === "MOCA")
+            .should("have.length", 1);
+
+        // Do it again
+        cy.get("[data-cy='toolgroup-select']").click();
+        // The reason this is expected to fail is because the dropdown will not permit the
+        // user to type and enter again. Maybe we should make the assert more explicit
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='assessment-tool-table']")
+            .find("tr:contains('MOCA')")
+            .filter((index, element) => Cypress.$(element).text() === "MOCA")
+            .should("have.length", 1);
+    });
 });

From 55aafd8ba3e5faa9c76651c803d036787b8625ab Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Fri, 13 Oct 2023 14:41:49 -0400
Subject: [PATCH 05/45] Updated test

---
 cypress/component/category-toolgroup.cy.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 5b002b29..4231f08a 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -136,4 +136,26 @@ describe("Tool Group component", () => {
             .filter((index, element) => Cypress.$(element).text() === "MOCA")
             .should("have.length", 1);
     });
+
+    it("when I click on a tool the tool gets highlighted", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+        cy.get("[data-cy='toolgroup-select']").click();
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        // assert that the element has white background
+        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").should("have.css", "background-color", "rgb(255, 255, 255)");
+        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").click();
+        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").should("have.css", "background-color", "rgb(255, 0, 0)");
+    });
+
+    it("when I selet a tool and then click on a column, the column gets highlighted", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+    });
 });

From 4a71e4aedce838eabdb91fe71f0989de0d35a698 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Fri, 13 Oct 2023 16:03:04 -0400
Subject: [PATCH 06/45] Added functionality for highlighting selected tool

Co-authored-by: Arman Jahanpour <rmanaem@users.noreply.github.com>
---
 components/category-toolgroup.vue          | 51 +++++++++++++++-------
 cypress/component/category-toolgroup.cy.js | 15 ++++---
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index fc1032a7..21829786 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -1,13 +1,23 @@
 <template>
     <div>
         <b-table
-            data-cy="assessment-column-table"
+            v-if="selectedTools.length > 0"
+            data-cy="assessment-tool-table"
             outlined
             selectable
             head-variant="dark"
-            :items="tableRows"
+            :items="selectedTools"
             select-mode="single"
             selected-variant=""
+            @row-selected="highlightRow"
+            :tbody-tr-class="styleTableRow"
+            thead-class="hidden" />
+        <b-table
+            data-cy="assessment-column-table"
+            outlined
+            head-variant="dark"
+            :items="tableRows"
+            selected-variant=""
             thead-class="hidden" />
 
         <v-select
@@ -18,16 +28,6 @@
             @input="selectTool"
             :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
 
-        <b-table
-            v-if="selectedTools.length > 0"
-            data-cy="assessment-tool-table"
-            outlined
-            selectable
-            head-variant="dark"
-            :items="selectedTools"
-            select-mode="single"
-            selected-variant=""
-            thead-class="hidden" />
     </div>
 </template>
 
@@ -39,7 +39,8 @@
         data() {
             return {
                 toolGroups: ["MOCA", "UPDRSIII", "SomeOtherThing", "AnotherThing"],
-                selectedTools: []
+                selectedTools: [],
+                selectedTool: null
             };
 
         },
@@ -58,10 +59,28 @@
             selectTool(selectedTool) {
 
                 this.selectedTools.push({ tool: selectedTool});
-                console.log('selected', selectedTool);
-                console.log('list', this.selectedTools);
 
+            },
+            highlightRow(rows) {
+                if ( 0 !== rows.length ) {
+                    this.selectedTool = rows[0].tool;
+                }
+
+            },
+
+            styleTableRow(p_row) {
+                if (p_row.tool === this.selectedTool) {
+                    return "selected-tool";
+                }
+                return "";
             }
         }
     };
-</script>
\ No newline at end of file
+</script>
+<style>
+
+.selected-tool {
+    background-color: red !important;
+}
+
+</style>
\ No newline at end of file
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 4231f08a..971fad08 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -145,13 +145,18 @@ describe("Tool Group component", () => {
         });
         cy.get("[data-cy='toolgroup-select']").click();
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        // assert that the element has white background
-        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").should("have.css", "background-color", "rgb(255, 255, 255)");
-        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").click();
-        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").should("have.css", "background-color", "rgb(255, 0, 0)");
+
+        // Grab the element background color before beiing
+        cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
+        .invoke("css", "background-color").then((InitialBackgroundColor) => {
+            cy.get("[data-cy='assessment-tool-table']")
+            .find("tr:contains('MOCA')").click();
+            // assert that element has different color after
+            cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").should("not.have.css", "background-color", InitialBackgroundColor);
+        });
     });
 
-    it("when I selet a tool and then click on a column, the column gets highlighted", () => {
+    it("when I select a tool and then click on a column, the column gets highlighted", () => {
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store

From cb22d7fe38b1794f9077a392639c1640d0157a18 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Fri, 13 Oct 2023 16:12:16 -0400
Subject: [PATCH 07/45] don't need clicks

---
 cypress/component/category-toolgroup.cy.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 971fad08..a5fba408 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -88,7 +88,6 @@ describe("Tool Group component", () => {
         });
 
         cy.get("[data-cy='toolgroup-select']").should("be.visible");
-        cy.get("[data-cy='toolgroup-select']").click();
         // For now the tool groups come from inside the component and we know they will include MOCA
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
         cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
@@ -101,7 +100,6 @@ describe("Tool Group component", () => {
             }
         });
         cy.get("[data-cy='assessment-tool-table']").should("not.exist");
-        cy.get("[data-cy='toolgroup-select']").click();
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
         cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
         cy.get("[data-cy='assessment-tool-table']").should("be.visible");
@@ -116,9 +114,7 @@ describe("Tool Group component", () => {
             }
         });
         // Do it the first time
-        cy.get("[data-cy='toolgroup-select']").click();
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        cy.get("[data-cy='toolgroup-select']").click();
         cy.get("[data-cy='toolgroup-select']").type("SomeOtherThing{enter}");
         // I hope nobody asks me to explain this
         cy.get("[data-cy='assessment-tool-table']")
@@ -127,7 +123,6 @@ describe("Tool Group component", () => {
             .should("have.length", 1);
 
         // Do it again
-        cy.get("[data-cy='toolgroup-select']").click();
         // The reason this is expected to fail is because the dropdown will not permit the
         // user to type and enter again. Maybe we should make the assert more explicit
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
@@ -143,7 +138,6 @@ describe("Tool Group component", () => {
                 $store: store
             }
         });
-        cy.get("[data-cy='toolgroup-select']").click();
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
 
         // Grab the element background color before beiing
@@ -156,11 +150,15 @@ describe("Tool Group component", () => {
         });
     });
 
-    it("when I select a tool and then click on a column, the column gets highlighted", () => {
+    it("when a tool is selected and I click on a column, the column gets highlighted", () => {
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
             }
         });
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        // select the first tool
+        cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
+
     });
 });

From 17a736772aa670cac47854dba1c36fc00e421d4a Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Fri, 13 Oct 2023 16:53:59 -0400
Subject: [PATCH 08/45] Added capability to map column to tool

also reflected visually
---
 components/category-toolgroup.vue          | 40 +++++++++++++++++-----
 cypress/component/category-toolgroup.cy.js |  9 ++++-
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 21829786..c4c20b0f 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -12,13 +12,6 @@
             @row-selected="highlightRow"
             :tbody-tr-class="styleTableRow"
             thead-class="hidden" />
-        <b-table
-            data-cy="assessment-column-table"
-            outlined
-            head-variant="dark"
-            :items="tableRows"
-            selected-variant=""
-            thead-class="hidden" />
 
         <v-select
             data-cy="toolgroup-select"
@@ -28,6 +21,17 @@
             @input="selectTool"
             :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
 
+        <b-table
+            data-cy="assessment-column-table"
+            outlined
+            head-variant="dark"
+            :items="tableRows"
+            selected-variant=""
+            thead-class="hidden"
+            @row-clicked="mapColumnToTool"
+            :tbody-tr-class="styleRow" />
+
+
     </div>
 </template>
 
@@ -40,7 +44,13 @@
             return {
                 toolGroups: ["MOCA", "UPDRSIII", "SomeOtherThing", "AnotherThing"],
                 selectedTools: [],
-                selectedTool: null
+                selectedTool: null,
+                //Todo: populate keys using columns that are coming from the store
+                column2ToolMap: {
+                    column1: null,
+                    column2: null,
+                    column3: null
+                }
             };
 
         },
@@ -73,6 +83,20 @@
                     return "selected-tool";
                 }
                 return "";
+            },
+            mapColumnToTool(row) {
+                if (this.column2ToolMap[row.column] === this.selectedTool) {
+                    this.column2ToolMap[row.column] = null;
+                } else {
+                    this.column2ToolMap[row.column] = this.selectedTool;
+                }
+            },
+            styleRow(p_row) {
+                if (this.column2ToolMap[p_row.column] === this.selectedTool) {
+                    return "selected-tool";
+                } else {
+                    return "";
+                }
             }
         }
     };
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index a5fba408..114e169e 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -159,6 +159,13 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
         // select the first tool
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
-
+        // Then the column gets highlighted
+        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')")
+        .invoke("css", "background-color").then((InitialBackgroundColor) => {
+            cy.get("[data-cy='assessment-column-table']")
+            .find("tr:contains('column1')").click();
+            // assert that element has different color after
+            cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')").should("not.have.css", "background-color", InitialBackgroundColor);
+        });
     });
 });

From bd91e5b3eca111828c78e4f6e5821c7f0ae0c0a4 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 09:55:36 -0400
Subject: [PATCH 09/45] Basic layout

---
 components/category-toolgroup.vue | 70 +++++++++++++++++--------------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index c4c20b0f..e45029e5 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -1,37 +1,44 @@
 <template>
     <div>
-        <b-table
-            v-if="selectedTools.length > 0"
-            data-cy="assessment-tool-table"
-            outlined
-            selectable
-            head-variant="dark"
-            :items="selectedTools"
-            select-mode="single"
-            selected-variant=""
-            @row-selected="highlightRow"
-            :tbody-tr-class="styleTableRow"
-            thead-class="hidden" />
-
-        <v-select
-            data-cy="toolgroup-select"
-            label="Select a tool"
-            :options="toolGroups"
-            outlined
-            @input="selectTool"
-            :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
-
-        <b-table
-            data-cy="assessment-column-table"
-            outlined
-            head-variant="dark"
-            :items="tableRows"
-            selected-variant=""
-            thead-class="hidden"
-            @row-clicked="mapColumnToTool"
-            :tbody-tr-class="styleRow" />
-
+        <b-row>
+            <b-col cols="6">
+                <v-select
+                    data-cy="toolgroup-select"
+                    label="Select a tool"
+                    :options="toolGroups"
+                    outlined
+                    @input="selectTool"
+                    :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
+            </b-col>
+        </b-row>
+        <b-row>
+            <b-col>
+                <b-table
+                    v-if="selectedTools.length > 0"
+                    data-cy="assessment-tool-table"
+                    outlined
+                    selectable
+                    head-variant="dark"
+                    :items="selectedTools"
+                    select-mode="single"
+                    selected-variant=""
+                    @row-selected="highlightRow"
+                    :tbody-tr-class="styleTableRow"
+                    thead-class="hidden" />
 
+            </b-col>
+            <b-col>
+                <b-table
+                    data-cy="assessment-column-table"
+                    outlined
+                    head-variant="dark"
+                    :items="tableRows"
+                    selected-variant=""
+                    thead-class="hidden"
+                    @row-clicked="mapColumnToTool"
+                    :tbody-tr-class="styleRow" />
+            </b-col>
+        </b-row>
     </div>
 </template>
 
@@ -75,7 +82,6 @@
                 if ( 0 !== rows.length ) {
                     this.selectedTool = rows[0].tool;
                 }
-
             },
 
             styleTableRow(p_row) {

From 9c013678e8760fcd932a914efca496ba9632cde3 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 11:16:52 -0400
Subject: [PATCH 10/45] First attempt at getting tool list from store

---
 components/category-toolgroup.vue          | 18 ++++++++++--------
 cypress/component/category-toolgroup.cy.js |  7 +++++++
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index e45029e5..59dd8b88 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -4,11 +4,10 @@
             <b-col cols="6">
                 <v-select
                     data-cy="toolgroup-select"
-                    label="Select a tool"
-                    :options="toolGroups"
+                    :options="toolTerms"
                     outlined
                     @input="selectTool"
-                    :selectable="(option) => !selectedTools.some(el => el.tool.includes(option))" />
+                    :selectable="(option) => !selectedTools.some(el => el.tool.includes(option.label))" />
             </b-col>
         </b-row>
         <b-row>
@@ -44,12 +43,11 @@
 
 <script>
 
-    import { mapGetters } from 'vuex';
+    import { mapGetters, mapState } from 'vuex';
 
     export default {
         data() {
             return {
-                toolGroups: ["MOCA", "UPDRSIII", "SomeOtherThing", "AnotherThing"],
                 selectedTools: [],
                 selectedTool: null,
                 //Todo: populate keys using columns that are coming from the store
@@ -66,6 +64,11 @@
             ...mapGetters([
                 'getColumnsForCategory'
             ]),
+
+            ...mapState([
+
+                "toolTerms"
+            ]),
             tableRows() {
                 return this.getColumnsForCategory('Assessment Tool').map(column => ({
                     column: column
@@ -74,9 +77,8 @@
         },
         methods: {
             selectTool(selectedTool) {
-
-                this.selectedTools.push({ tool: selectedTool});
-
+                console.log('someone selected', selectedTool);
+                this.selectedTools.push({ tool: selectedTool.label});
             },
             highlightRow(rows) {
                 if ( 0 !== rows.length ) {
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 114e169e..5f10e68c 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -31,6 +31,13 @@ describe("Tool Group component", () => {
                 { column1: 2, column2: "column2_value2", column3: "column3_value2" },
                 { column1: 1, column2: "column2_value3", column3: "column3_value3" },
                 { column1: 3, column2: "column2_value2", column3: "column3_value4" }
+            ],
+
+            toolTerms: [
+                {label: 'MOCA', id: 'cogatlas:MOCA'},
+                {label: 'UPDRSIII', id: 'cogatlas:UPDRSIII'},
+                {label: 'SomeOtherThing', id: 'cogatlas:SomeOtherThing'},
+                {label: 'AnotherThing', id: 'cogatlas:AnotherThing'}
             ]
         };
         store = {

From 0d74fed1ca8b23541f63d059b4202d39713e3566 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 11:37:42 -0400
Subject: [PATCH 11/45] Pass id with tool

But only display the label
---
 components/category-toolgroup.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 59dd8b88..379ef30c 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -21,6 +21,7 @@
                     :items="selectedTools"
                     select-mode="single"
                     selected-variant=""
+                    :fields="[{ key: 'tool' }]"
                     @row-selected="highlightRow"
                     :tbody-tr-class="styleTableRow"
                     thead-class="hidden" />
@@ -78,7 +79,10 @@
         methods: {
             selectTool(selectedTool) {
                 console.log('someone selected', selectedTool);
-                this.selectedTools.push({ tool: selectedTool.label});
+                this.selectedTools.push({
+                    tool: selectedTool.label,
+                    identifier: selectedTool.id
+                });
             },
             highlightRow(rows) {
                 if ( 0 !== rows.length ) {

From 8f7ec5fe287f7ebfd36f99555f1864d39fcbb18f Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 11:46:28 -0400
Subject: [PATCH 12/45] Pass tool by identifier

---
 components/category-toolgroup.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 379ef30c..ae395b47 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -50,7 +50,10 @@
         data() {
             return {
                 selectedTools: [],
-                selectedTool: null,
+                selectedTool: {
+                    tool: null,
+                    identifier: null
+                },
                 //Todo: populate keys using columns that are coming from the store
                 column2ToolMap: {
                     column1: null,
@@ -78,7 +81,6 @@
         },
         methods: {
             selectTool(selectedTool) {
-                console.log('someone selected', selectedTool);
                 this.selectedTools.push({
                     tool: selectedTool.label,
                     identifier: selectedTool.id
@@ -86,25 +88,25 @@
             },
             highlightRow(rows) {
                 if ( 0 !== rows.length ) {
-                    this.selectedTool = rows[0].tool;
+                    this.selectedTool = rows[0];
                 }
             },
 
             styleTableRow(p_row) {
-                if (p_row.tool === this.selectedTool) {
+                if (p_row.identifier === this.selectedTool.identifier) {
                     return "selected-tool";
                 }
                 return "";
             },
             mapColumnToTool(row) {
-                if (this.column2ToolMap[row.column] === this.selectedTool) {
+                if (this.column2ToolMap[row.column] === this.selectedTool.identifier) {
                     this.column2ToolMap[row.column] = null;
                 } else {
-                    this.column2ToolMap[row.column] = this.selectedTool;
+                    this.column2ToolMap[row.column] = this.selectedTool.identifier;
                 }
             },
             styleRow(p_row) {
-                if (this.column2ToolMap[p_row.column] === this.selectedTool) {
+                if (this.column2ToolMap[p_row.column] === this.selectedTool.identifier) {
                     return "selected-tool";
                 } else {
                     return "";

From 98f9c79381fd36c0b1fde8f7b9a15b3f51931868 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 17:37:47 -0400
Subject: [PATCH 13/45] WIP: fire mutation for createTool

Not yet in store
---
 components/category-toolgroup.vue          | 14 +++++++++----
 cypress/component/category-toolgroup.cy.js | 24 ++++++++++++----------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index ae395b47..a0e50649 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -44,7 +44,7 @@
 
 <script>
 
-    import { mapGetters, mapState } from 'vuex';
+    import { mapGetters, mapState, mapMutations } from 'vuex';
 
     export default {
         data() {
@@ -80,11 +80,17 @@
             }
         },
         methods: {
+            ...mapMutations([
+
+                "createTool"
+            ]),
             selectTool(selectedTool) {
-                this.selectedTools.push({
-                    tool: selectedTool.label,
-                    identifier: selectedTool.id
+
+                this.createTool({
+                    identifier: selectedTool.id,
+                    label: selectedTool.label
                 });
+
             },
             highlightRow(rows) {
                 if ( 0 !== rows.length ) {
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 5f10e68c..06e3deaa 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -34,17 +34,19 @@ describe("Tool Group component", () => {
             ],
 
             toolTerms: [
-                {label: 'MOCA', id: 'cogatlas:MOCA'},
-                {label: 'UPDRSIII', id: 'cogatlas:UPDRSIII'},
-                {label: 'SomeOtherThing', id: 'cogatlas:SomeOtherThing'},
-                {label: 'AnotherThing', id: 'cogatlas:AnotherThing'}
+                {label: 'MOCA', id: 'cogatlas:MOCA', selected: false},
+                {label: 'UPDRSIII', id: 'cogatlas:UPDRSIII', selected: false},
+                {label: 'SomeOtherThing', id: 'cogatlas:SomeOtherThing', selected: false},
+                {label: 'AnotherThing', id: 'cogatlas:AnotherThing', selected: false}
             ]
         };
         store = {
 
+            commit: () => {},
             state: state,
             getters: {
-                getColumnsForCategory: getters.getColumnsForCategory(state)
+                getColumnsForCategory: getters.getColumnsForCategory(state),
+                getSelectedTools: getters.getSelectedTools(state)
             }
         };
     });
@@ -86,7 +88,7 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='assessment-column-table']").contains("column3");
     });
 
-    it("has a dropdown with different assessment tools", () => {
+    it("gets assessment tool names from the store and shows them in a dropdown", () => {
         cy.mount(categoryToolGroup, {
             mocks: {
 
@@ -100,17 +102,17 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
     });
 
-    it("lets me create new tools and shows them in a table", () => {
+    it("selecting a tool group fires a createTool mutation", () => {
+        cy.spy(store, "commit").as("commitSpy");
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
             }
         });
-        cy.get("[data-cy='assessment-tool-table']").should("not.exist");
+
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
-        cy.get("[data-cy='assessment-tool-table']").should("be.visible");
-        cy.get("[data-cy='assessment-tool-table']").contains("MOCA");
+        cy.get("@commitSpy").should("have.been.calledWith", "createTool", { identifier: 'cogatlas:MOCA', label: 'MOCA' });
+
 
     });
 

From 8e22338b17c75b6798618c54abe1f905561ca659 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 19:37:24 -0400
Subject: [PATCH 14/45] Toolgroup component can handle state and store

---
 components/category-toolgroup.vue          |  28 +++---
 cypress/component/category-toolgroup.cy.js | 103 ++++++++++++++-------
 2 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index a0e50649..3711fa7b 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -7,21 +7,21 @@
                     :options="toolTerms"
                     outlined
                     @input="selectTool"
-                    :selectable="(option) => !selectedTools.some(el => el.tool.includes(option.label))" />
+                    :selectable="(option) => !getSelectedTools.some(el => el.id.includes(option.id))" />
             </b-col>
         </b-row>
         <b-row>
             <b-col>
                 <b-table
-                    v-if="selectedTools.length > 0"
+                    v-if="getSelectedTools.length > 0"
                     data-cy="assessment-tool-table"
                     outlined
                     selectable
                     head-variant="dark"
-                    :items="selectedTools"
+                    :items="getSelectedTools"
                     select-mode="single"
                     selected-variant=""
-                    :fields="[{ key: 'tool' }]"
+                    :fields="[{ key: 'label' }]"
                     @row-selected="highlightRow"
                     :tbody-tr-class="styleTableRow"
                     thead-class="hidden" />
@@ -49,16 +49,9 @@
     export default {
         data() {
             return {
-                selectedTools: [],
                 selectedTool: {
                     tool: null,
                     identifier: null
-                },
-                //Todo: populate keys using columns that are coming from the store
-                column2ToolMap: {
-                    column1: null,
-                    column2: null,
-                    column3: null
                 }
             };
 
@@ -66,12 +59,14 @@
 
         computed: {
             ...mapGetters([
-                'getColumnsForCategory'
+                'getColumnsForCategory',
+                'getSelectedTools'
             ]),
 
             ...mapState([
 
-                "toolTerms"
+                "toolTerms",
+                "column2ToolMap"
             ]),
             tableRows() {
                 return this.getColumnsForCategory('Assessment Tool').map(column => ({
@@ -85,6 +80,7 @@
                 "createTool"
             ]),
             selectTool(selectedTool) {
+                console.log('getter says', this.getSelectedTools);
 
                 this.createTool({
                     identifier: selectedTool.id,
@@ -96,10 +92,12 @@
                 if ( 0 !== rows.length ) {
                     this.selectedTool = rows[0];
                 }
+                console.log('selected is', this.selectedTool);
             },
 
             styleTableRow(p_row) {
-                if (p_row.identifier === this.selectedTool.identifier) {
+                console.log('row is', p_row, 'and selected is', this.selectedTool);
+                if (p_row.id === this.selectedTool.id) {
                     return "selected-tool";
                 }
                 return "";
@@ -112,7 +110,7 @@
                 }
             },
             styleRow(p_row) {
-                if (this.column2ToolMap[p_row.column] === this.selectedTool.identifier) {
+                if (this.column2ToolMap[p_row.column] === this.selectedTool.id) {
                     return "selected-tool";
                 } else {
                     return "";
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 06e3deaa..c39fb75c 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -4,6 +4,14 @@ import { getters } from "~/store";
 let store;
 let state;
 
+// TODO see if we can replace this by manipulating state and passing by reference
+const makeGetters =(state) => {
+    return {
+        getColumnsForCategory: getters.getColumnsForCategory(state),
+        getSelectedTools: getters.getSelectedTools(state)
+    };
+};
+
 describe("Tool Group component", () => {
 
     beforeEach(() => {
@@ -15,6 +23,12 @@ describe("Tool Group component", () => {
                 column3: "Assessment Tool"
             },
 
+            column2ToolMap: {
+                column1: 'cogatlas:MOCA',
+                column2: null,
+                column3: 'cogatlas:UPDRSIII'
+            },
+
             dataDictionary: {
 
                 annotated: {
@@ -44,10 +58,7 @@ describe("Tool Group component", () => {
 
             commit: () => {},
             state: state,
-            getters: {
-                getColumnsForCategory: getters.getColumnsForCategory(state),
-                getSelectedTools: getters.getSelectedTools(state)
-            }
+            getters: makeGetters(state)
         };
     });
 
@@ -97,7 +108,6 @@ describe("Tool Group component", () => {
         });
 
         cy.get("[data-cy='toolgroup-select']").should("be.visible");
-        // For now the tool groups come from inside the component and we know they will include MOCA
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
         cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
     });
@@ -116,38 +126,62 @@ describe("Tool Group component", () => {
 
     });
 
-    it("if I have already made a tool, I cannot make another one    ", () => {
+    it("when a tool is selected in the store, it appears in the tool table", () => {
+        store.state.toolTerms[0]['selected'] = true;
+        store.getters = makeGetters(store.state);
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
             }
         });
-        // Do it the first time
-        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        cy.get("[data-cy='toolgroup-select']").type("SomeOtherThing{enter}");
-        // I hope nobody asks me to explain this
-        cy.get("[data-cy='assessment-tool-table']")
-            .find("tr:contains('MOCA')")
-            .filter((index, element) => Cypress.$(element).text() === "MOCA")
-            .should("have.length", 1);
-
-        // Do it again
-        // The reason this is expected to fail is because the dropdown will not permit the
-        // user to type and enter again. Maybe we should make the assert more explicit
-        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        cy.get("[data-cy='assessment-tool-table']")
-            .find("tr:contains('MOCA')")
-            .filter((index, element) => Cypress.$(element).text() === "MOCA")
-            .should("have.length", 1);
+
+        cy.get("[data-cy='assessment-tool-table']").contains('MOCA');
+    });
+
+    it("tools in the tool-table start unselected and become styled when clicked", () => {
+        store.state.toolTerms[0]['selected'] = true;
+        store.state.toolTerms[2]['selected'] = true;
+        store.getters = makeGetters(store.state);
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+
+        cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
+        .invoke("css", "background-color").then((InitialBackgroundColor) => {
+            cy.get("[data-cy='assessment-tool-table']")
+            .find("tr:contains('MOCA')").click();
+            // assert that element has different color after
+            cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").should("not.have.css", "background-color", InitialBackgroundColor);
+        });
+    });
+
+    it("if a tool is already created, trying to create it again has no effect", () => {
+        store.state.toolTerms[0]['selected'] = true;
+        store.getters = makeGetters(store.state);
+
+        cy.spy(store, "commit").as("commitSpy");
+
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+        cy.get("[data-cy='assessment-tool-table']").contains("MOCA").click();
+        cy.get("@commitSpy").should("not.have.been.called");
+
     });
 
     it("when I click on a tool the tool gets highlighted", () => {
+        store.state.toolTerms[0]['selected'] = true;
+        store.getters = makeGetters(store.state);
+
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
             }
         });
-        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
 
         // Grab the element background color before beiing
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
@@ -159,22 +193,27 @@ describe("Tool Group component", () => {
         });
     });
 
-    it("when a tool is selected and I click on a column, the column gets highlighted", () => {
+    it("when a column is mapped to a tool and the tool gets selected, the column gets highlighted", () => {
+        // MOCA
+        store.state.toolTerms[0]['selected'] = true;
+        // UPDRS
+        store.state.toolTerms[1]['selected'] = true;
+        store.getters = makeGetters(store.state);
+
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
             }
         });
-        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        // select the first tool
+        // Starting out with a different tool selected
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
-        // Then the column gets highlighted
-        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')")
+        cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')")
         .invoke("css", "background-color").then((InitialBackgroundColor) => {
-            cy.get("[data-cy='assessment-column-table']")
-            .find("tr:contains('column1')").click();
+            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('column1')").should("not.have.css", "background-color", InitialBackgroundColor);
+            cy.get("[data-cy='assessment-column-table']").find("tr:contains('column3')").should("not.have.css", "background-color", InitialBackgroundColor);
         });
     });
 });

From 8113dd5d44d3415a2c3dcd68c43289b43e3adcdf Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 20:17:07 -0400
Subject: [PATCH 15/45] Added store mutation for creating tools

---
 components/category-toolgroup.vue             |  2 -
 cypress/component/category-toolgroup.cy.js    |  2 +-
 .../unit/store-mutation-createToolGroup.cy.js | 38 +++++++++++++++++++
 store/index.js                                | 38 +++++++++++--------
 4 files changed, 62 insertions(+), 18 deletions(-)
 create mode 100644 cypress/unit/store-mutation-createToolGroup.cy.js

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 3711fa7b..c5a3a488 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -80,7 +80,6 @@
                 "createTool"
             ]),
             selectTool(selectedTool) {
-                console.log('getter says', this.getSelectedTools);
 
                 this.createTool({
                     identifier: selectedTool.id,
@@ -92,7 +91,6 @@
                 if ( 0 !== rows.length ) {
                     this.selectedTool = rows[0];
                 }
-                console.log('selected is', this.selectedTool);
             },
 
             styleTableRow(p_row) {
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index c39fb75c..d18893f9 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -127,7 +127,7 @@ describe("Tool Group component", () => {
     });
 
     it("when a tool is selected in the store, it appears in the tool table", () => {
-        store.state.toolTerms[0]['selected'] = true;
+        store.state.toolTerms.spli[0]['selected'] = true;
         store.getters = makeGetters(store.state);
         cy.mount(categoryToolGroup, {
             mocks: {
diff --git a/cypress/unit/store-mutation-createToolGroup.cy.js b/cypress/unit/store-mutation-createToolGroup.cy.js
new file mode 100644
index 00000000..dacd22c3
--- /dev/null
+++ b/cypress/unit/store-mutation-createToolGroup.cy.js
@@ -0,0 +1,38 @@
+import { mutations } from "~/store";
+
+let store;
+
+describe("createToolGroup mutation", () => {
+
+    beforeEach(() => {
+
+        store = {
+
+            state: {
+
+                toolTerms: [
+                    {
+                        label: "MOCA",
+                        identifier: "cogAtlas:MOCA",
+                        selected: false
+                    },
+                    {
+                        label: "UPDRS",
+                        identifier: "cogAtlas:UPDRS",
+                        selected: false
+                    }
+                ]
+            }
+        };
+    });
+
+    it("Makes sure an annotated value is set in the value map", () => {
+
+        // Act
+        mutations.createToolGroup(store.state, { identifier: 'cogAtlas:MOCA', label: 'MOCA' });
+        console.log(store.state.toolTerms);
+        // Assert
+        expect(store.state.toolTerms.filter(tool => tool.identifier === 'cogAtlas:MOCA')[0]['selected']).to.be.true;
+    });
+
+});
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index 2c254499..0e8faad2 100644
--- a/store/index.js
+++ b/store/index.js
@@ -187,7 +187,20 @@ export const state = () => ({
             Label: "period of time defined according to the ISO8601 standard",
             TermURL: "nb:FromISO8601"
         }
-    }
+    },
+
+    toolTerms: [
+        {
+            label: "MOCA",
+            identifier: "cogAtlas:MOCA",
+            selected: false
+        },
+        {
+            label: "UPDRS",
+            identifier: "cogAtlas:UPDRS",
+            selected: false
+        }
+    ]
 });
 
 export const getters = {
@@ -453,20 +466,6 @@ export const getters = {
         return [...categorySet];
     },
 
-    getMappedColumns: (p_state) => (p_category) => {
-
-        const mappedColumns = [];
-        for ( const column in p_state.columnToCategoryMap ) {
-
-            if ( p_category === p_state.columnToCategoryMap[column] ) {
-
-                mappedColumns.push(column);
-            }
-        }
-
-        return mappedColumns;
-    },
-
     getMissingValues: (p_state) => (p_category) => {
 
         // 1. Retrieve all columns linked with the given category
@@ -542,6 +541,10 @@ export const getters = {
         return selectedCategoricalOption;
     },
 
+    getSelectedTools: (p_state) =>  {
+        return p_state.toolTerms.filter(term => term.selected);
+    },
+
     getTransformOptions: (p_state) => (p_category) => {
 
         return Object.keys(p_state.transformationHeuristics);
@@ -747,6 +750,11 @@ export const mutations = {
         }
     },
 
+    createToolGroup(p_state, newTool) {
+        const toolIndex = p_state.toolTerms.findIndex(tool => tool.identifier === newTool.identifier);
+        p_state.toolTerms.splice(toolIndex, 1, Object.assign(p_state.toolTerms[toolIndex], { selected: true }));
+    },
+
     initializeColumnToCategoryMap(p_state, p_columns) {
 
         // Column to category map lists all columns as keys with default value of null

From 410d9cb5de02d3f74e4a30ee1b0d34048e6b2f26 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 20:23:34 -0400
Subject: [PATCH 16/45] Add columnToToolMap in the store

---
 components/category-toolgroup.vue          | 10 +++++-----
 cypress/component/category-toolgroup.cy.js |  4 ++--
 store/index.js                             |  4 +++-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index c5a3a488..fc99941e 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -66,7 +66,7 @@
             ...mapState([
 
                 "toolTerms",
-                "column2ToolMap"
+                "columnToToolMap"
             ]),
             tableRows() {
                 return this.getColumnsForCategory('Assessment Tool').map(column => ({
@@ -101,14 +101,14 @@
                 return "";
             },
             mapColumnToTool(row) {
-                if (this.column2ToolMap[row.column] === this.selectedTool.identifier) {
-                    this.column2ToolMap[row.column] = null;
+                if (this.columnToToolMap[row.column] === this.selectedTool.identifier) {
+                    this.columnToToolMap[row.column] = null;
                 } else {
-                    this.column2ToolMap[row.column] = this.selectedTool.identifier;
+                    this.columnToToolMap[row.column] = this.selectedTool.identifier;
                 }
             },
             styleRow(p_row) {
-                if (this.column2ToolMap[p_row.column] === this.selectedTool.id) {
+                if (this.columnToToolMap[p_row.column] === this.selectedTool.id) {
                     return "selected-tool";
                 } else {
                     return "";
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index d18893f9..cfa38152 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -23,7 +23,7 @@ describe("Tool Group component", () => {
                 column3: "Assessment Tool"
             },
 
-            column2ToolMap: {
+            columnToToolMap: {
                 column1: 'cogatlas:MOCA',
                 column2: null,
                 column3: 'cogatlas:UPDRSIII'
@@ -127,7 +127,7 @@ describe("Tool Group component", () => {
     });
 
     it("when a tool is selected in the store, it appears in the tool table", () => {
-        store.state.toolTerms.spli[0]['selected'] = true;
+        store.state.toolTerms[0]['selected'] = true;
         store.getters = makeGetters(store.state);
         cy.mount(categoryToolGroup, {
             mocks: {
diff --git a/store/index.js b/store/index.js
index 0e8faad2..ce532f1e 100644
--- a/store/index.js
+++ b/store/index.js
@@ -200,7 +200,9 @@ export const state = () => ({
             identifier: "cogAtlas:UPDRS",
             selected: false
         }
-    ]
+    ],
+
+    columnToToolMap: {}
 });
 
 export const getters = {

From 29dc8d02cf5c2d429b023fb07d389a261a8a0982 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Mon, 16 Oct 2023 20:28:14 -0400
Subject: [PATCH 17/45] WIP: adding failing test as reminder

We need a mutation for when a column is linked to a tool
---
 components/category-toolgroup.vue          |  1 -
 cypress/component/category-toolgroup.cy.js | 11 ++++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index fc99941e..9e2b8f15 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -94,7 +94,6 @@
             },
 
             styleTableRow(p_row) {
-                console.log('row is', p_row, 'and selected is', this.selectedTool);
                 if (p_row.id === this.selectedTool.id) {
                     return "selected-tool";
                 }
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index cfa38152..81e2d5dd 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -183,7 +183,6 @@ describe("Tool Group component", () => {
             }
         });
 
-        // Grab the element background color before beiing
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
         .invoke("css", "background-color").then((InitialBackgroundColor) => {
             cy.get("[data-cy='assessment-tool-table']")
@@ -193,6 +192,16 @@ describe("Tool Group component", () => {
         });
     });
 
+    it("when a tool is selected and I click on a column, the column gets mapped to the tool", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+
+        cy.get().should('be.invisilbe');
+    });
+
     it("when a column is mapped to a tool and the tool gets selected, the column gets highlighted", () => {
         // MOCA
         store.state.toolTerms[0]['selected'] = true;

From f4b41a266ac9fcf274cb2a5d055891434d969726 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 00:11:40 -0400
Subject: [PATCH 18/45] Add mutation for mapping column to tool

---
 components/category-toolgroup.vue          | 13 +++++--------
 cypress/component/category-toolgroup.cy.js | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 9e2b8f15..09f24803 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -35,7 +35,7 @@
                     :items="tableRows"
                     selected-variant=""
                     thead-class="hidden"
-                    @row-clicked="mapColumnToTool"
+                    @row-clicked="mapColumn"
                     :tbody-tr-class="styleRow" />
             </b-col>
         </b-row>
@@ -77,7 +77,8 @@
         methods: {
             ...mapMutations([
 
-                "createTool"
+                "createTool",
+                "mapColumnToTool"
             ]),
             selectTool(selectedTool) {
 
@@ -99,12 +100,8 @@
                 }
                 return "";
             },
-            mapColumnToTool(row) {
-                if (this.columnToToolMap[row.column] === this.selectedTool.identifier) {
-                    this.columnToToolMap[row.column] = null;
-                } else {
-                    this.columnToToolMap[row.column] = this.selectedTool.identifier;
-                }
+            mapColumn(row) {
+                this.mapColumnToTool(row.column, this.selectedTool.id);
             },
             styleRow(p_row) {
                 if (this.columnToToolMap[p_row.column] === this.selectedTool.id) {
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 81e2d5dd..077d1946 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -192,14 +192,25 @@ describe("Tool Group component", () => {
         });
     });
 
-    it("when a tool is selected and I click on a column, the column gets mapped to the tool", () => {
+    it("clicking on column with tool fires mapping mutation every time", () => {
+        store.state.toolTerms[0]['selected'] = true;
+        store.getters = makeGetters(store.state);
+
+        cy.spy(store, "commit").as("commitSpy");
+
         cy.mount(categoryToolGroup, {
             mocks: {
                 $store: store
             }
         });
 
-        cy.get().should('be.invisilbe');
+        cy.get("[data-cy='assessment-tool-table']").contains('MOCA').click();
+        cy.get("[data-cy='assessment-column-table']").contains("column1").click();
+        cy.get("@commitSpy").should("have.been.calledWith", "mapColumnToTool", "column1", "cogatlas:MOCA");
+        cy.get("[data-cy='assessment-column-table']").contains("column1").click();
+        cy.get("@commitSpy").should("have.been.calledWith", "mapColumnToTool", "column1", "cogatlas:MOCA");
+        cy.get("[data-cy='assessment-column-table']").contains("column3").click();
+        cy.get("@commitSpy").should("have.been.calledWith", "mapColumnToTool", "column3", "cogatlas:MOCA");
     });
 
     it("when a column is mapped to a tool and the tool gets selected, the column gets highlighted", () => {

From 391868bad7f3c9ca101afd5ef1e4fa98c0ff5af0 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 00:23:49 -0400
Subject: [PATCH 19/45] Implement column to tool mapping mutation

---
 .../store-mutation-alterColumnToToolMap.cy.js | 40 +++++++++++++++++++
 store/index.js                                |  8 ++++
 2 files changed, 48 insertions(+)
 create mode 100644 cypress/unit/store-mutation-alterColumnToToolMap.cy.js

diff --git a/cypress/unit/store-mutation-alterColumnToToolMap.cy.js b/cypress/unit/store-mutation-alterColumnToToolMap.cy.js
new file mode 100644
index 00000000..16bb6c99
--- /dev/null
+++ b/cypress/unit/store-mutation-alterColumnToToolMap.cy.js
@@ -0,0 +1,40 @@
+import { mutations } from "~/store";
+
+let store;
+
+describe("alterColumnToToolMapping", () => {
+
+    beforeEach(() => {
+
+        store = {
+
+            state: {
+
+                columnToToolMap : {
+
+                    "column1": "cogatlas:MOCA",
+                    "column2": null,
+                    "column3": "cogatlas:UPDRSIII"
+                }
+            }
+        };
+    });
+
+    it("Maps column to tool if it's not already mapped", () => {
+
+        mutations.alterColumnToToolMapping(store.state, "column2", "cogatlas:MOCA");
+        expect(store.state.columnToToolMap.column2).to.equal("cogatlas:MOCA");
+    });
+
+    it("Maps column to new tool overwriting previous mapping", () => {
+
+        mutations.alterColumnToToolMapping(store.state, "column3", "cogatlas:MOCA");
+        expect(store.state.columnToToolMap.column3).to.equal("cogatlas:MOCA");
+    });
+
+    it("Sets mapping to null if it's already mapped", () => {
+
+        mutations.alterColumnToToolMapping(store.state, "column1", "cogatlas:MOCA");
+        expect(store.state.columnToToolMap.column1).to.equal(null);
+    });
+});
diff --git a/store/index.js b/store/index.js
index ce532f1e..da6da5d6 100644
--- a/store/index.js
+++ b/store/index.js
@@ -752,6 +752,14 @@ export const mutations = {
         }
     },
 
+    alterColumnToToolMapping(p_state, columnName, toolIdentifier) {
+        if ( p_state.columnToToolMap[columnName] == toolIdentifier ) {
+            p_state.columnToToolMap[columnName] = null;
+        } else {
+            p_state.columnToToolMap[columnName] = toolIdentifier;
+        }
+    },
+
     createToolGroup(p_state, newTool) {
         const toolIndex = p_state.toolTerms.findIndex(tool => tool.identifier === newTool.identifier);
         p_state.toolTerms.splice(toolIndex, 1, Object.assign(p_state.toolTerms[toolIndex], { selected: true }));

From fcc9f832481854136ad5d9b1390d5f0340833cc8 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 00:31:07 -0400
Subject: [PATCH 20/45] Add simplistic initialization of column2Tool Map

---
 store/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/store/index.js b/store/index.js
index da6da5d6..1e493ebd 100644
--- a/store/index.js
+++ b/store/index.js
@@ -770,6 +770,10 @@ export const mutations = {
         // Column to category map lists all columns as keys with default value of null
         p_state.columnToCategoryMap =
             Object.fromEntries(p_columns.map((column) => [column, null]));
+        // TODO: consider refactoring this so we don't initialize all columns
+        // but only the ones that are assigned to assessment tool
+        p_state.columnToToolMap =
+            Object.fromEntries(p_columns.map((column) => [column, null]));
     },
 
     initializeDataDictionary(p_state) {

From 7bd666df1eef2674802d2bf253914885a6f5dd0e Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 14:25:58 -0400
Subject: [PATCH 21/45] Refactored store functions and tests

---
 components/category-toolgroup.vue          | 16 ++++++++--------
 cypress/component/category-toolgroup.cy.js | 16 ++++++++--------
 store/index.js                             |  1 +
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 09f24803..84e45af9 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -7,7 +7,7 @@
                     :options="toolTerms"
                     outlined
                     @input="selectTool"
-                    :selectable="(option) => !getSelectedTools.some(el => el.id.includes(option.id))" />
+                    :selectable="(option) => !getSelectedTools.some(el => el.identifier.includes(option.identifier))" />
             </b-col>
         </b-row>
         <b-row>
@@ -77,13 +77,13 @@
         methods: {
             ...mapMutations([
 
-                "createTool",
-                "mapColumnToTool"
+                "createToolGroup",
+                "alterColumnToToolMapping"
             ]),
             selectTool(selectedTool) {
 
-                this.createTool({
-                    identifier: selectedTool.id,
+                this.createToolGroup({
+                    identifier: selectedTool.identifier,
                     label: selectedTool.label
                 });
 
@@ -95,16 +95,16 @@
             },
 
             styleTableRow(p_row) {
-                if (p_row.id === this.selectedTool.id) {
+                if (p_row.identifier === this.selectedTool.identifier) {
                     return "selected-tool";
                 }
                 return "";
             },
             mapColumn(row) {
-                this.mapColumnToTool(row.column, this.selectedTool.id);
+                this.alterColumnToToolMapping({columnName: row.column, toolIdentifier: this.selectedTool.identifier});
             },
             styleRow(p_row) {
-                if (this.columnToToolMap[p_row.column] === this.selectedTool.id) {
+                if (this.columnToToolMap[p_row.column] === this.selectedTool.identifier) {
                     return "selected-tool";
                 } else {
                     return "";
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 077d1946..a2eccf29 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -48,10 +48,10 @@ describe("Tool Group component", () => {
             ],
 
             toolTerms: [
-                {label: 'MOCA', id: 'cogatlas:MOCA', selected: false},
-                {label: 'UPDRSIII', id: 'cogatlas:UPDRSIII', selected: false},
-                {label: 'SomeOtherThing', id: 'cogatlas:SomeOtherThing', selected: false},
-                {label: 'AnotherThing', id: 'cogatlas:AnotherThing', selected: false}
+                {label: 'MOCA', identifier: 'cogatlas:MOCA', selected: false},
+                {label: 'UPDRSIII', identifier: 'cogatlas:UPDRSIII', selected: false},
+                {label: 'SomeOtherThing', identifier: 'cogatlas:SomeOtherThing', selected: false},
+                {label: 'AnotherThing', identifier: 'cogatlas:AnotherThing', selected: false}
             ]
         };
         store = {
@@ -121,7 +121,7 @@ describe("Tool Group component", () => {
         });
 
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        cy.get("@commitSpy").should("have.been.calledWith", "createTool", { identifier: 'cogatlas:MOCA', label: 'MOCA' });
+        cy.get("@commitSpy").should("have.been.calledWith", "createToolGroup", { identifier: 'cogatlas:MOCA', label: 'MOCA' });
 
 
     });
@@ -206,11 +206,11 @@ describe("Tool Group component", () => {
 
         cy.get("[data-cy='assessment-tool-table']").contains('MOCA').click();
         cy.get("[data-cy='assessment-column-table']").contains("column1").click();
-        cy.get("@commitSpy").should("have.been.calledWith", "mapColumnToTool", "column1", "cogatlas:MOCA");
+        cy.get("@commitSpy").should("have.been.calledWith", "alterColumnToToolMapping", {columnName:"column1", toolIdentifier: "cogatlas:MOCA"});
         cy.get("[data-cy='assessment-column-table']").contains("column1").click();
-        cy.get("@commitSpy").should("have.been.calledWith", "mapColumnToTool", "column1", "cogatlas:MOCA");
+        cy.get("@commitSpy").should("have.been.calledWith", "alterColumnToToolMapping", {columnName:"column1", toolIdentifier:  "cogatlas:MOCA"});
         cy.get("[data-cy='assessment-column-table']").contains("column3").click();
-        cy.get("@commitSpy").should("have.been.calledWith", "mapColumnToTool", "column3", "cogatlas:MOCA");
+        cy.get("@commitSpy").should("have.been.calledWith", "alterColumnToToolMapping", {columnName: "column3", toolIdentifier: "cogatlas:MOCA"});
     });
 
     it("when a column is mapped to a tool and the tool gets selected, the column gets highlighted", () => {
diff --git a/store/index.js b/store/index.js
index 1e493ebd..af7f5534 100644
--- a/store/index.js
+++ b/store/index.js
@@ -761,6 +761,7 @@ export const mutations = {
     },
 
     createToolGroup(p_state, newTool) {
+        console.log('state is', p_state.toolTerms, 'newTool is', newTool);
         const toolIndex = p_state.toolTerms.findIndex(tool => tool.identifier === newTool.identifier);
         p_state.toolTerms.splice(toolIndex, 1, Object.assign(p_state.toolTerms[toolIndex], { selected: true }));
     },

From ea0dbc83abc767769bd61020bcd2c66de34f159c Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 14:49:28 -0400
Subject: [PATCH 22/45] Refactor unit tests to follow updated store column
 getter

Looks like we did remove the dupliacted getter after all?
---
 components/annot-columns.vue                              | 4 ++--
 components/annot-continuous-values.vue                    | 4 ++--
 cypress/component/annot-columns.cy.js                     | 2 +-
 cypress/component/annot-continuous-values.cy.js           | 6 +++---
 ...mns.cy.js => store-getter-getColumnsForCategory.cy.js} | 8 ++++----
 cypress/unit/store-mutation-alterColumnToToolMap.cy.js    | 6 +++---
 store/index.js                                            | 4 ++--
 7 files changed, 17 insertions(+), 17 deletions(-)
 rename cypress/unit/{store-getter-getMappedColumns.cy.js => store-getter-getColumnsForCategory.cy.js} (63%)

diff --git a/components/annot-columns.vue b/components/annot-columns.vue
index e69ca35c..3b064673 100644
--- a/components/annot-columns.vue
+++ b/components/annot-columns.vue
@@ -13,7 +13,7 @@
                     data-cy="mappedColumns"
                     class="d-flex justify-content-between align-items-center"
                     :key="columnName"
-                    v-for="columnName of getMappedColumns(activeCategory)">
+                    v-for="columnName of getColumnsForCategory(activeCategory)">
                     {{ columnName }} {{ getColumnDescription(columnName) }}
                     <b-button
                         :data-cy="'remove_' + columnName"
@@ -57,7 +57,7 @@
 
         computed: {
             ...mapGetters([
-                "getMappedColumns",
+                "getColumnsForCategory",
                 "getColumnDescription"
             ])
         },
diff --git a/components/annot-continuous-values.vue b/components/annot-continuous-values.vue
index 61fa5003..c27c1407 100644
--- a/components/annot-continuous-values.vue
+++ b/components/annot-continuous-values.vue
@@ -9,7 +9,7 @@
             <b-tabs content-class="mt-3">
 
                 <b-tab
-                    v-for="(columnName, index) in getMappedColumns(activeCategory)"
+                    v-for="(columnName, index) in getColumnsForCategory(activeCategory)"
                     :key="columnName"
                     :active="0 === index"
                     :title="columnName">
@@ -93,7 +93,7 @@
 
                 "getHarmonizedPreview",
                 "getHeuristic",
-                "getMappedColumns",
+                "getColumnsForCategory",
                 "getTransformOptions",
                 "getUniqueValues"
             ])
diff --git a/cypress/component/annot-columns.cy.js b/cypress/component/annot-columns.cy.js
index db62d369..7df78ab3 100644
--- a/cypress/component/annot-columns.cy.js
+++ b/cypress/component/annot-columns.cy.js
@@ -4,7 +4,7 @@ import annotColumns from "~/components/annot-columns.vue";
 const store = {
     commit: () => {},
     getters: {
-        getMappedColumns: () => (activeCategory) => {
+        getColumnsForCategory: () => (activeCategory) => {
             return [
                     "column1",
                     "column2",
diff --git a/cypress/component/annot-continuous-values.cy.js b/cypress/component/annot-continuous-values.cy.js
index 4e4389f3..16889446 100644
--- a/cypress/component/annot-continuous-values.cy.js
+++ b/cypress/component/annot-continuous-values.cy.js
@@ -36,7 +36,7 @@ describe("Continuous values component", () => {
 
                     return store.state.dataDictionary.annotated[p_column].transformationHeuristic;
                 },
-                getMappedColumns: () => (p_activeCategory) => {
+                getColumnsForCategory: () => (p_activeCategory) => {
 
                     return ["column1"];
                 },
@@ -153,7 +153,7 @@ describe("Continuous values component", () => {
 
         // Setup
         store.state.dataDictionary.annotated["column2"] = { transformationHeuristic: "" };
-        store.getters.getMappedColumns = () => (p_activeCategory) => {
+        store.getters.getColumnsForCategory = () => (p_activeCategory) => {
 
             return ["column1", "column2"];
         };
@@ -196,7 +196,7 @@ describe("Continuous values component", () => {
 
         // Setup
         store.state.dataDictionary.annotated["column2"] = { transformationHeuristic: "" };
-        store.getters.getMappedColumns = () => (p_activeCategory) => {
+        store.getters.getColumnsForCategory = () => (p_activeCategory) => {
 
             return ["column1", "column2"];
         };
diff --git a/cypress/unit/store-getter-getMappedColumns.cy.js b/cypress/unit/store-getter-getColumnsForCategory.cy.js
similarity index 63%
rename from cypress/unit/store-getter-getMappedColumns.cy.js
rename to cypress/unit/store-getter-getColumnsForCategory.cy.js
index bd8ccdf7..7cce2136 100644
--- a/cypress/unit/store-getter-getMappedColumns.cy.js
+++ b/cypress/unit/store-getter-getColumnsForCategory.cy.js
@@ -13,17 +13,17 @@ const store = {
     }
 };
 
-describe("getMappedColumns", () => {
+describe("getColumnsForCategory", () => {
 
     it("Gets list of columns of a given category", () => {
 
         // Assert
-        expect(getters.getMappedColumns(store.state)("category1")).to.deep.equal(["column1", "column3"]);
+        expect(getters.getColumnsForCategory(store.state)("category1")).to.deep.equal(["column1", "column3"]);
     });
 
     it("Gets empty list if a given category is not assigned to any columns", () => {
 
         // Assert
-        expect(getters.getMappedColumns(store.state)("category4")).to.deep.equal([]);
+        expect(getters.getColumnsForCategory(store.state)("category4")).to.deep.equal([]);
     });
-});
\ No newline at end of file
+});
diff --git a/cypress/unit/store-mutation-alterColumnToToolMap.cy.js b/cypress/unit/store-mutation-alterColumnToToolMap.cy.js
index 16bb6c99..2a9f98e4 100644
--- a/cypress/unit/store-mutation-alterColumnToToolMap.cy.js
+++ b/cypress/unit/store-mutation-alterColumnToToolMap.cy.js
@@ -22,19 +22,19 @@ describe("alterColumnToToolMapping", () => {
 
     it("Maps column to tool if it's not already mapped", () => {
 
-        mutations.alterColumnToToolMapping(store.state, "column2", "cogatlas:MOCA");
+        mutations.alterColumnToToolMapping(store.state, {columnName: "column2", toolIdentifier: "cogatlas:MOCA"});
         expect(store.state.columnToToolMap.column2).to.equal("cogatlas:MOCA");
     });
 
     it("Maps column to new tool overwriting previous mapping", () => {
 
-        mutations.alterColumnToToolMapping(store.state, "column3", "cogatlas:MOCA");
+        mutations.alterColumnToToolMapping(store.state, {columnName: "column3", toolIdentifier: "cogatlas:MOCA"});
         expect(store.state.columnToToolMap.column3).to.equal("cogatlas:MOCA");
     });
 
     it("Sets mapping to null if it's already mapped", () => {
 
-        mutations.alterColumnToToolMapping(store.state, "column1", "cogatlas:MOCA");
+        mutations.alterColumnToToolMapping(store.state, {columnName: "column1", toolIdentifier: "cogatlas:MOCA"});
         expect(store.state.columnToToolMap.column1).to.equal(null);
     });
 });
diff --git a/store/index.js b/store/index.js
index af7f5534..042068ad 100644
--- a/store/index.js
+++ b/store/index.js
@@ -752,8 +752,8 @@ export const mutations = {
         }
     },
 
-    alterColumnToToolMapping(p_state, columnName, toolIdentifier) {
-        if ( p_state.columnToToolMap[columnName] == toolIdentifier ) {
+    alterColumnToToolMapping(p_state, {columnName, toolIdentifier}) {
+        if ( p_state.columnToToolMap[columnName] === toolIdentifier ) {
             p_state.columnToToolMap[columnName] = null;
         } else {
             p_state.columnToToolMap[columnName] = toolIdentifier;

From d3ebcf89311d329c5dde98cebd1136e9cfcb8718 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 16:56:59 -0400
Subject: [PATCH 23/45] [FIX] column no longer styled if selectedTool is null

---
 components/category-toolgroup.vue          |  7 +++++--
 cypress/component/category-toolgroup.cy.js | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 84e45af9..6d9fb1d3 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -104,7 +104,10 @@
                 this.alterColumnToToolMapping({columnName: row.column, toolIdentifier: this.selectedTool.identifier});
             },
             styleRow(p_row) {
-                if (this.columnToToolMap[p_row.column] === this.selectedTool.identifier) {
+                if (
+                    (this.columnToToolMap[p_row.column] !== null) &&
+                    (this.columnToToolMap[p_row.column] === this.selectedTool.identifier)
+                ) {
                     return "selected-tool";
                 } else {
                     return "";
@@ -119,4 +122,4 @@
     background-color: red !important;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index a2eccf29..a07a9ba0 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -99,6 +99,25 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='assessment-column-table']").contains("column3");
     });
 
+    it("before a tool is selected, all columns are unstyled", () => {
+        store.state.columnToToolMap = {
+                column1: null,
+                column2: null,
+                column3: null
+        };
+
+        cy.mount(categoryToolGroup, {
+            mocks: {
+
+                $store: store
+            }
+        });
+
+        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');
+
+    });
+
     it("gets assessment tool names from the store and shows them in a dropdown", () => {
         cy.mount(categoryToolGroup, {
             mocks: {

From 715f0dc809812f4e3dd8e90d04f5511fe6e4669b Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 17:05:42 -0400
Subject: [PATCH 24/45] [FIX] deselecting dropdown no longer crashes app

Clicking the little 'x' icon in vue-select also
fires the @input hook but has a payload of null,
which breaks the processing method
---
 components/category-toolgroup.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 6d9fb1d3..57b9badd 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -81,12 +81,12 @@
                 "alterColumnToToolMapping"
             ]),
             selectTool(selectedTool) {
-
-                this.createToolGroup({
-                    identifier: selectedTool.identifier,
-                    label: selectedTool.label
-                });
-
+                if ( selectedTool !== null ) {
+                    this.createToolGroup({
+                        identifier: selectedTool.identifier,
+                        label: selectedTool.label
+                    });
+                }
             },
             highlightRow(rows) {
                 if ( 0 !== rows.length ) {

From aeef78fb5cbdcdbe073acffe0fac9461ee8b147c Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 17:07:16 -0400
Subject: [PATCH 25/45] Add the toolgroup workflow to the categorization page

---
 pages/categorization.vue | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/pages/categorization.vue b/pages/categorization.vue
index fd5930e2..9f41ca6d 100644
--- a/pages/categorization.vue
+++ b/pages/categorization.vue
@@ -34,6 +34,11 @@
             </b-col>
 
         </b-row>
+        <b-row>
+            <b-col cols="12">
+                <categoryToolgroup />
+            </b-col>
+        </b-row>
 
     </b-container>
 
@@ -45,43 +50,29 @@
     import { mapGetters } from "vuex";
 
     export default {
-
         name: "CategorizationPage",
-
         data() {
-
             return {
-
                 // Category selection (default is index 0, no selection is -1)
                 selectedCategory: "",
-
                 // Text for UI elements
                 uiText: {
-
                     categorySelectInstructions: "Click category and then corresponding column from tsv file",
                     categorySelectTitle: "Recommended Categories"
                 }
             };
         },
-
         computed: {
-
             ...mapGetters([
-
                 "getCategoryNames"
             ])
         },
-
         mounted() {
-
             // Set selected category to the first category by default
             this.setSelectedCategory(this.getCategoryNames[0]);
         },
-
         methods: {
-
             setSelectedCategory(p_category) {
-
                 // Save the name of the selected category
                 this.selectedCategory = p_category;
             }

From d87e193cbddc52085d29dfb67ba1fae151441a5e Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 17:14:54 -0400
Subject: [PATCH 26/45] Add test to protect against null-crash

---
 cypress/component/category-toolgroup.cy.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index a07a9ba0..4c78cf7e 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -142,6 +142,17 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
         cy.get("@commitSpy").should("have.been.calledWith", "createToolGroup", { identifier: 'cogatlas:MOCA', label: 'MOCA' });
 
+    });
+
+    it("clearing the dropdown selection does not crash the app", () => {
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='toolgroup-select']").get('button').click();
 
     });
 

From dcf8cab203f0f48273f8d1e17b4ccdf2f390e08a Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 19:56:24 -0400
Subject: [PATCH 27/45] [ENH] Prevent page from advancing if not all columns
 mapped

No tests yet
---
 store/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/store/index.js b/store/index.js
index 042068ad..ff0ae457 100644
--- a/store/index.js
+++ b/store/index.js
@@ -611,7 +611,7 @@ export const getters = {
         return description;
     },
 
-    isPageAccessible: (p_state) => (p_pageName) => {
+    isPageAccessible: (p_state, p_getters) => (p_pageName) => {
 
         let pageAccessible = false;
 
@@ -643,10 +643,13 @@ export const getters = {
                                                                     null !== category)
                                                             .length >= 1 );
 
+                // 3. Make sure all columns about assessment tools are mapped to something
+                const allAssessmentColumnsAreMapped = p_getters.getColumnsForCategory("Assessment Tool")
+                    .every(column => p_state.columnToToolMap[column] !== null);
                 // Annotation page is only accessible if one (and only one)
                 // column has been categorized as 'Subject ID' and if at least
                 // one category other than Subject ID has been categorized
-                pageAccessible = singleSubjectIDColumn && notOnlySubjectIDCategorized;
+                pageAccessible = singleSubjectIDColumn && notOnlySubjectIDCategorized && allAssessmentColumnsAreMapped;
 
                 break;
             }

From 5e245d2b391a3de68dbfb626cdd1e6b243bd3d07 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 20:10:40 -0400
Subject: [PATCH 28/45] [ENH] no elements render unless one column selected

---
 components/category-toolgroup.vue          |  2 ++
 cypress/component/category-toolgroup.cy.js | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 57b9badd..78364990 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -3,6 +3,7 @@
         <b-row>
             <b-col cols="6">
                 <v-select
+                    v-if="tableRows.length > 0"
                     data-cy="toolgroup-select"
                     :options="toolTerms"
                     outlined
@@ -29,6 +30,7 @@
             </b-col>
             <b-col>
                 <b-table
+                    v-if="tableRows.length > 0"
                     data-cy="assessment-column-table"
                     outlined
                     head-variant="dark"
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 4c78cf7e..8d290689 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -72,6 +72,28 @@ describe("Tool Group component", () => {
 
     });
 
+    it("if nothing is selected or mapped, component is empty", () => {
+        store.state.columnToCategoryMap = {
+            column1: null,
+            column2: null,
+            column3: null
+        };
+        store.state.columnToToolMap = {
+            column1: null,
+            column2: null,
+            column3: null
+        };
+        cy.mount(categoryToolGroup, {
+            mocks: {
+                $store: store
+            }
+        });
+        cy.get("[data-cy='toolgroup-select']").should('not.exist');
+        cy.get("[data-cy='assessment-tool-table']").should('not.exist');
+        cy.get("[data-cy='assessment-column-table']").should('not.exist');
+
+    });
+
     it("has a table of columns about assessment tools on the right", () => {
 
         cy.mount(categoryToolGroup, {

From 610e89968d2852ddc4ca69d9b32f35ccff69a315 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 17 Oct 2023 20:32:52 -0400
Subject: [PATCH 29/45] [FIX] adjust nextPage unit test to new logic

---
 .../unit/store-getter-isPageAccessible.cy.js  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/cypress/unit/store-getter-isPageAccessible.cy.js b/cypress/unit/store-getter-isPageAccessible.cy.js
index 6c9519d4..f207710b 100644
--- a/cypress/unit/store-getter-isPageAccessible.cy.js
+++ b/cypress/unit/store-getter-isPageAccessible.cy.js
@@ -1,6 +1,7 @@
 import { getters } from "~/store";
 
 let state = {};
+getters.getColumnsForCategory = getters.getColumnsForCategory(state);
 
 describe("isPageAccessible", () => {
 
@@ -15,6 +16,10 @@ describe("isPageAccessible", () => {
 
                 "column1Name": "Subject ID"
             },
+            columnToToolMap: {
+
+                "column1Name": null
+            },
 
             dataTable: [
 
@@ -34,13 +39,13 @@ describe("isPageAccessible", () => {
         let nextPage = "categorization";
 
         // Assert
-        expect(getters.isPageAccessible(state)(nextPage)).to.be.true;
+        expect(getters.isPageAccessible(state, getters)(nextPage)).to.be.true;
 
         // Setup
         state.dataTable = [];
 
         // Assert
-        expect(getters.isPageAccessible(state)(nextPage)).to.be.false;
+        expect(getters.isPageAccessible(state, getters)(nextPage)).to.be.false;
     });
 
     it("Test page accessibility via the categorization page", () => {
@@ -50,13 +55,13 @@ describe("isPageAccessible", () => {
         state.columnToCategoryMap["column2Name"] = "Sex";
 
         // Assert
-        expect(getters.isPageAccessible(state)(nextPage)).to.be.true;
+        expect(getters.isPageAccessible(state, getters)(nextPage)).to.be.true;
 
         // Setup
         state.columnToCategoryMap = {};
 
         // Assert
-        expect(getters.isPageAccessible(state)(nextPage)).to.be.false;
+        expect(getters.isPageAccessible(state, getters)(nextPage)).to.be.false;
     });
 
     it("Test page accessibility via the annotation page", () => {
@@ -65,12 +70,12 @@ describe("isPageAccessible", () => {
         let nextPage = "download";
 
         // Assert
-        expect(getters.isPageAccessible(state)(nextPage)).to.be.true;
+        expect(getters.isPageAccessible(state, getters)(nextPage)).to.be.true;
 
         // Setup
         state.annotationCount = 0;
 
         // Assert
-        expect(getters.isPageAccessible(state)(nextPage)).to.be.false;
+        expect(getters.isPageAccessible(state, getters)(nextPage)).to.be.false;
     });
-});
\ No newline at end of file
+});

From 61abe3ab3aa4058e22864a418fd68f35a4c84ee2 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 14:27:35 -0400
Subject: [PATCH 30/45] Adding a simple page test I can understand

So I can debug my component better
---
 .../page/my_happy_annotation-page_tests.cy.js | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 cypress/e2e/page/my_happy_annotation-page_tests.cy.js

diff --git a/cypress/e2e/page/my_happy_annotation-page_tests.cy.js b/cypress/e2e/page/my_happy_annotation-page_tests.cy.js
new file mode 100644
index 00000000..60f621c6
--- /dev/null
+++ b/cypress/e2e/page/my_happy_annotation-page_tests.cy.js
@@ -0,0 +1,63 @@
+describe("to annotate an assessment ", () => {
+
+    it("sets up some stuff", () => {
+        // Load some data
+        cy.visit('/');
+        cy.get('[data-cy="data-table-selector"]').get('input').selectFile('cypress/fixtures/examples/good/example.tsv', { force: true });
+        cy.get("[data-cy='button-nextpage']").click();
+
+        // Categorize some columns
+        const desiredColumnMappings = [
+            {
+                "column": "participant_id",
+                "category": "Subject ID"
+            },
+            {
+                "column": "sex",
+                "category": "Sex"
+            },
+            {
+                "column": "group",
+                "category": "Diagnosis"
+            },
+            {
+                "column": "stroop",
+                "category": "Assessment Tool"
+            },
+            {
+                "column": "iq",
+                "category": "Assessment Tool"
+            }
+        ];
+        desiredColumnMappings.forEach(desiredColumnMapping => {
+            cy.get("[data-cy='categorization-table']").contains(desiredColumnMapping.category).click();
+            cy.get("[data-cy='column-linking-table']").contains(desiredColumnMapping.column).click();
+        });
+        // Create two tools
+        cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
+        cy.get("[data-cy='toolgroup-select']").type("UPDRS{enter}");
+        // Map columns to tools
+        const desiredColumnToolMappings = [
+            {
+                "column": "iq",
+                "tool": "MOCA"
+            },
+            {
+                "column": "stroop",
+                "tool": "UPDRS"
+            }
+        ];
+        desiredColumnToolMappings.forEach(desiredColumnToolMapping => {
+            cy.get("[data-cy='assessment-tool-table']").contains(desiredColumnToolMapping.tool).click();
+            cy.get("[data-cy='assessment-column-table']").contains(desiredColumnToolMapping.column).click();
+        });
+
+        // We apparently are unable to use the normal "next page" button here
+        // for some reason I don't yet understand. So we can force-route ourselves
+        // to the next page here despite the button erroneously not being enabled.
+        cy.window().its("$nuxt.$router").then(router => {
+            router.push({ path: "/annotation" });
+        });
+
+    });
+});
\ No newline at end of file

From 4bf950ecac270db02067884c45134bf1f10fb1d1 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 14:42:16 -0400
Subject: [PATCH 31/45] Provide a super silly tool component

---
 components/annot-tool.vue                     | 22 +++++++++++++++++++
 .../page/my_happy_annotation-page_tests.cy.js |  2 +-
 store/index.js                                | 10 ++++-----
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 components/annot-tool.vue

diff --git a/components/annot-tool.vue b/components/annot-tool.vue
new file mode 100644
index 00000000..5562b9b1
--- /dev/null
+++ b/components/annot-tool.vue
@@ -0,0 +1,22 @@
+<template>
+
+    <div>
+
+        <b-card
+            no-body
+            class="annotation-card">
+
+            <b-card-header>Hello categorical</b-card-header>
+
+            <b-card-body>
+
+                Hello categorical again
+
+
+            </b-card-body>
+
+        </b-card>
+
+    </div>
+
+</template>
\ No newline at end of file
diff --git a/cypress/e2e/page/my_happy_annotation-page_tests.cy.js b/cypress/e2e/page/my_happy_annotation-page_tests.cy.js
index 60f621c6..6eed8fe4 100644
--- a/cypress/e2e/page/my_happy_annotation-page_tests.cy.js
+++ b/cypress/e2e/page/my_happy_annotation-page_tests.cy.js
@@ -1,5 +1,6 @@
 describe("to annotate an assessment ", () => {
 
+
     it("sets up some stuff", () => {
         // Load some data
         cy.visit('/');
@@ -58,6 +59,5 @@ describe("to annotate an assessment ", () => {
         cy.window().its("$nuxt.$router").then(router => {
             router.push({ path: "/annotation" });
         });
-
     });
 });
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index ff0ae457..7cb731e8 100644
--- a/store/index.js
+++ b/store/index.js
@@ -69,9 +69,9 @@ export const state = () => ({
         },
         "Assessment Tool": {
 
-            componentName: "annot-categorical",
-            explanation: "This is an explanation for how to annotate diagnosis.",
-            identifier: "nb:Diagnosis"
+            componentName: "annot-tool",
+            explanation: "This is an explanation for how to annotate a tool.",
+            identifier: "nb:AssessmentTool"
         }
     },
 
@@ -643,7 +643,7 @@ export const getters = {
                                                                     null !== category)
                                                             .length >= 1 );
 
-                // 3. Make sure all columns about assessment tools are mapped to something
+// 3. Make sure all columns about assessment tools are mapped to something
                 const allAssessmentColumnsAreMapped = p_getters.getColumnsForCategory("Assessment Tool")
                     .every(column => p_state.columnToToolMap[column] !== null);
                 // Annotation page is only accessible if one (and only one)
@@ -756,7 +756,7 @@ export const mutations = {
     },
 
     alterColumnToToolMapping(p_state, {columnName, toolIdentifier}) {
-        if ( p_state.columnToToolMap[columnName] === toolIdentifier ) {
+        if ( p_state.columnToToolMap[columnName] == toolIdentifier ) {
             p_state.columnToToolMap[columnName] = null;
         } else {
             p_state.columnToToolMap[columnName] = toolIdentifier;

From 7650527582fda6ee6785cc248f39d7463fca61d7 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 15:48:47 -0400
Subject: [PATCH 32/45] First basic store integration

---
 components/annot-tool.vue          | 29 +++++++++++++++------
 cypress/component/annot-tool.cy.js | 41 ++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 cypress/component/annot-tool.cy.js

diff --git a/components/annot-tool.vue b/components/annot-tool.vue
index 5562b9b1..fc941e18 100644
--- a/components/annot-tool.vue
+++ b/components/annot-tool.vue
@@ -5,18 +5,31 @@
         <b-card
             no-body
             class="annotation-card">
+            <b-tabs content-class="mt-3" fill>
+                <b-tab
+                    v-for="({label, identifier}, index) in getSelectedTools"
+                    :key="index"
+                    :title="label">
+                    {{ identifier }}
+                </b-tab>
 
-            <b-card-header>Hello categorical</b-card-header>
+            </b-tabs>
 
-            <b-card-body>
+        </b-card>
 
-                Hello categorical again
+    </div>
 
+</template>
 
-            </b-card-body>
+<script>
+    import { mapGetters } from "vuex";
 
-        </b-card>
-
-    </div>
+    export default {
+        computed: {
+            ...mapGetters([
+                "getSelectedTools"
+            ])
+        }
+    };
 
-</template>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/cypress/component/annot-tool.cy.js b/cypress/component/annot-tool.cy.js
new file mode 100644
index 00000000..ad1cfda8
--- /dev/null
+++ b/cypress/component/annot-tool.cy.js
@@ -0,0 +1,41 @@
+import annotTool from "~/components/annot-tool.vue";
+
+
+
+
+describe("Annotation tool component", () => {
+
+    it("mounts", () => {
+        cy.mount(annotTool, {
+            computed: {
+                getSelectedTools: () => {
+                    return [
+                        {
+                            label: "MOCA",
+                            identifier: "cogAtlas:MOCA",
+                            selected: false
+                        }
+                    ];
+                }
+            }
+        });
+
+    });
+
+    it("Takes a list of tools and makes a tab for each tool", () => {
+        cy.mount(annotTool, {
+            computed: {
+                getSelectedTools: () => {
+                    return [
+                        {
+                            label: "MOCA",
+                            identifier: "cogAtlas:MOCA",
+                            selected: false
+                        }
+                    ];
+                }
+            }
+        });
+        cy.contains('MOCA');
+    });
+});

From 81f3bdf8efb31e51d4b289041cb8c43198b30915 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 16:20:20 -0400
Subject: [PATCH 33/45] [WIP] we're not yet passing props correctly

---
 components/annot-single-tool.vue              | 54 ++++++++++++
 .../{annot-tool.vue => annot-tool-groups.vue} |  3 +-
 cypress/component/annot-tool.cy.js            | 82 +++++++++++++------
 3 files changed, 113 insertions(+), 26 deletions(-)
 create mode 100644 components/annot-single-tool.vue
 rename components/{annot-tool.vue => annot-tool-groups.vue} (87%)

diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
new file mode 100644
index 00000000..78641245
--- /dev/null
+++ b/components/annot-single-tool.vue
@@ -0,0 +1,54 @@
+<template>
+
+    <div >
+        <b-table
+            striped
+            :data-cy="('tool-annotation-for-' + name)"
+            :fields="toolFields"
+            :items="uniqueColumnValues">
+            <template #cell(missingValue)="row">
+                <b-button
+                    :data-cy="'missingValueButton_' + row.index"
+                    variant="danger"
+                    @click="changeMissingStatus({column: row.item['columnName'], value: row.item['rawValue'], markAsMissing: true})">
+                    {{ uiText.missingValueButton }}
+                </b-button>
+            </template>
+        </b-table>
+
+    </div>
+
+</template>
+
+<script>
+    import { mapGetters } from "vuex";
+
+    export default {
+        data() {
+            return {
+                uiText: {
+
+                    instructions: "Annotate each unique value",
+                    missingValueButton: "Mark as missing",
+                    saveButton: "Save Annotation"
+                },
+                toolFields: [
+                    "column",
+                    "value",
+                    "Missing Value"
+                ]
+            };
+        },
+        props: {
+
+            name: { type: String, required: true },
+            uniqueColumnValues: { type: Array, required: true }
+        },
+        computed: {
+            ...mapGetters([
+                "getSelectedTools"
+            ])
+        }
+    };
+
+</script>
\ No newline at end of file
diff --git a/components/annot-tool.vue b/components/annot-tool-groups.vue
similarity index 87%
rename from components/annot-tool.vue
rename to components/annot-tool-groups.vue
index fc941e18..356a0f6e 100644
--- a/components/annot-tool.vue
+++ b/components/annot-tool-groups.vue
@@ -10,7 +10,8 @@
                     v-for="({label, identifier}, index) in getSelectedTools"
                     :key="index"
                     :title="label">
-                    {{ identifier }}
+                    <annot-single-tool
+                        :name="identifier" />
                 </b-tab>
 
             </b-tabs>
diff --git a/cypress/component/annot-tool.cy.js b/cypress/component/annot-tool.cy.js
index ad1cfda8..8fd64386 100644
--- a/cypress/component/annot-tool.cy.js
+++ b/cypress/component/annot-tool.cy.js
@@ -1,41 +1,73 @@
-import annotTool from "~/components/annot-tool.vue";
+import annotToolGroups from "~/components/annot-tool-groups.vue";
+import annotSingleTool from "~/components/annot-single-tool.vue";
 
+const getters = {
+    getSelectedTools: () => {
+        return [
+            {
+                label: "MOCA",
+                identifier: "cogAtlas:MOCA",
+                selected: true
+            },
+            {
+                label: "my best tool",
+                identifier: "cogAtlas:SuperTool",
+                selected: true
+            }
+        ];
+    }
+};
+
+const stubs = {
+
+    "annot-single-tool": annotSingleTool
+};
 
 
+const props = [
+    {
+        column: "column1",
+        value: "val1"
+    },
+    {
+        column: "column2",
+        value: "val1"
+    },
+    {
+        column: "column2",
+        value: "val2"
+    }
+];
+
 
 describe("Annotation tool component", () => {
 
     it("mounts", () => {
-        cy.mount(annotTool, {
-            computed: {
-                getSelectedTools: () => {
-                    return [
-                        {
-                            label: "MOCA",
-                            identifier: "cogAtlas:MOCA",
-                            selected: false
-                        }
-                    ];
-                }
-            }
+        cy.mount(annotToolGroups, {
+            computed: getters,
+            stubs: stubs,
+            props: props
         });
 
     });
 
     it("Takes a list of tools and makes a tab for each tool", () => {
-        cy.mount(annotTool, {
-            computed: {
-                getSelectedTools: () => {
-                    return [
-                        {
-                            label: "MOCA",
-                            identifier: "cogAtlas:MOCA",
-                            selected: false
-                        }
-                    ];
-                }
-            }
+        cy.mount(annotToolGroups, {
+            computed: getters,
+            stubs: stubs,
+            props: props
+        });
+        cy.contains('MOCA');
+        cy.contains('my best tool');
+    });
+
+    it("mounts a subcomponent for each tool and provides the correct props to it", () => {
+        cy.mount(annotToolGroups, {
+            computed: getters,
+            stubs: stubs,
+            props: props
         });
         cy.contains('MOCA');
+        cy.contains('my best tool');
     });
 });

From 42fc3ba5180867577b83fbe9a5601afb06f3d86d Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 20:13:54 -0400
Subject: [PATCH 34/45] Add getter for columns mapped to tools

---
 .../unit/store-getter-getColumnsForTool.cy.js | 29 +++++++++++++++++++
 store/index.js                                |  6 ++++
 2 files changed, 35 insertions(+)
 create mode 100644 cypress/unit/store-getter-getColumnsForTool.cy.js

diff --git a/cypress/unit/store-getter-getColumnsForTool.cy.js b/cypress/unit/store-getter-getColumnsForTool.cy.js
new file mode 100644
index 00000000..6a88c50d
--- /dev/null
+++ b/cypress/unit/store-getter-getColumnsForTool.cy.js
@@ -0,0 +1,29 @@
+import { getters } from "~/store";
+
+const store = {
+
+    state: {
+
+        columnToToolMap: {
+            "column1": "cogatlas:MOCA",
+            "column2": null,
+            "column3": "cogatlas:MOCA",
+            "column4": "cogatlas:UPDRS"
+        }
+    }
+};
+
+describe("getColumnsForTool", () => {
+
+    it("Gets list of columns mapped to a given tool", () => {
+
+        // Assert
+        expect(getters.getColumnsForTool(store.state)("cogatlas:MOCA")).to.deep.equal(["column1", "column3"]);
+    });
+
+    it("Gets empty list if no column was assigned to this tool", () => {
+
+        // Assert
+        expect(getters.getColumnsForTool(store.state)("cogatlas:SomethingElse")).to.deep.equal([]);
+    });
+});
diff --git a/store/index.js b/store/index.js
index 7cb731e8..e88610f0 100644
--- a/store/index.js
+++ b/store/index.js
@@ -565,6 +565,12 @@ export const getters = {
         return columns;
     },
 
+    getColumnsForTool: (p_state) => (p_tool) => {
+
+        return Object.keys(p_state.columnToToolMap)
+        .filter(key => p_state.columnToToolMap[key] === p_tool);
+    },
+
     getUniqueColumnValues: (p_state) => (columnName, p_maxValues="None") => {
             let uniqueColumnValues = new Set();
             for ( let index = 0; index < p_state.dataTable.length; index++ ) {

From 457a87c3c58c0bef783d247da7578924845df329 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 20:33:15 -0400
Subject: [PATCH 35/45] Parseing unique values for tool columns

---
 components/annot-tool-groups.vue   | 16 ++++++++++++++--
 cypress/component/annot-tool.cy.js | 14 ++++++++++----
 store/index.js                     |  2 +-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/components/annot-tool-groups.vue b/components/annot-tool-groups.vue
index 356a0f6e..a796ae52 100644
--- a/components/annot-tool-groups.vue
+++ b/components/annot-tool-groups.vue
@@ -11,7 +11,8 @@
                     :key="index"
                     :title="label">
                     <annot-single-tool
-                        :name="identifier" />
+                        :name="identifier"
+                        :uniqueColumnValues="provideUniqueValues(identifier)" />
                 </b-tab>
 
             </b-tabs>
@@ -28,8 +29,19 @@
     export default {
         computed: {
             ...mapGetters([
-                "getSelectedTools"
+                "getSelectedTools",
+                "getColumnsForTool",
+                "getUniqueColumnValues"
             ])
+        },
+        methods: {
+            provideUniqueValues(identifier) {
+                const toolColumns = this.getColumnsForTool(identifier);
+                return toolColumns
+                    .map(column => this.getUniqueColumnValues(column)
+                        .map(value => ({"column": column, "value": value})))
+                    .flat();
+            }
         }
     };
 
diff --git a/cypress/component/annot-tool.cy.js b/cypress/component/annot-tool.cy.js
index 8fd64386..fac726d2 100644
--- a/cypress/component/annot-tool.cy.js
+++ b/cypress/component/annot-tool.cy.js
@@ -10,11 +10,17 @@ const getters = {
                 selected: true
             },
             {
-                label: "my best tool",
-                identifier: "cogAtlas:SuperTool",
+                label: "UPDRS",
+                identifier: "cogAtlas:UPDRS",
                 selected: true
             }
         ];
+    },
+    getColumnsForTool: () => (p_tool) => {
+        return ["column1", "column2"];
+    },
+    getUniqueColumnValues: () => (column) => {
+        return [1, 2, 3];
     }
 };
 
@@ -58,7 +64,7 @@ describe("Annotation tool component", () => {
             props: props
         });
         cy.contains('MOCA');
-        cy.contains('my best tool');
+        cy.contains('UPDRS');
     });
 
     it("mounts a subcomponent for each tool and provides the correct props to it", () => {
@@ -68,6 +74,6 @@ describe("Annotation tool component", () => {
             props: props
         });
         cy.contains('MOCA');
-        cy.contains('my best tool');
+        cy.contains('UPDRS');
     });
 });
diff --git a/store/index.js b/store/index.js
index e88610f0..6165ea0c 100644
--- a/store/index.js
+++ b/store/index.js
@@ -69,7 +69,7 @@ export const state = () => ({
         },
         "Assessment Tool": {
 
-            componentName: "annot-tool",
+            componentName: "annot-tool-groups",
             explanation: "This is an explanation for how to annotate a tool.",
             identifier: "nb:AssessmentTool"
         }

From e1616152447ed5e5f50b043b3e9e8b75f5657e03 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 21:04:55 -0400
Subject: [PATCH 36/45] Single annot component + test

also: props work now
---
 components/annot-single-tool.vue              |  2 +-
 ...not-tool.cy.js => annot-tool-groups.cy.js} |  0
 cypress/component/annot-tool-single.cy.js     | 47 +++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 rename cypress/component/{annot-tool.cy.js => annot-tool-groups.cy.js} (100%)
 create mode 100644 cypress/component/annot-tool-single.cy.js

diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
index 78641245..721aaee2 100644
--- a/components/annot-single-tool.vue
+++ b/components/annot-single-tool.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div >
+    <div>
         <b-table
             striped
             :data-cy="('tool-annotation-for-' + name)"
diff --git a/cypress/component/annot-tool.cy.js b/cypress/component/annot-tool-groups.cy.js
similarity index 100%
rename from cypress/component/annot-tool.cy.js
rename to cypress/component/annot-tool-groups.cy.js
diff --git a/cypress/component/annot-tool-single.cy.js b/cypress/component/annot-tool-single.cy.js
new file mode 100644
index 00000000..1ae6d308
--- /dev/null
+++ b/cypress/component/annot-tool-single.cy.js
@@ -0,0 +1,47 @@
+import annotSingleTool from "~/components/annot-single-tool.vue";
+
+const props = {
+    name: "Hello",
+    uniqueColumnValues: [
+        {
+            column: "column1",
+            value: "val1"
+        },
+        {
+            column: "column2",
+            value: "val1"
+        },
+        {
+            column: "column2",
+            value: "val2"
+        }
+    ]
+};
+
+
+describe("Annotation tool component", () => {
+
+    it("shows me a table of unique values when I provide the props", () => {
+        cy.mount(annotSingleTool, {
+            propsData: props
+        });
+        cy.get("table").should("exist");
+        cy.get("table").contains("column1");
+
+    });
+
+    it("each row has a button called Missing Value", () => {
+        cy.mount(annotSingleTool, {
+            propsData: props
+        });
+        cy.get('table')
+            .find('tr')
+            .each(row => {
+                cy.wrap(row)
+                .find('button')
+                .should('exist');
+            });
+
+    });
+
+});

From 2717700484a98dc0b2f0ed9508eb4865b1bdf29d Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 21:18:18 -0400
Subject: [PATCH 37/45] Tool missing value button exists

---
 components/annot-single-tool.vue          |  4 ++--
 cypress/component/annot-tool-single.cy.js | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
index 721aaee2..165a91b5 100644
--- a/components/annot-single-tool.vue
+++ b/components/annot-single-tool.vue
@@ -6,7 +6,7 @@
             :data-cy="('tool-annotation-for-' + name)"
             :fields="toolFields"
             :items="uniqueColumnValues">
-            <template #cell(missingValue)="row">
+            <template #cell(missing_value)="row">
                 <b-button
                     :data-cy="'missingValueButton_' + row.index"
                     variant="danger"
@@ -35,7 +35,7 @@
                 toolFields: [
                     "column",
                     "value",
-                    "Missing Value"
+                    "missing_value"
                 ]
             };
         },
diff --git a/cypress/component/annot-tool-single.cy.js b/cypress/component/annot-tool-single.cy.js
index 1ae6d308..c0decafd 100644
--- a/cypress/component/annot-tool-single.cy.js
+++ b/cypress/component/annot-tool-single.cy.js
@@ -34,12 +34,15 @@ describe("Annotation tool component", () => {
         cy.mount(annotSingleTool, {
             propsData: props
         });
+
         cy.get('table')
             .find('tr')
-            .each(row => {
-                cy.wrap(row)
-                .find('button')
-                .should('exist');
+            .each((row, index) => {
+                // skip the first (header) row
+                if (index !== 0) {
+                    cy.wrap(row)
+                    .contains("Mark as missing");
+                }
             });
 
     });

From f4a811636ef0280d72c6be7810c06d1831cf7f76 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 21:46:19 -0400
Subject: [PATCH 38/45] single tool component emits missing value event

---
 components/annot-single-tool.vue          |  7 ++++++-
 cypress/component/annot-tool-single.cy.js | 25 ++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/components/annot-single-tool.vue b/components/annot-single-tool.vue
index 165a91b5..ae4d3b23 100644
--- a/components/annot-single-tool.vue
+++ b/components/annot-single-tool.vue
@@ -10,7 +10,7 @@
                 <b-button
                     :data-cy="'missingValueButton_' + row.index"
                     variant="danger"
-                    @click="changeMissingStatus({column: row.item['columnName'], value: row.item['rawValue'], markAsMissing: true})">
+                    @click="emitMissingValue(row.item['column'], row.item['value']) ">
                     {{ uiText.missingValueButton }}
                 </b-button>
             </template>
@@ -48,6 +48,11 @@
             ...mapGetters([
                 "getSelectedTools"
             ])
+        },
+        methods: {
+            emitMissingValue(column, value) {
+                this.$emit("declareMissing", {column, value});
+            }
         }
     };
 
diff --git a/cypress/component/annot-tool-single.cy.js b/cypress/component/annot-tool-single.cy.js
index c0decafd..ad4c5082 100644
--- a/cypress/component/annot-tool-single.cy.js
+++ b/cypress/component/annot-tool-single.cy.js
@@ -30,7 +30,7 @@ describe("Annotation tool component", () => {
 
     });
 
-    it("each row has a button called Missing Value", () => {
+    it("each row has a button called 'Mark as missing'", () => {
         cy.mount(annotSingleTool, {
             propsData: props
         });
@@ -47,4 +47,27 @@ describe("Annotation tool component", () => {
 
     });
 
+    it("clicking the missing value button emits a 'declareMissing' event", () => {
+        const spy = cy.spy().as("emitSpy");
+        cy.mount(annotSingleTool, {
+            propsData: props,
+            listeners: {
+                declareMissing: spy
+            }
+        });
+
+        cy.get('table')
+            .find('tr')
+            .eq(1) // Select the second row (0 index), see https://docs.cypress.io/api/commands/eq
+            .then(row => {
+                cy.wrap(row).contains("Mark as missing").click();
+            });
+        cy.get("@emitSpy")
+            .should("have.been.calledWith", {
+                column: "column1",
+                value: "val1"
+            });
+
+    });
+
 });

From 502ed0d36ad9bb7f500c783b669b29a843599653 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Thu, 19 Oct 2023 22:07:32 -0400
Subject: [PATCH 39/45] Parent tool component fires mutation when child emits

---
 components/annot-tool-groups.vue          | 11 ++++++--
 cypress/component/annot-tool-groups.cy.js | 34 +++++++++++++++++------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/components/annot-tool-groups.vue b/components/annot-tool-groups.vue
index a796ae52..ba546f49 100644
--- a/components/annot-tool-groups.vue
+++ b/components/annot-tool-groups.vue
@@ -12,7 +12,8 @@
                     :title="label">
                     <annot-single-tool
                         :name="identifier"
-                        :uniqueColumnValues="provideUniqueValues(identifier)" />
+                        :uniqueColumnValues="provideUniqueValues(identifier)"
+                        @declareMissing="changeMissingStatus(Object.assign($event, {markAsMissing: true}))" />
                 </b-tab>
 
             </b-tabs>
@@ -24,8 +25,8 @@
 </template>
 
 <script>
-    import { mapGetters } from "vuex";
-
+    import { mapGetters, mapMutations } from "vuex";
+    // @declareMissing="changeMissingStatus(Object.assign($event, {markAsMissing: true}))" />
     export default {
         computed: {
             ...mapGetters([
@@ -35,6 +36,10 @@
             ])
         },
         methods: {
+            ...mapMutations([
+
+                "changeMissingStatus"
+            ]),
             provideUniqueValues(identifier) {
                 const toolColumns = this.getColumnsForTool(identifier);
                 return toolColumns
diff --git a/cypress/component/annot-tool-groups.cy.js b/cypress/component/annot-tool-groups.cy.js
index fac726d2..7e2dcf70 100644
--- a/cypress/component/annot-tool-groups.cy.js
+++ b/cypress/component/annot-tool-groups.cy.js
@@ -48,32 +48,48 @@ const props = [
 
 describe("Annotation tool component", () => {
 
-    it("mounts", () => {
+    it("Takes a list of tools and makes a tab for each tool", () => {
         cy.mount(annotToolGroups, {
             computed: getters,
             stubs: stubs,
             props: props
         });
-
+        cy.contains('MOCA');
+        cy.contains('UPDRS');
     });
 
-    it("Takes a list of tools and makes a tab for each tool", () => {
+    it("mounts a subcomponent for each tool and provides the correct props to it", () => {
         cy.mount(annotToolGroups, {
             computed: getters,
             stubs: stubs,
             props: props
         });
-        cy.contains('MOCA');
-        cy.contains('UPDRS');
+        cy.get('[data-cy="tool-annotation-for-cogAtlas:MOCA"]').contains('column1');
     });
 
-    it("mounts a subcomponent for each tool and provides the correct props to it", () => {
+    it("clicking the missing value button fires correct mutation", () => {
+        const mockStore = { commit: () => {} };
+        cy.spy(mockStore, "commit").as("commitSpy");
+
         cy.mount(annotToolGroups, {
             computed: getters,
             stubs: stubs,
-            props: props
+            props: props,
+            mocks: { $store: mockStore }
         });
-        cy.contains('MOCA');
-        cy.contains('UPDRS');
+
+        cy.get('[data-cy="tool-annotation-for-cogAtlas:MOCA"]')
+            .get('table')
+            .find('tr')
+            .eq(1)
+            .then(row => {
+                cy.wrap(row).contains("Mark as missing").click();
+            });
+
+            cy.get("@commitSpy").should("have.been.calledOnceWith", "changeMissingStatus", {
+                column: "column1",
+                value: 1,
+                markAsMissing: true
+            });
     });
 });

From 3c8872562f41c8a26c0c860e448511570a9201be Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Fri, 20 Oct 2023 09:13:02 -0400
Subject: [PATCH 40/45] Adding this here does something

But I don't understand what
It enables reactivity though
So it's good
---
 store/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/store/index.js b/store/index.js
index 6165ea0c..af3409e2 100644
--- a/store/index.js
+++ b/store/index.js
@@ -733,6 +733,7 @@ export const mutations = {
                 break;
 
             case "Diagnosis":
+            case "Assessment Tool":
             case "Sex":
 
                 p_state.dataDictionary.annotated[columnName] = Object.assign(

From cd4f8f1a932e1573a0ae5df5707acc72c661b3fe Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 24 Oct 2023 09:59:15 -0400
Subject: [PATCH 41/45] Apply first round of review suggestions

---
 cypress/component/category-toolgroup.cy.js        | 10 ----------
 cypress/e2e/page/annotation-pagetests.cy.js       |  1 -
 cypress/unit/store-mutation-createToolGroup.cy.js |  3 +--
 store/index.js                                    |  3 +--
 4 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 8d290689..35b2db6d 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -62,16 +62,6 @@ describe("Tool Group component", () => {
         };
     });
 
-    it("mounts", () => {
-        cy.mount(categoryToolGroup, {
-            mocks: {
-
-                $store: store
-            }
-        });
-
-    });
-
     it("if nothing is selected or mapped, component is empty", () => {
         store.state.columnToCategoryMap = {
             column1: null,
diff --git a/cypress/e2e/page/annotation-pagetests.cy.js b/cypress/e2e/page/annotation-pagetests.cy.js
index bf53b82d..75e0199b 100644
--- a/cypress/e2e/page/annotation-pagetests.cy.js
+++ b/cypress/e2e/page/annotation-pagetests.cy.js
@@ -49,7 +49,6 @@ describe("tests on annotation page ui with programmatic state loading and store
             it("Annotate age column; default age format transformations", () => {
 
                 cy.window().its("$nuxt.$store").then(p_store => {
-                    console.dir(p_store);
                 });
 
                 // 0. Categories required for this test and the number of required columns for each category
diff --git a/cypress/unit/store-mutation-createToolGroup.cy.js b/cypress/unit/store-mutation-createToolGroup.cy.js
index dacd22c3..cb29480f 100644
--- a/cypress/unit/store-mutation-createToolGroup.cy.js
+++ b/cypress/unit/store-mutation-createToolGroup.cy.js
@@ -26,11 +26,10 @@ describe("createToolGroup mutation", () => {
         };
     });
 
-    it("Makes sure an annotated value is set in the value map", () => {
+    it("Makes sure mutation sets a value in the toolTerms state object", () => {
 
         // Act
         mutations.createToolGroup(store.state, { identifier: 'cogAtlas:MOCA', label: 'MOCA' });
-        console.log(store.state.toolTerms);
         // Assert
         expect(store.state.toolTerms.filter(tool => tool.identifier === 'cogAtlas:MOCA')[0]['selected']).to.be.true;
     });
diff --git a/store/index.js b/store/index.js
index af3409e2..b1f9f96e 100644
--- a/store/index.js
+++ b/store/index.js
@@ -763,7 +763,7 @@ export const mutations = {
     },
 
     alterColumnToToolMapping(p_state, {columnName, toolIdentifier}) {
-        if ( p_state.columnToToolMap[columnName] == toolIdentifier ) {
+        if ( p_state.columnToToolMap[columnName] === toolIdentifier ) {
             p_state.columnToToolMap[columnName] = null;
         } else {
             p_state.columnToToolMap[columnName] = toolIdentifier;
@@ -771,7 +771,6 @@ export const mutations = {
     },
 
     createToolGroup(p_state, newTool) {
-        console.log('state is', p_state.toolTerms, 'newTool is', newTool);
         const toolIndex = p_state.toolTerms.findIndex(tool => tool.identifier === newTool.identifier);
         p_state.toolTerms.splice(toolIndex, 1, Object.assign(p_state.toolTerms[toolIndex], { selected: true }));
     },

From 76356fb96663eebb178997659786c57d9228f6fa Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 24 Oct 2023 13:49:35 -0400
Subject: [PATCH 42/45] Second round of review edits

---
 components/annot-tool-groups.vue              |   6 +-
 cypress/component/category-toolgroup.cy.js    | 157 ++++++------------
 .../unit/store-getter-getUniqueValues.cy.js   |   4 -
 3 files changed, 58 insertions(+), 109 deletions(-)

diff --git a/components/annot-tool-groups.vue b/components/annot-tool-groups.vue
index ba546f49..00286976 100644
--- a/components/annot-tool-groups.vue
+++ b/components/annot-tool-groups.vue
@@ -12,8 +12,8 @@
                     :title="label">
                     <annot-single-tool
                         :name="identifier"
-                        :uniqueColumnValues="provideUniqueValues(identifier)"
-                        @declareMissing="changeMissingStatus(Object.assign($event, {markAsMissing: true}))" />
+                        :columns="getColumnsForTool(identifier)"
+                        @declareMissing="changeMissingStatus(Object.assign({}, $event, {markAsMissing: true}))" />
                 </b-tab>
 
             </b-tabs>
@@ -26,7 +26,7 @@
 
 <script>
     import { mapGetters, mapMutations } from "vuex";
-    // @declareMissing="changeMissingStatus(Object.assign($event, {markAsMissing: true}))" />
+
     export default {
         computed: {
             ...mapGetters([
diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 35b2db6d..414d0b6e 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -1,52 +1,20 @@
 import categoryToolGroup from "~/components/category-toolgroup.vue";
-import { getters } from "~/store";
 
 let store;
 let state;
-
-// TODO see if we can replace this by manipulating state and passing by reference
-const makeGetters =(state) => {
-    return {
-        getColumnsForCategory: getters.getColumnsForCategory(state),
-        getSelectedTools: getters.getSelectedTools(state)
-    };
-};
+let getters;
 
 describe("Tool Group component", () => {
 
     beforeEach(() => {
         state = {
 
-            columnToCategoryMap: {
-                column1: "Assessment Tool",
-                column2: "Age",
-                column3: "Assessment Tool"
-            },
-
             columnToToolMap: {
                 column1: 'cogatlas:MOCA',
                 column2: null,
                 column3: 'cogatlas:UPDRSIII'
             },
 
-            dataDictionary: {
-
-                annotated: {
-
-                    column1: { missingValues: [] },
-                    column2: { missingValues: [] },
-                    column3: { missingValues: ["column3_value1", "column3_value2"] }
-                }
-            },
-
-            dataTable: [
-
-                { column1: 1, column2: "column2_value1", column3: "column3_value1" },
-                { column1: 2, column2: "column2_value2", column3: "column3_value2" },
-                { column1: 1, column2: "column2_value3", column3: "column3_value3" },
-                { column1: 3, column2: "column2_value2", column3: "column3_value4" }
-            ],
-
             toolTerms: [
                 {label: 'MOCA', identifier: 'cogatlas:MOCA', selected: false},
                 {label: 'UPDRSIII', identifier: 'cogatlas:UPDRSIII', selected: false},
@@ -54,59 +22,54 @@ describe("Tool Group component", () => {
                 {label: 'AnotherThing', identifier: 'cogatlas:AnotherThing', selected: false}
             ]
         };
+        getters = {
+            getColumnsForCategory: () => (p_category) => {
+                return ["column1", "column3"];
+            },
+            getSelectedTools: () => {
+                return [
+                    {label: 'MOCA', identifier: 'cogatlas:MOCA', selected: true},
+                    {label: 'UPDRSIII', identifier: 'cogatlas:UPDRSIII', selected: true}
+                ];
+            }
+        };
         store = {
 
             commit: () => {},
             state: state,
-            getters: makeGetters(state)
+            getters: getters
         };
     });
 
     it("if nothing is selected or mapped, component is empty", () => {
-        store.state.columnToCategoryMap = {
-            column1: null,
-            column2: null,
-            column3: null
-        };
-        store.state.columnToToolMap = {
-            column1: null,
-            column2: null,
-            column3: null
-        };
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
+            mocks: { $store: store },
+            computed: {
+                getColumnsForCategory: () => (p_category) => {
+                    return [];
+                },
+                getSelectedTools: () => {
+                    return [];
+                }
             }
         });
+
         cy.get("[data-cy='toolgroup-select']").should('not.exist');
         cy.get("[data-cy='assessment-tool-table']").should('not.exist');
         cy.get("[data-cy='assessment-column-table']").should('not.exist');
 
     });
 
-    it("has a table of columns about assessment tools on the right", () => {
-
-        cy.mount(categoryToolGroup, {
-            mocks: {
-
-                $store: store
-            }
-        });
-
-        cy.get("[data-cy='assessment-column-table']").should("be.visible");
-
-    });
-
     it("gets columns about assessment tools from the store and shows them to me", () => {
 
         cy.mount(categoryToolGroup, {
-            mocks: {
-
-                $store: store
-            }
-
+            mocks: { $store: store },
+            computed: Object.assign(store.getters, {getSelectedTools: () => {
+                return [];
+            }})
         });
 
+        cy.get("[data-cy='assessment-column-table']").should("be.visible");
         cy.get("[data-cy='assessment-column-table']").contains("column1");
         cy.get("[data-cy='assessment-column-table']").contains("column3");
     });
@@ -119,10 +82,10 @@ describe("Tool Group component", () => {
         };
 
         cy.mount(categoryToolGroup, {
-            mocks: {
-
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: Object.assign(store.getters, {getSelectedTools: () => {
+                return [];
+            }})
         });
 
         cy.get("[data-cy='assessment-column-table']").find("tr:contains('column1')").should('not.have.class', 'selected-tool');
@@ -132,10 +95,8 @@ describe("Tool Group component", () => {
 
     it("gets assessment tool names from the store and shows them in a dropdown", () => {
         cy.mount(categoryToolGroup, {
-            mocks: {
-
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
 
         cy.get("[data-cy='toolgroup-select']").should("be.visible");
@@ -146,9 +107,10 @@ describe("Tool Group component", () => {
     it("selecting a tool group fires a createTool mutation", () => {
         cy.spy(store, "commit").as("commitSpy");
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: Object.assign(store.getters, {getSelectedTools: () => {
+                return [];
+            }})
         });
 
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
@@ -158,9 +120,10 @@ describe("Tool Group component", () => {
 
     it("clearing the dropdown selection does not crash the app", () => {
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: Object.assign(store.getters, {getSelectedTools: () => {
+                return [];
+            }})
         });
 
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
@@ -170,11 +133,10 @@ describe("Tool Group component", () => {
 
     it("when a tool is selected in the store, it appears in the tool table", () => {
         store.state.toolTerms[0]['selected'] = true;
-        store.getters = makeGetters(store.state);
+
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
 
         cy.get("[data-cy='assessment-tool-table']").contains('MOCA');
@@ -183,11 +145,10 @@ describe("Tool Group component", () => {
     it("tools in the tool-table start unselected and become styled when clicked", () => {
         store.state.toolTerms[0]['selected'] = true;
         store.state.toolTerms[2]['selected'] = true;
-        store.getters = makeGetters(store.state);
+
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
 
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
@@ -201,14 +162,12 @@ describe("Tool Group component", () => {
 
     it("if a tool is already created, trying to create it again has no effect", () => {
         store.state.toolTerms[0]['selected'] = true;
-        store.getters = makeGetters(store.state);
 
         cy.spy(store, "commit").as("commitSpy");
 
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
         cy.get("[data-cy='assessment-tool-table']").contains("MOCA").click();
         cy.get("@commitSpy").should("not.have.been.called");
@@ -217,12 +176,10 @@ describe("Tool Group component", () => {
 
     it("when I click on a tool the tool gets highlighted", () => {
         store.state.toolTerms[0]['selected'] = true;
-        store.getters = makeGetters(store.state);
 
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
 
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')")
@@ -236,14 +193,12 @@ describe("Tool Group component", () => {
 
     it("clicking on column with tool fires mapping mutation every time", () => {
         store.state.toolTerms[0]['selected'] = true;
-        store.getters = makeGetters(store.state);
 
         cy.spy(store, "commit").as("commitSpy");
 
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
 
         cy.get("[data-cy='assessment-tool-table']").contains('MOCA').click();
@@ -260,12 +215,10 @@ describe("Tool Group component", () => {
         store.state.toolTerms[0]['selected'] = true;
         // UPDRS
         store.state.toolTerms[1]['selected'] = true;
-        store.getters = makeGetters(store.state);
 
         cy.mount(categoryToolGroup, {
-            mocks: {
-                $store: store
-            }
+            mocks: { $store: store },
+            computed: store.getters
         });
         // Starting out with a different tool selected
         cy.get("[data-cy='assessment-tool-table']").find("tr:contains('MOCA')").click();
diff --git a/cypress/unit/store-getter-getUniqueValues.cy.js b/cypress/unit/store-getter-getUniqueValues.cy.js
index 6220a508..e1f08f3d 100644
--- a/cypress/unit/store-getter-getUniqueValues.cy.js
+++ b/cypress/unit/store-getter-getUniqueValues.cy.js
@@ -35,11 +35,7 @@ describe("getUniqueValues getter", () => {
 
         store = {
             getters: {
-                // getColumnsForCategory: () => (p_category) => {
-                //     return ["column1", "column2", "column3"];
-                // },
                 getColumnsForCategory: getters.getColumnsForCategory(state),
-
                 getUniqueColumnValues: getters.getUniqueColumnValues(state)
             },
 

From 37538f2168800b0156bf872a7436f39558f5fd2c Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 24 Oct 2023 13:57:06 -0400
Subject: [PATCH 43/45] Refactor tool group mutation name

---
 components/category-toolgroup.vue                 | 4 ++--
 cypress/unit/store-mutation-createToolGroup.cy.js | 4 ++--
 store/index.js                                    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/category-toolgroup.vue b/components/category-toolgroup.vue
index 78364990..3c2ceb14 100644
--- a/components/category-toolgroup.vue
+++ b/components/category-toolgroup.vue
@@ -79,12 +79,12 @@
         methods: {
             ...mapMutations([
 
-                "createToolGroup",
+                "createAssessmentTool",
                 "alterColumnToToolMapping"
             ]),
             selectTool(selectedTool) {
                 if ( selectedTool !== null ) {
-                    this.createToolGroup({
+                    this.createAssessmentTool({
                         identifier: selectedTool.identifier,
                         label: selectedTool.label
                     });
diff --git a/cypress/unit/store-mutation-createToolGroup.cy.js b/cypress/unit/store-mutation-createToolGroup.cy.js
index cb29480f..2f670210 100644
--- a/cypress/unit/store-mutation-createToolGroup.cy.js
+++ b/cypress/unit/store-mutation-createToolGroup.cy.js
@@ -29,9 +29,9 @@ describe("createToolGroup mutation", () => {
     it("Makes sure mutation sets a value in the toolTerms state object", () => {
 
         // Act
-        mutations.createToolGroup(store.state, { identifier: 'cogAtlas:MOCA', label: 'MOCA' });
+        mutations.createAssessmentTool(store.state, { identifier: 'cogAtlas:MOCA', label: 'MOCA' });
         // Assert
         expect(store.state.toolTerms.filter(tool => tool.identifier === 'cogAtlas:MOCA')[0]['selected']).to.be.true;
     });
 
-});
\ No newline at end of file
+});
diff --git a/store/index.js b/store/index.js
index b1f9f96e..f9e63746 100644
--- a/store/index.js
+++ b/store/index.js
@@ -770,7 +770,7 @@ export const mutations = {
         }
     },
 
-    createToolGroup(p_state, newTool) {
+    createAssessmentTool(p_state, newTool) {
         const toolIndex = p_state.toolTerms.findIndex(tool => tool.identifier === newTool.identifier);
         p_state.toolTerms.splice(toolIndex, 1, Object.assign(p_state.toolTerms[toolIndex], { selected: true }));
     },

From 578832c1b3b416b966aa2837d818c1539455dee1 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 24 Oct 2023 14:06:22 -0400
Subject: [PATCH 44/45] Make the component use good props

---
 components/annot-tool-groups.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/annot-tool-groups.vue b/components/annot-tool-groups.vue
index 00286976..483ea012 100644
--- a/components/annot-tool-groups.vue
+++ b/components/annot-tool-groups.vue
@@ -12,8 +12,8 @@
                     :title="label">
                     <annot-single-tool
                         :name="identifier"
-                        :columns="getColumnsForTool(identifier)"
-                        @declareMissing="changeMissingStatus(Object.assign({}, $event, {markAsMissing: true}))" />
+                        :uniqueColumnValues="provideUniqueValues(identifier)"
+                        @declareMissing="changeMissingStatus(Object.assign($event, {markAsMissing: true}))" />
                 </b-tab>
 
             </b-tabs>

From c606474c92ffe2c87ae3ba674a9b5297fde91c32 Mon Sep 17 00:00:00 2001
From: Sebastian Urchs <sebastian.urchs@gmail.com>
Date: Tue, 24 Oct 2023 14:35:22 -0400
Subject: [PATCH 45/45] Complete the refactor

---
 cypress/component/category-toolgroup.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/component/category-toolgroup.cy.js b/cypress/component/category-toolgroup.cy.js
index 414d0b6e..801d59a0 100644
--- a/cypress/component/category-toolgroup.cy.js
+++ b/cypress/component/category-toolgroup.cy.js
@@ -104,7 +104,7 @@ describe("Tool Group component", () => {
         cy.get("[data-cy='toolgroup-select']").should("contain", "MOCA");
     });
 
-    it("selecting a tool group fires a createTool mutation", () => {
+    it("selecting a tool group fires a createAssessmentTool mutation", () => {
         cy.spy(store, "commit").as("commitSpy");
         cy.mount(categoryToolGroup, {
             mocks: { $store: store },
@@ -114,7 +114,7 @@ describe("Tool Group component", () => {
         });
 
         cy.get("[data-cy='toolgroup-select']").type("MOCA{enter}");
-        cy.get("@commitSpy").should("have.been.calledWith", "createToolGroup", { identifier: 'cogatlas:MOCA', label: 'MOCA' });
+        cy.get("@commitSpy").should("have.been.calledWith", "createAssessmentTool", { identifier: 'cogatlas:MOCA', label: 'MOCA' });
 
     });