Display count of credible sets of eqtls

Handle visual change when eqtl tab is not highlighted.
Avoid loading eqtl count until ensembl id is known.
Accomodate displaying phenotype in region eqtl table.
Remove traling spaces in code

Author: grosscol

src/components/GeneDashboard.vue

@@ -207,7 +207,7 @@ export default {
       start: null,
       stop: null,
       chrom: null,
-      ensemblId: "",
+      ensemblId: null,
 
       // introns may not be needed as it's assumed for genes
       introns: false,
@@ -255,9 +255,6 @@ export default {
     },
   },
   methods:{
-    demo: function(){
-      this.load_eqtl_count(this.ensemblId)
-    },
     handleOpenModal: function(rowData){
       this.modalData = rowData
       this.showModal = true

src/components/RegionDashboard.vue

@@ -28,7 +28,7 @@
       </div>
     </div>
 
-    <!-- strucvar tab 
+    <!-- strucvar tab
     <div id="structvar-tab" v-if="showTab.structvar">
       <div class="row justify-content-left px-5" >
         <div class="col-md-11">
@@ -290,6 +290,7 @@ export default {
     toggleTab: function(tabName) {
       this.showTab.snv = false
       this.showTab.structvar = false
+      this.showTab.eqtl = false
       this.showTab[tabName] = true
     },
     tabClass: function(isActive) {

src/components/summary/BaseEqtlSummaries.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="child-component">
-    <NumericSummaryCard title="Tissue" numericLabel="eQTL Count" :state="loadingState" :summaryData="tissueSummary"/>
+    <NumericSummaryCard title="Tissue" numericLabel="Credible Set Count" :state="loadingState" :summaryData="tissueSummary"/>
   </div>
 </template>
 
@@ -15,12 +15,14 @@ export default {
   },
   inject: {
     api: {default: ''},
-    /* May need additional injects by the extending component */
   },
   computed: {
     /* Needs to be overridden by the extending component */
     ajaxUrl() { return `${this.api}/example` },
-    ajaxParams() {return {param1: "foo"} }
+    ajaxParams() {return null},
+    /* Simple locking function that can be overridden by extending component
+         in order to prevent loading when ajax parameters haven't been resolved. */
+    ready_to_load() { return true },
   },
   data: function() {
     return {
@@ -31,16 +33,16 @@ export default {
   },
   methods: {
     load: function() {
-      console.log("loading eqtl tissue summary")
+      if(this.ready_to_load === false){ return }
       axios
-        .get(this.ajaxUrl, 
+        .get(this.ajaxUrl,
           {params: this.ajaxParams})
-        .then( resp => { 
-          this.tissueSummary = resp.data 
+        .then( resp => {
+          this.tissueSummary = resp.data
           this.loadingState = "loaded"
         })
-        .catch(error => { 
-          console.log("Error loading region tissue count:" + error) 
+        .catch(error => {
+          console.log("Error loading region tissue count:" + error)
           this.loadingState = "failed"
         })
     }

src/components/summary/GeneEqtlSummaries.vue

@@ -5,13 +5,20 @@ export default {
   name: "GeneEqtlSummaries",
   extends: BaseEqtlSummaries,
   inject: {
-    /* The override to inject appropriate provided data */
-    ensemblId: {default: 0},
+    ensemblId: {default: null},
+  },
+  methods: {
   },
   computed: {
-    /* Needs to be overridden by the extending component */
     ajaxUrl() { return `${this.api}/eqtl/ensembl_tissue_count` },
-    ajaxParams() {return {ensembl: this.ensemblId} }
+    ajaxParams() { return {ensembl: this.ensemblId} },
+    ready_to_load() { return this.ensemblId !== null }
   },
+  watch: {
+    ensemblId: function() {
+      // Handles the case where the ensemblId was not available at mount time.
+      this.load()
+    }
+  }
 }
 </script>

src/components/summary/NumericSummaryCard.vue

@@ -60,8 +60,8 @@ export default {
     },
     summaryData: {
       type: Object,
-      default: function(){ 
-        return {foo: 1, bar: 100} 
+      default: function(){
+        return {foo: 1, bar: 100}
       }
     },
     state: {

src/components/table/BaseEqtlTable.vue

@@ -56,6 +56,9 @@ export default {
       this.empty = data.length == 0
     },
     tblColumnDefs: function(){
+      return this.baseColumnDefs()
+    },
+    baseColumnDefs: function(){
       return([
         {
           title: "Variant Id",

src/components/table/BaseSNVTable.vue

@@ -112,9 +112,9 @@ export default {
           visibleRowsData.push(this.tabulator.rowManager.displayRows[0][i].data);
         }
       }
-      return { 
-        firstRowIdx: firstVisibleRowIndex, 
-        lastRowIdx:  lastVisibleRowIndex, 
+      return {
+        firstRowIdx: firstVisibleRowIndex,
+        lastRowIdx:  lastVisibleRowIndex,
         rowsData: visibleRowsData }
     },
     hover: function(variant, hovered) {
@@ -141,7 +141,7 @@ export default {
       let visVars = this.getVisibleVariants();
 
       // make sure that row is hovered after re-rendering on mobile touch screen
-      if (this.hoveredRowPosition != null) { 
+      if (this.hoveredRowPosition != null) {
         var row = this.tabulator.getRowFromPosition(this.hoveredRowPosition);
         row.getElement().classList.add('row-hovered');
       }
@@ -150,7 +150,7 @@ export default {
     //formerly enterMouseEnter callback
     tblRowMouseEnter: function(e, row) {
       // row was hovered from before and mouseleave was never called
-      if ((this.hoveredRowPosition != null) && (this.hoveredRowPosition != row.getPosition())) { 
+      if ((this.hoveredRowPosition != null) && (this.hoveredRowPosition != row.getPosition())) {
         var hoveredRow = this.tabulator.getRowFromPosition(this.hoveredRowPosition);
         hoveredRow.getElement().classList.remove('row-hovered');
         this.$emit("hover", hoveredRow.getPosition(), hoveredRow.getData(), false);
@@ -170,11 +170,11 @@ export default {
     formatCaddValue: function(cell) {
       return(cell.getValue() === null ? "" : cell.getValue().toFixed(2))
     },
-    // function to override to customize column defs. 
+    // function to override to customize column defs.
     tblColumnDefs: function(){
       return this.baseColumnDefs()
     },
-    // common column defs. 
+    // common column defs.
     baseColumnDefs: function(){
       return([
         {

src/components/table/GeneSNVTable.vue

@@ -19,8 +19,8 @@ export default {
   emits: ['openModal'],
   computed: {
     // define url to get data appropriate for region snv table
-    ajaxUrl() { 
-      return(`${this.api}/variants/gene/snv/${this.ensemblId}`) 
+    ajaxUrl() {
+      return(`${this.api}/variants/gene/snv/${this.ensemblId}`)
     }
   },
   methods: {
@@ -124,7 +124,7 @@ export default {
       let baseCols = this.baseColumnDefs()
       baseCols.splice(2, 0, consequenceCol, annoCol, lofteeCol)
 
-      return baseCols 
+      return baseCols
     },
   }
 }

src/components/table/RegionEqtlTable.vue

@@ -14,10 +14,29 @@ export default {
     /* The override to get data from appropriate endpoint */
     ajaxUrl() { return(`${this.api}/eqtl/region`) },
     ajaxParams(){
-      return {chrom: this.chrom, 
-              start: this.start, 
-              stop: this.stop} 
+      return {chrom: this.chrom,
+              start: this.start,
+              stop: this.stop}
     }
   },
+  methods: {
+    tblColumnDefs: function(){
+
+      let phenoCol = {
+        title: "Phenotype Id",
+        titleDownload: "Phenotype Id",
+        headerTooltip: "affected phenotype",
+        minWidth: 130,
+        widthGrow: 1,
+        field: "phenotype_id",
+        formatter: (cell) => { return `<a href='gene.html?id=${cell.getValue()}'>${cell.getValue()}</a>`; }
+        }
+
+      let baseCols = this.baseColumnDefs()
+      baseCols.push(phenoCol)
+
+      return baseCols
+    },
+  }
 }
 </script>