nt scale for selection box

Author: isaacfink21

anvio/data/interactive/css/genomeview.css

@@ -48,18 +48,6 @@ g.scale rect.background{
     pointer-events: all;
 }
 
-.brush .extent {
-    stroke: black;
-    fill-opacity: .125;
-    shape-rendering: crispEdges;
-}
-
-rect.background {
-  fill: rgba(0,0,0,0.1);
-  visibility: visible !important;
-  pointer-events: all;
-}
-
 #tooltip-body{
     height: 300px;
     width: 300px;

anvio/data/interactive/js/genomeview.js

@@ -27,8 +27,7 @@
 
  // Settings vars
  // TODO migrate below variables to kvp in state
- var stateData = {};
- var calculatedSpacing; // like spacing, but calculated ;)
+ var state = {};
  var spacing = 30; // vertical spacing between genomes
  var showLabels = true; // show genome labels?
  var genomeLabelSize = 15; // font size of genome labels
@@ -39,7 +38,7 @@
  var showScale = true; // show nt scale?
  var scaleInterval = 100; // nt scale intervals
  var scaleFactor = 1; // widths of all objects are scaled by this value to zoom in/out
- 
+
  var alignToGC = null;
 
  var arrowStyle = 1; // gene arrow cosmetics. 1 (default) = 'inspect-page', 2 = thicker arrows, 3 = pentagon
@@ -54,7 +53,7 @@ var genomeData;
 $(document).ready(function() {
     initData();
     // loadState();
-    processState('default', stateData) // lifted here until loadState is hooked in from backend
+    processState('default', {}) // lifted here until loadState is hooked in from backend
     loadAll();
 });
 
@@ -148,26 +147,6 @@ function processState(stateName, stateData){
       'ordering' : 'beaks to tails'
     }
   ]
-  stateData['additional-data-layers'] = []
-
-  calculateMaxGenomeLength() 
-  
-  for(let i = 0; i < genomeData.genomes.length; i++){ // generate mock additional data layer content 
-    let gcContent = []
-    let coverage = []
-    
-    for(let j = 0; j < genomeMax; j++){
-      gcContent.push(Math.floor(Math.random() * 25))
-      coverage.push(Math.floor(Math.random() * 25))
-    }
-    let genomeLabel = Object.keys(genomeData.genomes[i][1]['contigs']['info'])[0];
-    let additionalDataObject = {
-      'genome' : genomeLabel, 
-      'coverage' : coverage, 
-      'gcContent' : gcContent
-    }
-    stateData['additional-data-layers'].push(additionalDataObject)
-  } 
 
   if(stateData['genome-order-method']){
     stateData['genome-order-method'].forEach(orderMethod => {
@@ -189,8 +168,11 @@ function loadAll() {
   canvas.setWidth(VIEWER_WIDTH * 0.85);
 
   // Find max length genome
-  calculateMaxGenomeLength()
-  calculatedSpacing = calculateSpacingForGroups()
+  for(genome of genomeData.genomes) {
+    genome = genome[1].genes.gene_calls;
+    let genomeEnd = genome[Object.keys(genome).length-1].stop;
+    if(genomeEnd > genomeMax) genomeMax = genomeEnd;
+  }
 
   var scaleWidth = canvas.getWidth();
   var scaleHeight = 200;
@@ -211,12 +193,13 @@ function loadAll() {
               .x(xScale)
               .on("brushend", onBrush);
 
-  $("#scaleSvg").attr("width", scaleWidth);
+  $("#scaleSvg").attr("width", scaleWidth + 10);
 
   var scaleBox = d3.select("#scaleSvg").append("g")
               .attr("id", "scaleBox")
               .attr("class","scale")
-              .attr("y", 230); // rather than 80 from 50?
+              .attr("y", 230) // rather than 80 from 50?
+              .attr("transform", "translate(5,0)");
 
   scaleBox.append("g")
               .attr("class", "x axis top noselect")
@@ -234,7 +217,6 @@ function loadAll() {
   $('#brush_end').val(Math.floor(scaleWidth));
 
   function onBrush(){
-      console.log("onBrush() called!");
       var b = brush.empty() ? xScale.domain() : brush.extent();
 
       if (brush.empty()) {
@@ -461,7 +443,6 @@ function draw(scaleX=scaleFactor) {
   for(genome of genomeData.genomes) {
     let label = genome[1].genes.gene_calls[0].contig;
     addGenome(label, genome[1].genes.gene_calls, genome[0], y, scaleX=scaleX)
-    addLayers(label, genome[1], genome[0])
     labelSpacing += 30
     y++;
   }
@@ -701,17 +682,6 @@ function addGenome(label, gene_list, genomeID, y, scaleX=1) {
   //geneGroup.destroy();
 }
 
-function addLayers(label, genome, genomeID){ // this will work alongside addGenome to render out any additional data layers associated with each group (genome)
-
-  let additionalDataLayers = stateData['additional-data-layers'].find(group =>  group.genome = label)
-  if(additionalDataLayers['coverage']){
-    // process for rendering coverage
-  }
-  if(additionalDataLayers['gcContent']){
-    //process for rendering GC content
-  }
-}
-
 function geneArrow(gene, geneID, functions, y, genomeID, style, scaleX=1) {
   var cag = null;
   var color = 'gray';
@@ -855,23 +825,6 @@ function changeGenomeOrder(updatedOrder){
   draw()
 }
 
-function calculateMaxGenomeLength(){
-  for(genome of genomeData.genomes) {
-    genome = genome[1].genes.gene_calls;
-    let genomeEnd = genome[Object.keys(genome).length-1].stop;
-    if(genomeEnd > genomeMax) genomeMax = genomeEnd;
-  }
-}
-
-function calculateSpacingForGroups(){ // to be used for setting vertical spacing 
-  let maxGroupSize = 1; // default, as each group will always have at minimum a 'genome' layer 
-  stateData['additional-data-layers'].map(group => {
-    Object.keys(group).length > maxGroupSize ? maxGroupSize = Object.keys(group).length : null 
-  })
-  let spacing = 500 / [maxGroupSize * genomeData.genomes.length] // 500 is hardcoded main canvas height
-  return spacing 
-}
-
 var fixHelperModified = function(e, tr) { // ripped from utils.js instead of importing the whole file
   var $originals = tr.children();
   var $helper = tr.clone();