highlighting genes based on table row

Author: moriondo2022

src/portals/SysBio/components/BulkTable.vue

@@ -42,6 +42,9 @@
                 :sort-by.sync="sortField"
                 :sort-desc.sync="sortDesc"
             >
+                <template #cell(gene)="r">
+                    <button @click="findGene(r.item.gene)">{{ r.item.gene }}</button>
+                </template>
         </b-table>
             <b-pagination
                 v-model="currentPage"
@@ -281,10 +284,12 @@ export default Vue.component("bulk-table", {
             return "";
         },
         findGene(gene){
-            // Populate the subtable before toggling it open
             if (gene === ""){
                 return;
             }
+            if (this.highlightedGene !== gene){
+                this.$emit("highlightRow", gene);
+            }
             this.$emit("geneFound", false);
             let sortedItems = this.bulkData.toSorted(
                 (a,b) => this.sortDesc

src/portals/SysBio/views/BulkBrowser/Template.vue

@@ -135,6 +135,7 @@
                                 <bulk-table
                                     :bulkData="$parent.bulkData19K"
                                     @geneFound="v => $parent.geneFound(v)"
+                                    @highlightRow="gene => $parent.highlight(gene)"
                                     :dataset="$store.state.selectedDataset"
                                     :config="$parent.tableConfig"
                                     :scatterConfig="$parent.scatterplotConfig"