workaround to fix problem with pileup on openalyers

frontend-js/src/main/css/global.css

@@ -749,7 +749,7 @@ a.adminLink:hover {
 }
 
 .popover {
-    max-width: 600px;
+    max-width: 800px;
     min-width: 390px;
 }
 

frontend-js/src/main/js/map/window/AliasInfoWindow.js

@@ -355,7 +355,7 @@ AliasInfoWindow.prototype.createGenomicDiv = function () {
       if (genomeUrls.length === 0) {
         contentElement.innerHTML = "No reference genome data available on minerva platform";
       } else {
-        for (var i= 0; i < self.layoutAliases.length; i++) {
+        for (var i = 0; i < self.layoutAliases.length; i++) {
           if (globalGeneVariants[i].length > 0) {
             var vcfContent = self.createVcfString(globalGeneVariants[i]);
             pileupSource.push({
@@ -385,6 +385,40 @@ AliasInfoWindow.prototype.createGenomicDiv = function () {
           range: pileupRange,
           tracks: pileupSource
         });
+
+
+        //Code below is a workaround - for some reason on openlayers events bound by pileup are not working properly...
+        var zoomControls = $(".zoom-controls", contentElement);
+
+        zoomControls.children().hide();
+
+        var zoomIn = $('<input type="button" value="+" class="btn-zoom-in"/>');
+        zoomIn.on("click", function () {
+          var range = self.pileup.getRange();
+          var distDiff = parseInt((range.stop - range.start + 1) / 4);
+          range.start += distDiff;
+          range.stop -= distDiff;
+
+          self.pileup.setRange(range);
+        });
+        zoomIn.appendTo(zoomControls);
+        var zoomOut = $('<input type="button" value="-" class="btn-zoom-out"/>');
+        zoomOut.on("click", function () {
+          var range = self.pileup.getRange();
+          var distDiff = parseInt((range.stop - range.start) / 2);
+          if (distDiff === 0) {
+            distDiff = 1;
+          }
+          range.start -= distDiff;
+          range.stop += distDiff;
+          if (range.start < 0) {
+            range.stop -= range.start;
+            range.start = 0;
+          }
+
+          self.pileup.setRange(range);
+        });
+        zoomOut.appendTo(zoomControls);
       }
 
       return result;