genoverse 3.2.0

package/js/lib/rtree.js

@@ -0,0 +1 @@
+!function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.RTree=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module,exports){"use strict";var rectangle=_dereq_("./rectangle");var bbox=function(ar,obj){if(obj&&obj.bbox){return{leaf:obj,x:obj.bbox[0],y:obj.bbox[1],w:obj.bbox[2]-obj.bbox[0],h:obj.bbox[3]-obj.bbox[1]}}var len=ar.length;var i=0;var a=new Array(len);while(i<len){a[i]=[ar[i][0],ar[i][1]];i++}var first=a[0];len=a.length;i=1;var temp={min:[].concat(first),max:[].concat(first)};while(i<len){if(a[i][0]<temp.min[0]){temp.min[0]=a[i][0]}else if(a[i][0]>temp.max[0]){temp.max[0]=a[i][0]}if(a[i][1]<temp.min[1]){temp.min[1]=a[i][1]}else if(a[i][1]>temp.max[1]){temp.max[1]=a[i][1]}i++}var out={x:temp.min[0],y:temp.min[1],w:temp.max[0]-temp.min[0],h:temp.max[1]-temp.min[1]};if(obj){out.leaf=obj}return out};var geoJSON={};geoJSON.point=function(obj,self){return self.insertSubtree({x:obj.geometry.coordinates[0],y:obj.geometry.coordinates[1],w:0,h:0,leaf:obj},self.root)};geoJSON.multiPointLineString=function(obj,self){return self.insertSubtree(bbox(obj.geometry.coordinates,obj),self.root)};geoJSON.multiLineStringPolygon=function(obj,self){return self.insertSubtree(bbox(Array.prototype.concat.apply([],obj.geometry.coordinates),obj),self.root)};geoJSON.multiPolygon=function(obj,self){return self.insertSubtree(bbox(Array.prototype.concat.apply([],Array.prototype.concat.apply([],obj.geometry.coordinates)),obj),self.root)};geoJSON.makeRec=function(obj){return rectangle(obj.x,obj.y,obj.w,obj.h)};geoJSON.geometryCollection=function(obj,self){if(obj.bbox){return self.insertSubtree({leaf:obj,x:obj.bbox[0],y:obj.bbox[1],w:obj.bbox[2]-obj.bbox[0],h:obj.bbox[3]-obj.bbox[1]},self.root)}var geos=obj.geometry.geometries;var i=0;var len=geos.length;var temp=[];var g;while(i<len){g=geos[i];switch(g.type){case"Point":temp.push(geoJSON.makeRec({x:g.coordinates[0],y:g.coordinates[1],w:0,h:0}));break;case"MultiPoint":temp.push(geoJSON.makeRec(bbox(g.coordinates)));break;case"LineString":temp.push(geoJSON.makeRec(bbox(g.coordinates)));break;case"MultiLineString":temp.push(geoJSON.makeRec(bbox(Array.prototype.concat.apply([],g.coordinates))));break;case"Polygon":temp.push(geoJSON.makeRec(bbox(Array.prototype.concat.apply([],g.coordinates))));break;case"MultiPolygon":temp.push(geoJSON.makeRec(bbox(Array.prototype.concat.apply([],Array.prototype.concat.apply([],g.coordinates)))));break;case"GeometryCollection":geos=geos.concat(g.geometries);len=geos.length;break}i++}var first=temp[0];i=1;len=temp.length;while(i<len){first.expand(temp[i]);i++}return self.insertSubtree({leaf:obj,x:first.x(),y:first.y(),h:first.h(),w:first.w()},self.root)};exports.geoJSON=function(prelim){var that=this;var features,feature;if(Array.isArray(prelim)){features=prelim.slice()}else if(prelim.features&&Array.isArray(prelim.features)){features=prelim.features.slice()}else if(prelim instanceof Object){features=[prelim]}else{throw"this isn't what we're looking for"}var len=features.length;var i=0;while(i<len){feature=features[i];if(feature.type==="Feature"){switch(feature.geometry.type){case"Point":geoJSON.point(feature,that);break;case"MultiPoint":geoJSON.multiPointLineString(feature,that);break;case"LineString":geoJSON.multiPointLineString(feature,that);break;case"MultiLineString":geoJSON.multiLineStringPolygon(feature,that);break;case"Polygon":geoJSON.multiLineStringPolygon(feature,that);break;case"MultiPolygon":geoJSON.multiPolygon(feature,that);break;case"GeometryCollection":geoJSON.geometryCollection(feature,that);break}}i++}};exports.bbox=function(){var x1,y1,x2,y2;switch(arguments.length){case 1:x1=arguments[0][0][0];y1=arguments[0][0][1];x2=arguments[0][1][0];y2=arguments[0][1][1];break;case 2:x1=arguments[0][0];y1=arguments[0][1];x2=arguments[1][0];y2=arguments[1][1];break;case 4:x1=arguments[0];y1=arguments[1];x2=arguments[2];y2=arguments[3];break}return this.search({x:x1,y:y1,w:x2-x1,h:y2-y1})}},{"./rectangle":3}],2:[function(_dereq_,module,exports){"use strict";var RTree=_dereq_("./rtree");var geojson=_dereq_("./geojson");RTree.prototype.bbox=geojson.bbox;RTree.prototype.geoJSON=geojson.geoJSON;RTree.Rectangle=_dereq_("./rectangle");module.exports=RTree},{"./geojson":1,"./rectangle":3,"./rtree":4}],3:[function(_dereq_,module,exports){"use strict";function Rectangle(x,y,w,h){if(!(this instanceof Rectangle)){return new Rectangle(x,y,w,h)}var x2,y2,p;if(x.x){w=x.w;h=x.h;y=x.y;if(x.w!==0&&!x.w&&x.x2){w=x.x2-x.x;h=x.y2-x.y}else{w=x.w;h=x.h}x=x.x;x2=x+w;y2=y+h;p=h+w?false:true}else{x2=x+w;y2=y+h;p=h+w?false:true}this.x1=this.x=function(){return x};this.y1=this.y=function(){return y};this.x2=function(){return x2};this.y2=function(){return y2};this.w=function(){return w};this.h=function(){return h};this.p=function(){return p};this.overlap=function(a){if(p||a.p()){return x<=a.x2()&&x2>=a.x()&&y<=a.y2()&&y2>=a.y()}return x<a.x2()&&x2>a.x()&&y<a.y2()&&y2>a.y()};this.expand=function(a){var nx,ny;var ax=a.x();var ay=a.y();var ax2=a.x2();var ay2=a.y2();if(x>ax){nx=ax}else{nx=x}if(y>ay){ny=ay}else{ny=y}if(x2>ax2){w=x2-nx}else{w=ax2-nx}if(y2>ay2){h=y2-ny}else{h=ay2-ny}x=nx;y=ny;return this}}Rectangle.overlapRectangle=function(a,b){if(a.h===0&&a.w===0||b.h===0&&b.w===0){return a.x<=b.x+b.w&&a.x+a.w>=b.x&&a.y<=b.y+b.h&&a.y+a.h>=b.y}else{return a.x<b.x+b.w&&a.x+a.w>b.x&&a.y<b.y+b.h&&a.y+a.h>b.y}};Rectangle.containsRectangle=function(a,b){return a.x+a.w<=b.x+b.w&&a.x>=b.x&&a.y+a.h<=b.y+b.h&&a.y>=b.y};Rectangle.expandRectangle=function(a,b){var nx,ny;var axw=a.x+a.w;var bxw=b.x+b.w;var ayh=a.y+a.h;var byh=b.y+b.h;if(a.x>b.x){nx=b.x}else{nx=a.x}if(a.y>b.y){ny=b.y}else{ny=a.y}if(axw>bxw){a.w=axw-nx}else{a.w=bxw-nx}if(ayh>byh){a.h=ayh-ny}else{a.h=byh-ny}a.x=nx;a.y=ny;return a};Rectangle.makeMBR=function(nodes,rect){if(!nodes.length){return{x:0,y:0,w:0,h:0}}rect=rect||{};rect.x=nodes[0].x;rect.y=nodes[0].y;rect.w=nodes[0].w;rect.h=nodes[0].h;for(var i=1,len=nodes.length;i<len;i++){Rectangle.expandRectangle(rect,nodes[i])}return rect};Rectangle.squarifiedRatio=function(l,w,fill){var lperi=(l+w)/2;var larea=l*w;var lgeo=larea/(lperi*lperi);return larea*fill/lgeo};module.exports=Rectangle},{}],4:[function(_dereq_,module,exports){"use strict";var rectangle=_dereq_("./rectangle");function RTree(width){if(!(this instanceof RTree)){return new RTree(width)}var minWidth=3;var maxWidth=6;if(!isNaN(width)){minWidth=Math.floor(width/2);maxWidth=width}var rootTree={x:0,y:0,w:0,h:0,id:"root",nodes:[]};this.root=rootTree;var flatten=function(tree){var todo=tree.slice();var done=[];var current;while(todo.length){current=todo.pop();if(current.nodes){todo=todo.concat(current.nodes)}else if(current.leaf){done.push(current)}}return done};var removeSubtree=function(rect,obj,root){var hitStack=[];var countStack=[];var retArray=[];var currentDepth=1;var tree,i,ltree;if(!rect||!rectangle.overlapRectangle(rect,root)){return retArray}var retObj={x:rect.x,y:rect.y,w:rect.w,h:rect.h,target:obj};countStack.push(root.nodes.length);hitStack.push(root);while(hitStack.length>0){tree=hitStack.pop();i=countStack.pop()-1;if("target"in retObj){while(i>=0){ltree=tree.nodes[i];if(rectangle.overlapRectangle(retObj,ltree)){if(retObj.target&&"leaf"in ltree&&ltree.leaf===retObj.target||!retObj.target&&("leaf"in ltree||rectangle.containsRectangle(ltree,retObj))){if("nodes"in ltree){retArray=flatten(tree.nodes.splice(i,1))}else{retArray=tree.nodes.splice(i,1)}rectangle.makeMBR(tree.nodes,tree);delete retObj.target;break}else if("nodes"in ltree){currentDepth++;countStack.push(i);hitStack.push(tree);tree=ltree;i=ltree.nodes.length}}i--}}else if("nodes"in retObj){tree.nodes.splice(i+1,1);if(tree.nodes.length>0){rectangle.makeMBR(tree.nodes,tree)}for(var t=0;t<retObj.nodes.length;t++){insertSubtree(retObj.nodes[t],tree)}retObj.nodes=[];if(hitStack.length===0&&tree.nodes.length<=1){retObj.nodes=searchSubtree(tree,true,retObj.nodes,tree);tree.nodes=[];hitStack.push(tree);countStack.push(1)}else if(hitStack.length>0&&tree.nodes.length<minWidth){retObj.nodes=searchSubtree(tree,true,retObj.nodes,tree);tree.nodes=[]}else{delete retObj.nodes}}else{rectangle.makeMBR(tree.nodes,tree)}currentDepth-=1}return retArray};var chooseLeafSubtree=function(rect,root){var bestChoiceIndex=-1;var bestChoiceStack=[];var bestChoiceArea;var first=true;bestChoiceStack.push(root);var nodes=root.nodes;while(first||bestChoiceIndex!==-1){if(first){first=false}else{bestChoiceStack.push(nodes[bestChoiceIndex]);nodes=nodes[bestChoiceIndex].nodes;bestChoiceIndex=-1}for(var i=nodes.length-1;i>=0;i--){var ltree=nodes[i];if("leaf"in ltree){bestChoiceIndex=-1;break}var oldLRatio=rectangle.squarifiedRatio(ltree.w,ltree.h,ltree.nodes.length+1);var nw=Math.max(ltree.x+ltree.w,rect.x+rect.w)-Math.min(ltree.x,rect.x);var nh=Math.max(ltree.y+ltree.h,rect.y+rect.h)-Math.min(ltree.y,rect.y);var lratio=rectangle.squarifiedRatio(nw,nh,ltree.nodes.length+2);if(bestChoiceIndex<0||Math.abs(lratio-oldLRatio)<bestChoiceArea){bestChoiceArea=Math.abs(lratio-oldLRatio);bestChoiceIndex=i}}}return bestChoiceStack};var linearSplit=function(nodes){var n=pickLinear(nodes);while(nodes.length>0){pickNext(nodes,n[0],n[1])}return n};var pickNext=function(nodes,a,b){var areaA=rectangle.squarifiedRatio(a.w,a.h,a.nodes.length+1);var areaB=rectangle.squarifiedRatio(b.w,b.h,b.nodes.length+1);var highAreaDelta;var highAreaNode;var lowestGrowthGroup;for(var i=nodes.length-1;i>=0;i--){var l=nodes[i];var newAreaA={};newAreaA.x=Math.min(a.x,l.x);newAreaA.y=Math.min(a.y,l.y);newAreaA.w=Math.max(a.x+a.w,l.x+l.w)-newAreaA.x;newAreaA.h=Math.max(a.y+a.h,l.y+l.h)-newAreaA.y;var changeNewAreaA=Math.abs(rectangle.squarifiedRatio(newAreaA.w,newAreaA.h,a.nodes.length+2)-areaA);var newAreaB={};newAreaB.x=Math.min(b.x,l.x);newAreaB.y=Math.min(b.y,l.y);newAreaB.w=Math.max(b.x+b.w,l.x+l.w)-newAreaB.x;newAreaB.h=Math.max(b.y+b.h,l.y+l.h)-newAreaB.y;var changeNewAreaB=Math.abs(rectangle.squarifiedRatio(newAreaB.w,newAreaB.h,b.nodes.length+2)-areaB);if(!highAreaNode||!highAreaDelta||Math.abs(changeNewAreaB-changeNewAreaA)<highAreaDelta){highAreaNode=i;highAreaDelta=Math.abs(changeNewAreaB-changeNewAreaA);lowestGrowthGroup=changeNewAreaB<changeNewAreaA?b:a}}var tempNode=nodes.splice(highAreaNode,1)[0];if(a.nodes.length+nodes.length+1<=minWidth){a.nodes.push(tempNode);rectangle.expandRectangle(a,tempNode)}else if(b.nodes.length+nodes.length+1<=minWidth){b.nodes.push(tempNode);rectangle.expandRectangle(b,tempNode)}else{lowestGrowthGroup.nodes.push(tempNode);rectangle.expandRectangle(lowestGrowthGroup,tempNode)}};var pickLinear=function(nodes){var lowestHighX=nodes.length-1;var highestLowX=0;var lowestHighY=nodes.length-1;var highestLowY=0;var t1,t2;for(var i=nodes.length-2;i>=0;i--){var l=nodes[i];if(l.x>nodes[highestLowX].x){highestLowX=i}else if(l.x+l.w<nodes[lowestHighX].x+nodes[lowestHighX].w){lowestHighX=i}if(l.y>nodes[highestLowY].y){highestLowY=i}else if(l.y+l.h<nodes[lowestHighY].y+nodes[lowestHighY].h){lowestHighY=i}}var dx=Math.abs(nodes[lowestHighX].x+nodes[lowestHighX].w-nodes[highestLowX].x);var dy=Math.abs(nodes[lowestHighY].y+nodes[lowestHighY].h-nodes[highestLowY].y);if(dx>dy){if(lowestHighX>highestLowX){t1=nodes.splice(lowestHighX,1)[0];t2=nodes.splice(highestLowX,1)[0]}else{t2=nodes.splice(highestLowX,1)[0];t1=nodes.splice(lowestHighX,1)[0]}}else{if(lowestHighY>highestLowY){t1=nodes.splice(lowestHighY,1)[0];t2=nodes.splice(highestLowY,1)[0]}else{t2=nodes.splice(highestLowY,1)[0];t1=nodes.splice(lowestHighY,1)[0]}}return[{x:t1.x,y:t1.y,w:t1.w,h:t1.h,nodes:[t1]},{x:t2.x,y:t2.y,w:t2.w,h:t2.h,nodes:[t2]}]};var attachData=function(node,moreTree){node.nodes=moreTree.nodes;node.x=moreTree.x;node.y=moreTree.y;node.w=moreTree.w;node.h=moreTree.h;return node};var searchSubtree=function(rect,returnNode,returnArray,root){var hitStack=[];if(!rectangle.overlapRectangle(rect,root)){return returnArray}hitStack.push(root.nodes);while(hitStack.length>0){var nodes=hitStack.pop();for(var i=nodes.length-1;i>=0;i--){var ltree=nodes[i];if(rectangle.overlapRectangle(rect,ltree)){if("nodes"in ltree){hitStack.push(ltree.nodes)}else if("leaf"in ltree){if(!returnNode){returnArray.push(ltree.leaf)}else{returnArray.push(ltree)}}}}}return returnArray};var insertSubtree=function(node,root){var bc;if(root.nodes.length===0){root.x=node.x;root.y=node.y;root.w=node.w;root.h=node.h;root.nodes.push(node);return}var treeStack=chooseLeafSubtree(node,root);var retObj=node;var pbc;while(treeStack.length>0){if(bc&&"nodes"in bc&&bc.nodes.length===0){pbc=bc;bc=treeStack.pop();for(var t=0;t<bc.nodes.length;t++){if(bc.nodes[t]===pbc||bc.nodes[t].nodes.length===0){bc.nodes.splice(t,1);break}}}else{bc=treeStack.pop()}if("leaf"in retObj||"nodes"in retObj||Array.isArray(retObj)){if(Array.isArray(retObj)){for(var ai=0;ai<retObj.length;ai++){rectangle.expandRectangle(bc,retObj[ai])}bc.nodes=bc.nodes.concat(retObj)}else{rectangle.expandRectangle(bc,retObj);bc.nodes.push(retObj)}if(bc.nodes.length<=maxWidth){retObj={x:bc.x,y:bc.y,w:bc.w,h:bc.h}}else{var a=linearSplit(bc.nodes);retObj=a;if(treeStack.length<1){bc.nodes.push(a[0]);treeStack.push(bc);retObj=a[1]}}}else{rectangle.expandRectangle(bc,retObj);retObj={x:bc.x,y:bc.y,w:bc.w,h:bc.h}}}};this.insertSubtree=insertSubtree;this.getTree=function(){return rootTree};this.setTree=function(newTree,where){if(!where){where=rootTree}return attachData(where,newTree)};this.search=function(rect,returnNode,returnArray){returnArray=returnArray||[];return searchSubtree(rect,returnNode,returnArray,rootTree)};var removeArea=function(rect){var numberDeleted=1,retArray=[],deleted;while(numberDeleted>0){deleted=removeSubtree(rect,false,rootTree);numberDeleted=deleted.length;retArray=retArray.concat(deleted)}return retArray};var removeObj=function(rect,obj){var retArray=removeSubtree(rect,obj,rootTree);return retArray};this.remove=function(rect,obj){if(!obj||typeof obj==="function"){return removeArea(rect,obj)}else{return removeObj(rect,obj)}};this.insert=function(rect,obj){var retArray=insertSubtree({x:rect.x,y:rect.y,w:rect.w,h:rect.h,leaf:obj},rootTree);return retArray}}RTree.prototype.toJSON=function(printing){return JSON.stringify(this.root,false,printing)};RTree.fromJSON=function(json){var rt=new RTree;rt.setTree(JSON.parse(json));return rt};module.exports=RTree;if(typeof Array.isArray!=="function"){Array.isArray=function(a){return typeof a==="object"&&{}.toString.call(a)==="[object Array]"}}},{"./rectangle":3}]},{},[2])(2)});

package/js/plugins/controlPanel.js

@@ -0,0 +1,395 @@
+Genoverse.Plugins.controlPanel = function (pluginConf) {
+  this.controls = [
+    // Scroll left/right
+    {
+      name    : 'Scroll left and right by pressing and holding these buttons',
+      buttons : [{
+        name    : 'Scroll left',
+        icon    : '<i class="fas fa-chevron-left"></i>',
+        'class' : 'gv-scroll-left'
+      }, {
+        name    : 'Scroll right',
+        icon    : '<i class="fas fa-chevron-right"></i>',
+        'class' : 'gv-scroll-right'
+      }],
+      init: function (browser) {
+        var el = $(this);
+
+        el.find('.gv-scroll-left, .gv-scroll-right').on({
+          mousedown : function () { browser.startDragScroll(); },
+          mouseup   : function () { browser.stopDragScroll();  }
+        });
+
+        el.find('.gv-scroll-left').mousehold(50, function () {
+          browser.move(browser.scrollDelta);
+        });
+
+        el.find('.gv-scroll-right').mousehold(50, function () {
+          browser.move(-browser.scrollDelta);
+        });
+      }
+    },
+
+    // Zoom in/out
+    {
+      name    : 'Zoom-in and zoom-out',
+      buttons : [{
+        name    : 'Zoom in',
+        icon    : '<i class="fas fa-search-plus"></i>',
+        'class' : 'gv-zoom-in',
+        action  : function (browser) { browser.zoomIn(); }
+      }, {
+        name    : 'Zoom out',
+        icon    : '<i class="fas fa-search-minus"></i>',
+        'class' : 'gv-zoom-out',
+        action  : function (browser) { browser.zoomOut(); }
+      }]
+    },
+
+    // Toogle drag action
+    {
+      name    : 'Toggle your mouse drag action between scroll left/right and select region',
+      buttons : [{
+        name    : 'Mouse drag action to scroll the browser left or right',
+        icon    : '<i class="fas fa-arrows-alt-h"></i>',
+        'class' : 'gv-drag-scroll',
+        action  : function (browser) {
+          browser.setDragAction('scroll');
+          $(this).addClass('gv-active').siblings().removeClass('gv-active');
+        }
+      }, {
+        name    : 'Mouse drag action to select a region',
+        icon    : '<i></i>',
+        'class' : 'gv-drag-select',
+        action  : function (browser) {
+          browser.setDragAction('select');
+          $(this).addClass('gv-active').siblings().removeClass('gv-active');
+        }
+      }],
+      init: function (browser) {
+        $(this).find('.gv-drag-' + browser.dragAction).addClass('gv-active').siblings().removeClass('gv-active');
+      }
+    },
+
+    // Toogle wheel action
+    {
+      name    : 'Toggle your mouse wheel action between zoom in/out and default page scroll',
+      buttons : [{
+        name    : 'Mouse wheel action to scroll the page up and down',
+        icon    : '<i class="fas fa-arrows-alt-v"></i>',
+        'class' : 'gv-wheel-off',
+        action  : function (browser) {
+          browser.setWheelAction('off');
+          $(this).addClass('gv-active').siblings().removeClass('gv-active');
+        }
+      }, {
+        name    : 'Mouse wheel to zoom in and out',
+        icon    : '&#177;',
+        'class' : 'gv-wheel-zoom',
+        action  : function (browser) {
+          browser.setWheelAction('zoom');
+          $(this).addClass('gv-active').siblings().removeClass('gv-active');
+        }
+      }],
+      init: function (browser) {
+        $(this).find('.gv-wheel-' + browser.wheelAction).addClass('gv-active').siblings().removeClass('gv-active');
+      }
+    }
+  ];
+
+  if (this.saveable) {
+    this.controls.push({
+      icon   : '<i class="fas fa-undo"></i>',
+      name   : 'Reset tracks and configuration',
+      action : function (browser) { browser.resetConfig(); }
+    });
+  }
+
+  this.on({
+    beforeInit: function () {
+      var browser = this;
+
+      if (!this.tracksLibrary) {
+        this.tracksLibrary = $.grep(this.tracks, function (track) { return track.prototype.name; });
+      }
+
+      var panel = $(
+        '<table cellspacing=0 cellpadding=0 class="gv">' +
+        '  <tr>' +
+        '    <td class="gv-panel gv-panel-left"></td>' +
+        '    <td class="gv-canvas-container"></td>' +
+        '    <td class="gv-panel gv-panel-right"></td>' +
+        '  </tr>' +
+        '</table>'
+      ).appendTo(this.container).find('.gv-panel-right');
+
+      this.controlPanel   = panel;
+      this.superContainer = this.container;
+      this.container      = $('.gv-canvas-container', this.container);
+
+      for (var i = 0; i < browser.controls.length; i++) {
+        (function (control) {
+          var buttonSet = $('<div class="gv-button-set">').attr('title', control.name).appendTo(browser.superContainer.find('.gv-panel-right'));
+          var buttons   = control.buttons || [ control ];
+
+          $.each(buttons, function (j, button) {
+            var el = $('<button>' + button.icon + '</button>').addClass(button.class).attr('title', button.name).appendTo(buttonSet);
+
+            if (button.action) {
+              el.on('click', function () {
+                button.action.call(this, browser);
+              });
+            }
+
+            if (button.init && button !== control) {
+              button.init.call(el[0], browser);
+            }
+          });
+
+          if (control.init) {
+            control.init.call(buttonSet, browser);
+          }
+        }(browser.controls[i]));
+      }
+
+      this.superContainer.width(this.width);
+
+      // ESC key to toggle crosshair select to drag mode and close menus
+      $(document).on('keydown', function (e) {
+        if (e.keyCode === 27) {
+          if (panel.find('button.gv-drag-select').hasClass('gv-active')) {
+            panel.find('button.gv-drag-scroll').trigger('click');
+          }
+
+          $('.gv-menu .gv-close').trigger('click');
+        }
+      });
+    },
+
+    afterInit: function () {
+      var browser      = this;
+      var tracksButton = $('<button class="gv-tracks-library-button" title="Tracks menu"><i class="fas fa-bars"></i> Tracks</button>').on('click', function () {
+        var button = this;
+
+        function getTrackTags(track, tags) {
+          if (track.constructor && track.constructor.ancestor && track.constructor.ancestor.prototype) {
+            tags = getTrackTags(track.constructor.ancestor.prototype, tags.concat(track.constructor.ancestor.prototype.tags || []));
+          }
+
+          return tags;
+        }
+
+        if ($(this).hasClass('gv-active')) {
+          $('.gv-menu.gv-tracks-menu .gv-close').trigger('click');
+          $(this).removeClass('gv-active');
+        } else {
+          var menu = $(this).data('menu');
+
+          if (menu) {
+            menu.show();
+          } else {
+            menu = browser.makeMenu({
+              'Currently enabled tracks:'             : 'Available tracks:',
+              '<div class="gv-current-tracks"></div>' : '<input placeholder="Search"><div class="gv-available-tracks"></div>'
+            }).addClass('gv-tracks-menu');
+
+            $('input[placeholder=Search]', menu).on('keyup', function () {
+              var str = this.value.toLowerCase();
+
+              $('.gv-tracks-library-item', menu).each(function () {
+                var track = $(this).data('track');
+                var match = false;
+
+                if (track.name && track.name.toLowerCase().indexOf(str) >= 0) {
+                  match = true;
+                } else {
+                  var tags = getTrackTags(track, []).concat(track.tags || []);
+
+                  for (var i = 0; i < tags.length; i++) {
+                    if (tags[i].toLowerCase().indexOf(str) >= 0) {
+                      match = true;
+                      break;
+                    }
+                  }
+                }
+
+                $(this)[match ? 'removeClass' : 'addClass']('gv-hide');
+              });
+
+              $('.gv-tracks-library-category', menu).each(function () {
+                var visibleTracks = $(this).children('.gv-tracks-library-item:not(.gv-hide)');
+
+                $(this)[visibleTracks.length ? 'removeClass' : 'addClass']('gv-hide');
+              });
+            });
+
+            $('.gv-close', menu).on('click', function () {
+              $(button).removeClass('gv-active');
+            });
+
+            var availableTracks = $('.gv-available-tracks', menu);
+            var currentTracks   = $('.gv-current-tracks',   menu).before('<div class="gv-current-tracks-instructions">Drag and drop to reorder</div>').data({
+              reload     : function () { $(this).empty().data('listTracks')(); },
+              listTracks : function () {
+                for (var i = 0; i < browser.tracks.length; i++) {
+                  if (browser.tracks[i].name && !(browser.tracks[i].removable === false && browser.tracks[i].unsortable) && !browser.tracks[i].parentTrack && !browser.tracks[i].lockToTrack) {
+                    (function (track) {
+                      var el = $('<div class="gv-tracks-menu-track">')
+                        .append('<span class="gv-tracks-menu-track-name" title="' + track.name + '">' + track.defaultName + '</span>')
+                        .appendTo(currentTracks)
+                        .data('track', track)
+                        .addClass(track.unsortable ? 'gv-unsortable' : '');
+
+                      if (track.removable === false) {
+                        el.prepend('<i class="gv-remove-track gv-menu-button fas fa-circle">');
+                      } else {
+                        el.prepend($('<i class="gv-remove-track gv-menu-button fas fa-times-circle">').on('click', function () { track.remove(); }));
+                      }
+
+                      var trackNameEl = el.find('.gv-tracks-menu-track-name').tipsy({ gravity: 'w', trigger: 'manual' }).on('mouseenter', function () {
+                        var tip = $(this).tipsy('show').data('tipsy').$tip;
+
+                        if (tip) {
+                          tip.css('zIndex', 1002);
+                        }
+                      }).on('mouseleave', function () {
+                        $(this).tipsy('hide');
+                      });
+
+                      if (track.name === track.defaultName) {
+                        trackNameEl.tipsy('disable');
+                      }
+                    }(browser.tracks[i]));
+                  }
+                }
+              }
+            }).sortable({
+              items  : 'div:not(.gv-unsortable)',
+              cursor : 'move',
+              axis   : 'y',
+              handle : 'span',
+              update : $.proxy(browser.updateTrackOrder, browser),
+              start  : function () {
+                currentTracks.find('.gv-tracks-menu-track-name').each(function () { $(this).tipsy('hide').tipsy('disable'); });
+              },
+              stop: function () {
+                currentTracks.find('.gv-tracks-menu-track-name').each(function () { $(this).tipsy('enable'); });
+              }
+            });
+
+            currentTracks.data('listTracks')();
+
+            if (browser.saveable) {
+              $('<div class="gv-tracks-menu-reset gv-menu-button"><i class="fas fa-undo"></i> Reset tracks and configuration</div>').insertAfter(currentTracks).on('click', function (e) {
+                e.preventDefault();
+                browser.resetConfig();
+              });
+            }
+
+            if (browser.tracksLibrary && browser.tracksLibrary.length) {
+              var tracksLibraryCategories = browser.tracksLibrary.filter(function (track) {
+                return track.prototype.name && track.prototype.removable !== false;
+              }).reduce(
+                function (acc, track) {
+                  var categoryName = track.prototype.category || '';
+
+                  acc[categoryName] = acc[categoryName] || [];
+                  acc[categoryName].push([ track.prototype.name.toLowerCase(), track ]);
+
+                  return acc;
+                },
+                {}
+              );
+
+              var tracksLibraryCategoryOrder = ((pluginConf && pluginConf.tracksLibraryCategoryOrder) || []).reduce(
+                function (acc, categoryName, i) {
+                  acc[categoryName] = i + 1;
+                  return acc;
+                },
+                {}
+              );
+
+              Object.keys(tracksLibraryCategories).sort(function (a, b) {
+                return (Boolean(b) - Boolean(a)) || (tracksLibraryCategoryOrder[a] - tracksLibraryCategoryOrder[b]) || a.localeCompare(b);
+              }).forEach(function (categoryName, i, allCategoryNames) {
+                var parentEl = (
+                  allCategoryNames.length > 1
+                    ? $('<div class="gv-tracks-library-category">').append(
+                      $('<div class="gv-tracks-library-category-header">').html(categoryName || 'Other')
+                    ).appendTo(availableTracks)
+                    : availableTracks
+                );
+
+                tracksLibraryCategories[categoryName].sort(function (a, b) {
+                  return a[0].localeCompare(b[0]);
+                }).forEach(
+                  function (row) {
+                    var track = row[1];
+
+                    $('<div class="gv-tracks-library-item">').append(
+                      $('<i class="gv-add-track gv-menu-button fas fa-plus-circle">').on('click', function () {
+                        browser.trackIds = browser.trackIds || {};
+                        browser.trackIds[track.prototype.id] = browser.trackIds[track.prototype.id] || 1;
+
+                        browser.addTrack(track.extend({ id: track.prototype.id + (browser.tracksById[track.prototype.id] ? browser.trackIds[track.prototype.id]++ : '') }));
+                      })
+                    ).append('<span>' + track.prototype.name + '</span>').appendTo(parentEl).data('track', track.prototype);
+                  }
+                );
+              });
+            }
+
+            menu.css({ left: '50%', marginLeft: menu.width() / -2 });
+
+            $(this).data('menu', menu);
+          }
+
+          $(this).addClass('gv-active');
+        }
+      });
+
+      this.labelContainer.prepend(
+        $('<li class="gv-unsortable">').append(
+          $('<div class="gv-button-set" title="Tracks menu">').append(tracksButton)
+        )
+      );
+    },
+
+    afterAddDomElements: function () {
+      this.wrapper.after('<div class="gv-powered-by">Powered by <a target="_blank" href="https://wtsi-web.github.io/Genoverse/">Genoverse</a></div>');
+      this.superContainer.find('.gv-panel-left').append(this.labelContainer);
+    },
+
+    'afterAddTracks afterRemoveTracks': function () {
+      var currentTracks = this.superContainer.find('.gv-tracks-menu .gv-current-tracks');
+
+      if (currentTracks.length) {
+        currentTracks.data('reload').call(currentTracks);
+      }
+    }
+  });
+
+  this.on({
+    afterSetName: function (name) {
+      var track = this.track;
+
+      if (track && track.browser) {
+        var menu = track.browser.superContainer.find('.gv-tracks-library-button').data('menu');
+
+        if (menu) {
+          menu.find('.gv-tracks-menu-track').filter(function () {
+            return $(this).data('track') === track;
+          }).children('.gv-tracks-menu-track-name').attr('title', name).each(function () {
+            if (name === track.defaultName) {
+              $(this).tipsy('hide').tipsy('disable');
+            } else {
+              $(this).tipsy('enable');
+            }
+          });
+        }
+      }
+    }
+  }, 'tracks');
+};
+
+Genoverse.Plugins.controlPanel.requires = 'karyotype';

package/js/plugins/fileDrop.js

@@ -0,0 +1,62 @@
+Genoverse.Plugins.fileDrop = function () {
+  this.on('afterInit', function () {
+    var browser = this;
+    var wrapper = this.wrapper;
+
+    $(window).on('dragenter', function (e) {
+      var dataTransfer = e.originalEvent.dataTransfer;
+
+      if (dataTransfer && dataTransfer.types && (dataTransfer.types[0] === 'Files' || dataTransfer.types[1] === 'Files' || dataTransfer.types[2] === 'Files') && !$('.gv-file-drop-total-overlay').length) {
+        var fileDropDiv      = $('<div class="gv-file-drop">').appendTo(wrapper);
+        var totalDropOverlay = $('<div class="gv-file-drop-total-overlay">').prependTo('body');
+
+        var dragleave = function () {
+          fileDropDiv.remove();
+          totalDropOverlay.remove();
+        };
+
+        totalDropOverlay.on('dragenter', function (ev) { ev.preventDefault(); ev.stopPropagation(); });
+        totalDropOverlay.on('dragover',  function (ev) { ev.preventDefault(); ev.stopPropagation(); });
+        totalDropOverlay.on('dragleave', dragleave);
+        totalDropOverlay.on('drop', function (ev) {
+          dragleave();
+          ev.preventDefault();
+          ev.stopPropagation();
+
+          // Sort in order to ensure that .bam files are before their .bam.bai files
+          var files = $.map(ev.originalEvent.dataTransfer.files, function (f) { return f; }).sort(function (a, b) { return a.name.localeCompare(b.name); });
+
+          for (var i = 0; i < files.length; i++) {
+            var file  = files[i];
+            var parts = file.name.split('.').reverse();
+            var gz    = parts[0] === 'gz';
+            var ext   = parts[gz ? 1 : 0];
+            var track = Genoverse.Track.File[ext.toUpperCase()];
+            var indexFile;
+
+            if (typeof track === 'undefined') {
+              return;
+            }
+
+            if (track.prototype.indexExt && (files[i + 1] || {}).name === file.name + track.prototype.indexExt) {
+              indexFile = files[++i];
+            }
+
+            track = track.extend({
+              name      : file.name,
+              info      : 'Local file `' + file.name + '`, size: ' + file.size + ' bytes',
+              isLocal   : true,
+              dataFile  : file,
+              indexFile : indexFile,
+              gz        : gz
+            });
+
+            browser.addTrack(track, browser.tracks.length - 1);
+          }
+
+          return false;
+        });
+      }
+    });
+  });
+};

package/js/plugins/focusRegion.js

@@ -0,0 +1,12 @@
+Genoverse.Plugins.focusRegion = function () {
+  this.controls.push({
+    icon    : '<i class="fas fa-map-marker-alt"></i>',
+    'class' : 'gv-button-large',
+    name    : 'Reset focus to ' + (this.focusRegion && this.focusRegion.name ? this.focusRegion.name : this.chr + ':' + this.start + '-' + this.end),
+    action  : function (browser) { browser.moveTo(browser.focusRegion.chr, browser.focusRegion.start, browser.focusRegion.end, true); },
+    init    : function (browser) { browser.focusRegion = browser.focusRegion || { chr: browser.chr, start: browser.start, end: browser.end }; }
+  });
+};
+
+Genoverse.Plugins.focusRegion.requires = 'controlPanel';
+Genoverse.Plugins.focusRegion.noCSS    = true;

package/js/plugins/fullscreen.js

@@ -0,0 +1,77 @@
+Genoverse.Plugins.fullscreen = function () {
+  var genoverse   = this;
+  var supported   = true;
+  var eventName   = 'fullscreenchange';  // All the browsers have different names
+  var elemName    = 'fullscreenElement'; // ... even the capitalisation varies!
+  var requestName = 'requestFullscreen';
+  var cancelName  = 'exitFullscreen';
+
+  if (document.onmsfullscreenchange || document.onmsfullscreenchange === null) {
+    // We need the IE11 version of this to work; IE9-10 have the actions but not the events.
+    // The key must be present, i.e. value may be null but it must not return undefined
+    eventName   = 'MSFullscreenChange';
+    elemName    = 'msFullscreenElement';
+    cancelName  = 'msExitFullscreen';
+    requestName = 'msRequestFullscreen';
+  } else if (document.body.mozRequestFullScreen) {
+    eventName   = 'mozfullscreenchange';
+    elemName    = 'mozFullScreenElement';
+    cancelName  = 'mozCancelFullScreen';
+    requestName = 'mozRequestFullScreen';
+  } else if (document.body.webkitRequestFullscreen) {
+    eventName   = 'webkitfullscreenchange';
+    elemName    = 'webkitFullscreenElement';
+    cancelName  = 'webkitCancelFullScreen';
+    requestName = 'webkitRequestFullscreen';
+  } else if (!document.onfullscreenchange) {
+    supported = false;
+  }
+
+  genoverse.fullscreenVars = {
+    eventName   : eventName,
+    elemName    : elemName,
+    cancelName  : cancelName,
+    requestName : requestName,
+
+    enterEvent: function (browser) {
+      browser.preFullscreenWidth = browser.superContainer.width();
+      browser.superContainer.addClass('gv-fullscreen');
+      browser.setWidth(window.innerWidth);
+      browser.controlPanel.find('.gv-fullscreen-button .fas').removeClass('fa-expand-arrows-alt').addClass('fa-compress-arrows-alt');
+    },
+
+    exitEvent: function (browser) {
+      if (browser.superContainer.hasClass('gv-fullscreen')) {
+        browser.superContainer.removeClass('gv-fullscreen');
+        browser.setWidth(browser.preFullscreenWidth);
+        browser.controlPanel.find('.gv-fullscreen-button .fas').removeClass('fa-compress-arrows-alt').addClass('fa-expand-arrows-alt');
+      }
+    },
+
+    eventListener: function () {
+      if (!genoverse.superContainer.is(document[genoverse.fullscreenVars.elemName])) {
+        genoverse.fullscreenVars.exitEvent(genoverse);
+        document.removeEventListener(genoverse.fullscreenVars.eventName, genoverse.fullscreenVars.eventListener);
+      }
+    }
+  };
+
+  if (supported) {
+    genoverse.controls.push({
+      icon   : '<i class="fas fa-expand-arrows-alt"></i>',
+      class  : 'gv-fullscreen-button',
+      name   : 'Toggle fullscreen view',
+      action : function (browser) {
+        if (browser.superContainer.hasClass('gv-fullscreen')) {
+          document[browser.fullscreenVars.cancelName]();
+        } else {
+          document.addEventListener(browser.fullscreenVars.eventName, browser.fullscreenVars.eventListener);
+          browser.superContainer[0][browser.fullscreenVars.requestName]();
+          browser.fullscreenVars.enterEvent(browser);
+        }
+      }
+    });
+  }
+};
+
+Genoverse.Plugins.fullscreen.requires = 'controlPanel';