Correct highlight line mismatch between depth and bars.

  Avoid implementation difference between scroll bar a no scroll bar components.
  Force depth to also have y-axis scroll bar

Author: grosscol

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bravue",
-  "version": "0.18.6",
+  "version": "0.18.7",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/SeqDepth.vue

@@ -3,7 +3,7 @@
   <button class="close-button" v-on:click="$emit('close')">
     <font-awesome-icon style="background-color:transparent;" :icon="closeIcon"></font-awesome-icon>
   </button>
-  <div id="holder" ref="holder">
+  <div id="holder" ref="holder" style="overflow-y: scroll;">
     <svg id="depthSvg" style="display: block;" height="100px" width="100%" preserveAspectRatio="none">
       <clipPath id="data-area-clip">
         <rect id="clip-rect" x="0%" y="0%" width="100%" height="100%"></rect>
@@ -117,6 +117,7 @@ export default {
     scaleSvg: function () {
       // Use template ref, holder, to access the width of the holding div.
       const container_width = this.holder?.offsetWidth || 1000
+      console.log(`Depth holder offsetWidth: ${this.holder.offsetWidth} scrollWidth: ${this.holder.scrollWidth}`)
 
       const depth_upper_limit = this.roundUpToTens(this.max_mean_seq_depth)
 
@@ -132,6 +133,7 @@ export default {
                   .range([x_range_begin, x_range_limit]);
       this.y_scale.domain([0, depth_upper_limit])
                   .range([100, 0]);
+      console.log(`Depth range: ${x_range_begin} to ${x_range_limit} delta: ${x_range_limit - x_range_begin}`)
 
       // Match viewbox to containing element width setting the aspect ratio at draw time.
       this.svg = d3.select("#depthSvg")
@@ -214,6 +216,7 @@ export default {
           .attr("x1", this.x_scale(newVal))
           .attr("x2", this.x_scale(newVal))
           .attr("visibility", "inherit")
+        console.log(`SeqDepth hi line val: ${newVal} x: ${this.x_scale(newVal)}`)
       }
     },
   }

src/components/TxBars.vue

@@ -94,6 +94,7 @@ export default {
           .attr("x1", this.x_scale(newVal))
           .attr("x2", this.x_scale(newVal))
           .attr("visibility", "inherit")
+        console.log(`TxBars hi line val: ${newVal} x: ${this.x_scale(newVal)}`)
       }
     },
   },
@@ -132,9 +133,11 @@ export default {
       // Calc viewbox dimensions
       const row_height = 28
       const row_mid = Math.floor(row_height * 0.7)
-      const container_width = this.scroller?.scrollWidth || 1000
+      const container_width = this.scroller?.offsetWidth || 1000
       const container_height = this.numTranscripts * row_height
 
+      console.log(`Bars scroller offsetWidth: ${this.scroller.offsetWidth} scrollWidth: ${this.scroller.scrollWidth}`)
+
       // Discrete range used in mapping transcript id to a specific y value
       const y_discrete_range = Array.from(Array(this.numTranscripts).keys()).map(v => v * row_height)
 
@@ -161,6 +164,7 @@ export default {
                   .range([0,x_range_limit])
       y_scale.domain(this.uniqTranscripts)
                   .range(y_discrete_range)
+      console.log(`Bars range: 0 to ${x_range_limit} delta: ${x_range_limit - 0}`)
 
       // Draw transcript row boxes for handling highlight and mouseover
       bkgds