[ENH] Add assessment tool categorization workflow

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"
             ])
         },

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"
             ])

components/annot-single-tool.vue

@@ -0,0 +1,59 @@
+<template>
+
+    <div>
+        <b-table
+            striped
+            :data-cy="('tool-annotation-for-' + name)"
+            :fields="toolFields"
+            :items="uniqueColumnValues">
+            <template #cell(missing_value)="row">
+                <b-button
+                    :data-cy="'missingValueButton_' + row.index"
+                    variant="danger"
+                    @click="emitMissingValue(row.item['column'], row.item['value']) ">
+                    {{ 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"
+            ])
+        },
+        methods: {
+            emitMissingValue(column, value) {
+                this.$emit("declareMissing", {column, value});
+            }
+        }
+    };
+
+</script>

components/annot-tool-groups.vue

@@ -0,0 +1,53 @@
+<template>
+
+    <div>
+
+        <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">
+                    <annot-single-tool
+                        :name="identifier"
+                        :uniqueColumnValues="provideUniqueValues(identifier)"
+                        @declareMissing="changeMissingStatus(Object.assign($event, {markAsMissing: true}))" />
+                </b-tab>
+
+            </b-tabs>
+
+        </b-card>
+
+    </div>
+
+</template>
+
+<script>
+    import { mapGetters, mapMutations } from "vuex";
+
+    export default {
+        computed: {
+            ...mapGetters([
+                "getSelectedTools",
+                "getColumnsForTool",
+                "getUniqueColumnValues"
+            ])
+        },
+        methods: {
+            ...mapMutations([
+
+                "changeMissingStatus"
+            ]),
+            provideUniqueValues(identifier) {
+                const toolColumns = this.getColumnsForTool(identifier);
+                return toolColumns
+                    .map(column => this.getUniqueColumnValues(column)
+                        .map(value => ({"column": column, "value": value})))
+                    .flat();
+            }
+        }
+    };
+
+</script>

components/category-toolgroup.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <b-row>
+            <b-col cols="6">
+                <v-select
+                    v-if="tableRows.length > 0"
+                    data-cy="toolgroup-select"
+                    :options="toolTerms"
+                    outlined
+                    @input="selectTool"
+                    :selectable="(option) => !getSelectedTools.some(el => el.identifier.includes(option.identifier))" />
+            </b-col>
+        </b-row>
+        <b-row>
+            <b-col>
+                <b-table
+                    v-if="getSelectedTools.length > 0"
+                    data-cy="assessment-tool-table"
+                    outlined
+                    selectable
+                    head-variant="dark"
+                    :items="getSelectedTools"
+                    select-mode="single"
+                    selected-variant=""
+                    :fields="[{ key: 'label' }]"
+                    @row-selected="highlightRow"
+                    :tbody-tr-class="styleTableRow"
+                    thead-class="hidden" />
+
+            </b-col>
+            <b-col>
+                <b-table
+                    v-if="tableRows.length > 0"
+                    data-cy="assessment-column-table"
+                    outlined
+                    head-variant="dark"
+                    :items="tableRows"
+                    selected-variant=""
+                    thead-class="hidden"
+                    @row-clicked="mapColumn"
+                    :tbody-tr-class="styleRow" />
+            </b-col>
+        </b-row>
+    </div>
+</template>
+
+<script>
+
+    import { mapGetters, mapState, mapMutations } from 'vuex';
+
+    export default {
+        data() {
+            return {
+                selectedTool: {
+                    tool: null,
+                    identifier: null
+                }
+            };
+
+        },
+
+        computed: {
+            ...mapGetters([
+                'getColumnsForCategory',
+                'getSelectedTools'
+            ]),
+
+            ...mapState([
+
+                "toolTerms",
+                "columnToToolMap"
+            ]),
+            tableRows() {
+                return this.getColumnsForCategory('Assessment Tool').map(column => ({
+                    column: column
+                }));
+            }
+        },
+        methods: {
+            ...mapMutations([
+
+                "createAssessmentTool",
+                "alterColumnToToolMapping"
+            ]),
+            selectTool(selectedTool) {
+                if ( selectedTool !== null ) {
+                    this.createAssessmentTool({
+                        identifier: selectedTool.identifier,
+                        label: selectedTool.label
+                    });
+                }
+            },
+            highlightRow(rows) {
+                if ( 0 !== rows.length ) {
+                    this.selectedTool = rows[0];
+                }
+            },
+
+            styleTableRow(p_row) {
+                if (p_row.identifier === this.selectedTool.identifier) {
+                    return "selected-tool";
+                }
+                return "";
+            },
+            mapColumn(row) {
+                this.alterColumnToToolMapping({columnName: row.column, toolIdentifier: this.selectedTool.identifier});
+            },
+            styleRow(p_row) {
+                if (
+                    (this.columnToToolMap[p_row.column] !== null) &&
+                    (this.columnToToolMap[p_row.column] === this.selectedTool.identifier)
+                ) {
+                    return "selected-tool";
+                } else {
+                    return "";
+                }
+            }
+        }
+    };
+</script>
+<style>
+
+.selected-tool {
+    background-color: red !important;
+}
+
+</style>

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",

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"];
         };