Set z-index of synteny highlights, sort Zmenu areas in reverse of rendering order (#1131)

* Set z-index of synteny highlights, sort Zmenus in reverse of rendering order

* Revert to pushing draggables onto panel areas

* Restrict area unshift to SyntenyImage panel

Author: twalsh-ebi

htdocs/components/15_ImageMap.js

@@ -289,7 +289,11 @@ Ensembl.Panel.ImageMap = Ensembl.Panel.Content.extend({
         $.each(this.coords, function (i) { c[rect[i]] = parseInt(this, 10); });
       }
 
-      panel.areas.push(c);
+      if (panel.id == 'SyntenyImage' && !(this.klass.drag || this.klass.vdrag)) {
+        panel.areas.unshift(c);
+      } else {
+        panel.areas.push(c);
+      }
 
       if (this.klass.drag || this.klass.vdrag) {
         // r = [ '#drag', image number, species number, species name, region, start, end, strand ]

modules/EnsEMBL/Draw/GlyphSet/Vsynteny.pm

@@ -643,6 +643,7 @@ sub draw_chromosome {
 
   my %coords;
 
+  my $highlight_z_index = 1;
   foreach my $box (@$highlights) {
     my $vc_start  = $box->{'start'} * $scale + $v_offset;
     my $vc_end    = $box->{'end'}   * $scale + $v_offset;
@@ -658,6 +659,7 @@ sub draw_chromosome {
     $self->push($self->Rect({
       'x'             => $vc_start,
       'y'             => $h_offset + $box->{'side'} * ($wid+4),
+      'z'             => $highlight_z_index,
       'width'         => $vc_end - $vc_start,
       'height'        => $wid,
       'colour'        => $box->{'col'},
@@ -668,6 +670,7 @@ sub draw_chromosome {
       'href'          => $box->{'href'},
       'zmenu'         => $box->{'zmenu'}
     }));
+    $highlight_z_index += 1;
 
     if ($box->{'marked'}==1 || $box->{'marked'}==-1) {
       $self->push($self->Rect({