Add overlappingAlpha concept

package.json

@@ -59,6 +59,7 @@
     "babel-preset-es2015-without-strict": "^0.0.4",
     "buffer-crc32": "^0.2.13",
     "clean-webpack-plugin": "^0.1.18",
+    "color": "^3.1.0",
     "copy-webpack-plugin": "4.1.1",
     "css-loader": "^0.28.10",
     "dgrid": "^1.1.0",

src/JBrowse/View/FeatureGlyph/AlignmentColoring.js

@@ -1,10 +1,19 @@
+const Color = cjsRequire('color')
+
 define( [
     'JBrowse/Util'
 ],
 function(Util) {
 
 var c = {
     colorAlignment(feature, score, glyph, track) {
+        var col = c.colorAlignment2.apply(null, arguments);
+        if(this.config.style.alphaBlend) {
+            return Color(col).alpha(this.config.style.alphaBlend).darken(0.1)
+        }
+        return col
+    },
+    colorAlignment2(feature, score, glyph, track) {
         var strand = feature.get('strand');
         if (Math.abs(strand) != 1 && strand != '+' && strand != '-') {
             return track.colorForBase('reference');

src/JBrowse/View/FeatureGlyph/PairedAlignment.js

@@ -3,14 +3,16 @@ define([
     'dojo/_base/array',
     'dojo/_base/lang',
     'JBrowse/View/FeatureGlyph/Alignment',
-    'JBrowse/View/FeatureGlyph/AlignmentColoring'
+    'JBrowse/View/FeatureGlyph/AlignmentColoring',
+    'JBrowse/Util'
 ],
 function(
     declare,
     array,
     lang,
     Alignment,
-    AlignmentColoring
+    AlignmentColoring,
+    Util
 ) {
 
 
@@ -21,19 +23,20 @@ clearFeat(context, fRect) {
         context.clearRect( Math.floor(fRect.l), fRect.t, Math.ceil(fRect.w), fRect.h );
 },
 renderFeature(context, fRect) {
+    const f = fRect.f
     this.clearFeat(context, fRect)
 
-    if (fRect.f.pairedFeature()) {
+    if (f.pairedFeature()) {
         this.renderConnector( context, fRect )
         this.renderSegments( context, fRect )
         if (fRect.w > 2) {
             if (fRect.viewInfo.scale > 0.2) {
-                this._drawMismatches( context, fRect, this._getMismatches( fRect.f.read1 ), fRect.f.read1 )
-                this._drawMismatches( context, fRect, this._getMismatches( fRect.f.read2 ), fRect.f.read2 )
+                this._drawMismatches( context, fRect, this._getMismatches( f.read1 ), f.read1 )
+                this._drawMismatches( context, fRect, this._getMismatches( f.read2 ), f.read2 )
             }
             else {
-                this._drawMismatches( context, fRect, this._getSkipsAndDeletions( fRect.f.read1 ), fRect.f.read1 )
-                this._drawMismatches( context, fRect, this._getSkipsAndDeletions( fRect.f.read2 ), fRect.f.read2 )
+                this._drawMismatches( context, fRect, this._getSkipsAndDeletions( f.read1 ), f.read1 )
+                this._drawMismatches( context, fRect, this._getSkipsAndDeletions( f.read2 ), f.read2 )
             }
         }
     } else {
@@ -42,20 +45,30 @@ renderFeature(context, fRect) {
 },
 
 renderSegments(context, fRect) {
-    this.renderBox(context, fRect.viewInfo, fRect.f.read1,  fRect.t, fRect.rect.h, fRect.f);
-    this.renderBox(context, fRect.viewInfo, fRect.f.read2,  fRect.t, fRect.rect.h, fRect.f);
+    const f = fRect.f
+    this.renderBox(context, fRect.viewInfo, f.read1,  fRect.t, fRect.rect.h, f);
+    this.renderBox(context, fRect.viewInfo, f.read2,  fRect.t, fRect.rect.h, f);
 },
 
 renderConnector(context, fRect) {
     // connector
-    var connectorColor = this.getStyle( fRect.f, 'connectorColor' );
+    const f = fRect.f
+    if(Util.intersect(f.read1.get('start'),f.read1.get('end'),f.read2.get('start'),f.read2.get('end'))) {
+        return
+    }
+    const s1 = f.read1.get('end')>f.read2.get('end')?f.read1.get('start'):f.read2.get('start')
+    const s2 = f.read1.get('start')>f.read2.get('start')? f.read2.get('end'):f.read1.get('end')
+    const block = fRect.viewInfo.block
+    const l = block.bpToX(s1)
+    const r = block.bpToX(s2)
+    var connectorColor = this.getStyle( f, 'connectorColor' );
     if (connectorColor) {
         context.fillStyle = connectorColor;
-        var connectorThickness = this.getStyle( fRect.f, 'connectorThickness' );
+        var connectorThickness = this.getStyle( f, 'connectorThickness' );
         context.fillRect(
-            fRect.rect.l, // left
+            l, // left
             Math.round(fRect.rect.t+(fRect.rect.h-connectorThickness)/2), // top
-            fRect.rect.w, // width
+            r-l, // width
             connectorThickness
         );
     }
@@ -65,7 +78,8 @@ _defaultConfig() {
     return this._mergeConfigs(dojo.clone( this.inherited(arguments) ), {
         style: {
             connectorColor: AlignmentColoring.connectorColor,
-            connectorThickness: 1
+            connectorThickness: 1,
+            alphaBlend: 0.8
         }
     });
 }

yarn.lock

@@ -1935,7 +1935,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1959,6 +1959,14 @@ color-string@^0.3.0:
   dependencies:
     color-name "^1.0.0"
 
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color@^0.11.0:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
@@ -1968,6 +1976,14 @@ color@^0.11.0:
     color-convert "^1.3.0"
     color-string "^0.3.0"
 
+color@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.0.tgz#d8e9fb096732875774c84bf922815df0308d0ffc"
+  integrity sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 colormin@^1.0.5:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
@@ -4283,6 +4299,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -7307,6 +7328,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
 single-line-log@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"