Opacity of tracks based on a score/mappability

src/App.js

@@ -65,6 +65,7 @@ class App extends Component {
         showReads: true,
         showSoftClips: true,
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
         colorSchemes: getColorSchemesFromTracks(this.defaultViewTarget.tracks),
         mappingQualityCutoff: 0,
       },

src/components/CustomizationAccordion.js

@@ -197,6 +197,18 @@ class VisualizationOptions extends Component {
                           Color reads by mapping quality
                         </Label>
                       </FormGroup>
+                      <FormGroup check>
+                        <Label check>
+                          <Input
+                            type="checkbox"
+                            checked={visOptions.alphaReadsByMappingQuality}
+                            onChange={() =>
+                              toggleFlag("alphaReadsByMappingQuality")
+                            }
+                          />
+                          Transparency of reads by mapping quality
+                        </Label>
+                      </FormGroup>
                       <Form>
                         <Label className="mr-sm-2 " for="dataSourceSelect">
                           Mapping Quality Cutoff:

src/components/HeaderForm.js

@@ -129,7 +129,9 @@ function tracksEqual(curr, next) {
       curr_settings.mainPalette !== next_settings.mainPalette ||
       curr_settings.auxPalette !== next_settings.auxPalette ||
       curr_settings.colorReadsByMappingQuality !==
-        next_settings.colorReadsByMappingQuality
+        next_settings.colorReadsByMappingQuality ||
+      curr_settings.alphaReadsByMappingQuality !==
+        next_settings.alphaReadsByMappingQuality
     ) {
       return false;
     }

src/components/TrackList.demo.js

@@ -16,6 +16,7 @@ export default (
             mainPalette: "blues",
             auxPalette: "reds",
             colorReadsByMappingQuality: false,
+            alphaReadsByMappingQuality: false,
           },
         },
         2: {
@@ -25,6 +26,7 @@ export default (
             mainPalette: "blues",
             auxPalette: "reds",
             colorReadsByMappingQuality: false,
+            alphaReadsByMappingQuality: false,
           },
         },
         3: {
@@ -34,6 +36,7 @@ export default (
             mainPalette: "blues",
             auxPalette: "reds",
             colorReadsByMappingQuality: false,
+            alphaReadsByMappingQuality: false,
           },
         },
       }),

src/components/TrackList.test.js

@@ -12,6 +12,7 @@ describe("TrackList", () => {
         mainPalette: "blues",
         auxPalette: "reds",
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
       },
     },
     2: {
@@ -21,6 +22,7 @@ describe("TrackList", () => {
         mainPalette: "blues",
         auxPalette: "reds",
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
       },
     },
     3: {
@@ -30,6 +32,7 @@ describe("TrackList", () => {
         mainPalette: "blues",
         auxPalette: "reds",
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
       },
     },
   };

src/components/TrackListItem.demo.js

@@ -15,6 +15,7 @@ export default (
           mainPalette: "blues",
           auxPalette: "reds",
           colorReadsByMappingQuality: false,
+          alphaReadsByMappingQuality: false,
         },
       }),
       availableTracks: P.json([

src/components/TrackListItem.test.js

@@ -24,6 +24,7 @@ describe("TrackListItem", () => {
     mainPalette: "blues",
     auxPalette: "reds",
     colorReadsByMappingQuality: false,
+    alphaReadsByMappingQuality: false,
   };
 
   it("should render without errors", async () => {

src/components/TrackPickerDisplay.demo.js

@@ -16,6 +16,7 @@ export default (
             mainPalette: "blues",
             auxPalette: "reds",
             colorReadsByMappingQuality: false,
+            alphaReadsByMappingQuality: false,
           },
         },
         2: {
@@ -25,6 +26,7 @@ export default (
             mainPalette: "blues",
             auxPalette: "reds",
             colorReadsByMappingQuality: false,
+            alphaReadsByMappingQuality: false,
           },
         },
         3: {
@@ -34,6 +36,7 @@ export default (
             mainPalette: "blues",
             auxPalette: "reds",
             colorReadsByMappingQuality: false,
+            alphaReadsByMappingQuality: false,
           },
         },
       }),

src/components/TrackPickerDisplay.test.js

@@ -174,6 +174,7 @@ describe("TrackPickerDisplay", () => {
         mainPalette: "blues",
         auxPalette: "reds",
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
       },
     };
 

src/components/TrackSettings.demo.js

@@ -11,6 +11,7 @@ export default (
         mainPalette: "blues",
         auxPalette: "reds",
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
       }),
       availableColors: P.json([
         "greys",

src/components/TrackSettings.js

@@ -12,7 +12,8 @@ import ColorPicker from "./ColorPicker";
  * trackColorSettings expects an object in the form of
  * {mainPalette: string,
  *  auxPallate: string,
- *  colorReadsByMappingQuality: boolean}
+ *  colorReadsByMappingQuality: boolean,
+ *  alphaReadsByMappingQuality: boolean}
  *
  * The setTrackColorSetting function expects to be passed a key value pair updating the trackColorSettings object
  *
@@ -156,6 +157,7 @@ TrackSettings.defaultProps = {
     mainPalette: "blues",
     auxPalette: "reds",
     colorReadsByMappingQuality: false,
+    alphaReadsByMappingQuality: false,
   },
 };
 

src/components/TrackSettings.test.js

@@ -16,6 +16,7 @@ describe("TrackSettings", () => {
     mainPalette: "blues",
     auxPalette: "reds",
     colorReadsByMappingQuality: false,
+    alphaReadsByMappingQuality: false,
   };
 
   it("should render without errors", async () => {

src/components/TrackSettingsButton.demo.js

@@ -11,6 +11,7 @@ export default (
         mainPalette: "blues",
         auxPalette: "reds",
         colorReadsByMappingQuality: false,
+        alphaReadsByMappingQuality: false,
       }),
       availableColors: P.json([
         "greys",

src/components/TrackSettingsButton.test.js

@@ -13,6 +13,7 @@ describe("TrackSettingsButton", () => {
           mainPalette: "blues",
           auxPalette: "reds",
           colorReadsByMappingQuality: false,
+          alphaReadsByMappingQuality: false,
         }}
         setTrackColorSetting={function (a, b) {}}
       ></TrackSettingsButton>

src/components/TubeMap.js

@@ -57,6 +57,7 @@ class TubeMap extends Component {
       let colorScheme = {
         ...visOptions.colorSchemes[key],
         colorReadsByMappingQuality: visOptions.colorReadsByMappingQuality,
+        alphaReadsByMappingQuality: visOptions.alphaReadsByMappingQuality,
       };
       // update tubemap colors
       tubeMap.setColorSet(key, colorScheme);

src/util/tubemap.js

@@ -2675,6 +2675,19 @@ function generateTrackColor(track, highlight) {
   return trackColor;
 }
 
+function generateTrackAlpha(track, highlight) {
+  if (typeof highlight === "undefined") highlight = "plain";
+  let trackAlpha = 1;
+
+  const sourceID = track.sourceTrackID;
+  if (track.hasOwnProperty("type") && track.type === "read") {
+    if (config.colorSchemes[sourceID].alphaReadsByMappingQuality) {
+      trackAlpha = 0.1 + 0.9 * (Math.min(60, track.mapping_quality) / 60);
+    }
+  }
+  return trackAlpha;
+}
+
 function getReadXStart(read) {
   const node = nodes[read.path[0].node];
   if (read.path[0].isForward) {
@@ -2717,6 +2730,7 @@ function generateSVGShapesFromPath() {
   let yStart;
   let yEnd;
   let trackColor;
+  let trackAlpha;
   let highlight;
   let dummy;
   let reversalFlag;
@@ -2749,6 +2763,7 @@ function generateSVGShapesFromPath() {
   tracks.forEach((track) => {
     highlight = "plain";
     trackColor = generateTrackColor(track, highlight);
+    trackAlpha = generateTrackAlpha(track, highlight);
 
     // start of path
     yStart = track.path[0].y;
@@ -2792,12 +2807,14 @@ function generateSVGShapesFromPath() {
         }
         if (xEnd !== xStart) {
           trackColor = generateTrackColor(track, highlight);
+          trackAlpha = generateTrackAlpha(track, highlight);
           trackRectangles.push({
             xStart: Math.min(xStart, xEnd),
             yStart,
             xEnd: Math.max(xStart, xEnd),
             yEnd: yStart + track.width - 1,
             color: trackColor,
+            alpha: trackAlpha,
             // TODO: This is not actually the index of the track!
             id: track.id,
             name: track.name,
@@ -2811,13 +2828,15 @@ function generateSVGShapesFromPath() {
           xEnd = orderStartX[track.path[i].order];
           yEnd = track.path[i].y;
           trackColor = generateTrackColor(track, highlight);
+          trackAlpha = generateTrackAlpha(track, highlight);
           trackCurves.push({
             xStart,
             yStart,
             xEnd: xEnd + 1,
             yEnd,
             width: track.width,
             color: trackColor,
+            alpha: trackAlpha,
             laneChange: Math.abs(track.path[i].lane - track.path[i - 1].lane),
             id: track.id,
             name: track.name,
@@ -2833,13 +2852,15 @@ function generateSVGShapesFromPath() {
           xEnd = orderEndX[track.path[i].order];
           yEnd = track.path[i].y;
           trackColor = generateTrackColor(track, highlight);
+          trackAlpha = generateTrackAlpha(track, highlight);
           trackCurves.push({
             xStart: xStart + 1,
             yStart,
             xEnd,
             yEnd,
             width: track.width,
             color: trackColor,
+            alpha: trackAlpha,
             laneChange: Math.abs(track.path[i].lane - track.path[i - 1].lane),
             id: track.id,
             name: track.name,
@@ -2921,6 +2942,7 @@ function generateSVGShapesFromPath() {
       xEnd: Math.max(xStart, xEnd),
       yEnd: yStart + track.width - 1,
       color: trackColor,
+      alpha: trackAlpha,
       id: track.id,
       name: track.name,
       type: track.type,
@@ -3333,13 +3355,15 @@ function colorNodes(nodeName) {
   let nodesColors = {};
   if (config.coloredNodes.includes(nodeName)) {
     nodesColors["fill"] = "#ffc0cb";
-    nodesColors["fill-opacity"] = "0.4";
     nodesColors["outline"] = "#ff0000";
   } else {
     nodesColors["fill"] = "#ffffff";
-    nodesColors["fill-opacity"] = "0.4";
     nodesColors["outline"] = "#000000";
   }
+  nodesColors["fill-opacity"] = "0.4";
+  if (config.transparentNodesFlag) {
+    nodesColors["fill"] = "none";
+  }
   return nodesColors;
 }
 
@@ -3809,6 +3833,7 @@ function drawTrackRectangles(rectangles, type, groupTrack) {
     .attr("width", (d) => d.xEnd - d.xStart + 1)
     .attr("height", (d) => d.yEnd - d.yStart + 1)
     .style("fill", (d) => d.color)
+    .style("fill-opacity", (d) => d.alpha)
     .attr("trackID", (d) => d.id)
     .attr("trackName", (d) => d.name)
     .attr("class", (d) => `track${d.id}`)
@@ -4110,6 +4135,7 @@ function drawTrackCurves(type, groupTrack) {
     .append("path")
     .attr("d", (d) => d.path)
     .style("fill", (d) => d.color)
+    .style("fill-opacity", (d) => d.alpha)
     .attr("trackID", (d) => d.id)
     .attr("trackName", (d) => d.name)
     .attr("class", (d) => `track${d.id}`)