Respect rgb colors in bedpe files. Fixes #1935

jrobinso · jrobinso · commit f92cdc2a9654 · 2025-02-18T22:31:57.000-08:00
diff --git a/dev/interact/bedpe-color.html b/dev/interact/bedpe-color.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <meta content="" name="description">
+    <meta content="" name="author">
+    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
+    <title>IGV - Dev</title>
+
+</head>
+
+<body>
+
+<h1>CTCF Loops</h1>
+
+<div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
+
+<script type="module">
+
+    import igv from "../../js";
+
+    var options =
+        {
+            genome: "hg38",
+            locus: "chr13:33,981,486-34,180,985",
+            tracks: [
+                {
+                   url: "../../test/data/bedpe/bedpe_with_colors.bedpe",
+                    type: "interact",
+                    format: "bedpe"
+                }
+            ]
+        };
+
+    var igvDiv = document.getElementById("igvDiv");
+
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser");
+            window.igvBrowser = browser;
+        })
+
+
+</script>
+
+</body>
+
+</html>
diff --git a/js/feature/interactionTrack.js b/js/feature/interactionTrack.js
@@ -60,7 +60,6 @@ class InteractionTrack extends TrackBase {
         showBlocks: true,
         blockHeight: 3,
         thickness: 1,
-        color: "rgb(180,25,137)",
         alpha: 0.02,
         logScale: true,
     }
@@ -74,11 +73,11 @@ class InteractionTrack extends TrackBase {
         super.init(config)
 
         // Backward compatibility hack, arcOrientation was previously a boolean, now a string
-        if(config.arcOrientation === false) {
+        if (config.arcOrientation === false) {
             this.arcOrientation = "DOWN"
-        } else if(config.arcOrientation === true) {
+        } else if (config.arcOrientation === true) {
             this.arcOrientation = "UP"
-        } else if(config.arcOrientation) {
+        } else if (config.arcOrientation) {
             this.arcOrientation = config.arcOrientation.toUpperCase()
         } else {
             this.arcOrientation = "UP"
@@ -141,7 +140,7 @@ class InteractionTrack extends TrackBase {
     }
 
     get supportsWholeGenome() {
-        return typeof this.featureSource.supportsWholeGenome === 'function' ? this.featureSource.supportsWholeGenome() : true;
+        return typeof this.featureSource.supportsWholeGenome === 'function' ? this.featureSource.supportsWholeGenome() : true
     }
 
     async getFeatures(chr, start, end) {
@@ -394,8 +393,17 @@ class InteractionTrack extends TrackBase {
                     // }
 
                     const counterClockwise = direction
-                    const color = feature.color || this.color
-                    ctx.strokeStyle = color
+
+                    let color
+                    if (typeof this.color === 'function') {
+                        color = this.color(feature)
+                    } else {
+                        color = this.color || feature.color || DEFAULT_ARC_COLOR
+                    }
+
+                    const strokeColor = this.config.useScore ? getAlphaColor(color, scoreShade(feature.score)) : color
+
+                    ctx.strokeStyle = strokeColor
                     ctx.lineWidth = feature.thickness || this.thickness || 1
 
                     if (true === ctx.isSVG) {
diff --git a/test/data/bedpe/bedpe_with_colors.bedpe b/test/data/bedpe/bedpe_with_colors.bedpe
@@ -0,0 +1,5 @@
+#columns color=11;thickness=12
+chr13	34129457	34132233	chr13	34146252	34151608	.	.	.	.	204,204,204	1.105
+chr13	34074145	34080582	chr13	34146252	34151608	.	.	.	.	255,165,0	0.678
+chr13	34033313	34041197	chr13	34146252	34151608	.	.	.	.	204,204,204	0.9400000000000001
+chr13	34002097	34003021	chr13	34146252	34151608	.	.	.	.	204,204,204	5
