gosling browser auto-scale function

[zhouhufeng]

I found the same set of tracks if visualize on UCSC genome browser or on the IGV they all have very distinct peaks and very low background when visualize on the gosling browser the peaks are not auto-scalled and very large background.
I am wondering if there is easy function to enable the auto-scaling?
Thanks very much

[sehilyi]

Hi @zhouhufeng! Could you share the screenshots and Gosling specifications to test? Gosling automatically adjust the scale (i.e., min and max value) of the y-axis considering the current values displayed. So, additional information would be helpful for understanding the issues better.

[zhouhufeng]

Thanks, here attached the IGV and Gosling screen shot of the same region on the same track.

In Gosling

In IGV

[sehilyi]

I wonder if the difference is coming from how the data is aggregated and displayed. Gosling computes mean by default, i.e., data in the same bin is averaged. But, you could also do the sum (e.g., aggregation in docs).

I see that, in the IGV screenshot, the scales of the y-axes are much larger, e.g., 0-6458 vs. 0-20 in Gosling. So, there must be a discrepancy in how data is aggregated.

I also wonder if the IGV apply the log scale to the y-axis, instead of linear scale. In that case, you can apply the Log Transform in Gosling (https://gosling-lang.org/docs/reference#logtransform).

[vineetver]

Thanks for the detailed explanation! I tried a few of these things, and switching the aggregation to "sum" did increase the peaks, which was helpful. However, there’s still some background noise that I’m trying to address. I’m currently exploring whether the difference might be due to IGV’s binning strategy or if they apply any normalization by default.

Here is my config:

const ATACURL =
"https://higlass.genohub.org/api/v1/tileset_info/?d=ccre-atac-hg38";

export const atacTrack = {
alignment: "overlay",
title: "Aggregated ATAC-seq signal, all biosamples",
data: {
  url: ATACURL,
  type: "vector",
  aggregation: "sum",
},
tracks: [
  {
    mark: "bar",
    x: {
      field: "start",
      type: "genomic",
      linkingId: "link1",
      aggregate: "bin",
    },
    y: {
      field: "value",
      type: "quantitative",
      axis: "right",
      zeroBaseline: false,
    },
    color: {
      value: "blue",
    },
    size: {
      value: 1,
    },
    stroke: { value: "blue" },
    strokeWidth: { value: 0.8 },
    opacity: { value: 0.7 },
    tooltip: [
      { field: "start", type: "genomic", alt: "Start" },
      { field: "end", type: "genomic", alt: "End" },
      { field: "value", type: "quantitative", alt: "ATAC-seq signal" },
    ],
  },
],
width: 800,
height: 100,
};

Also, I noticed the aggregate setting on the x mark in Gosling, but I’m not entirely sure what it means in this context. Could you clarify how this setting affects the visualization

I’ll keep you updated on how it goes!

[vineetver]

The issue has been resolved by directly loading the BigWig files into Gosling. Using HiGlass's vector data type introduces substantial background noise and appears to apply logarithmic scaling to the values.

[sehilyi]

@vineetver Thank you for sharing. Has this issue been resolved at all for your use cases, or are you still finding ways to host your BigWig files using the HiGlass server? I see an open issue in the HiGlass Server repo (higlass/higlass-server#166).

I wonder where this discrepancy is coming from. At least when I test a bigwig file stored on a HiGlass server and display it using both HiGlass and Gosling, I see the same visual patterns.

Screenshot (Left HiGlass, Right Gosling)

Specs Used

Gosling Spec

{
  "static": true,
  "spacing": 1,
  "centerRadius": 0.3,
  "alignment": "stack",
  "tracks": [
    {
      "data": {
        "type": "vector",
        "url": "https://higlass.io/api/v1/tileset_info/?d=HnOFdNKyQiWEnLkn4Wb1Ug",
        "column": "position",
        "value": "peak"
      },
      "mark": "bar",
      "color": { "value": "green" },
      "x": {"field": "position", "type": "genomic", "axis": "top"},
      "y": {"field": "peak", "type": "quantitative"},
      "width": 700,
      "height": 200
    }
  ]
}

HiGlass View Config

{
  "editable": true,
  "zoomFixed": false,
  "trackSourceServers": [
    "//higlass.io/api/v1",
    "https://resgen.io/api/v1/gt/paper-data"
  ],
  "exportViewUrl": "/api/v1/viewconfs",
  "views": [
    {
      "uid": "aa",
      "initialXDomain": [
        568251300.9470247,
        3162352900.475459
      ],
      "autocompleteSource": "/api/v1/suggest/?d=OHJakQICQD6gTD7skx4EWA&",
      "genomePositionSearchBox": {
        "autocompleteServer": "//higlass.io/api/v1",
        "autocompleteId": "OHJakQICQD6gTD7skx4EWA",
        "chromInfoServer": "//higlass.io/api/v1",
        "chromInfoId": "hg19",
        "visible": true
      },
      "chromInfoPath": "//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv",
      "tracks": {
        "top": [
          {
            "chromInfoPath": "//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv",
            "type": "horizontal-chromosome-labels",
            "height": 30,
            "uid": "X4e_1DKiQHmyghDa6lLMVA",
            "options": {
              "color": "#808080",
              "stroke": "#ffffff",
              "fontSize": 12,
              "fontIsLeftAligned": false,
              "showMousePosition": false,
              "mousePositionColor": "#000000",
              "reverseOrientation": false
            },
            "width": 841
          }
        ],
        "left": [],
        "center": [],
        "right": [],
        "bottom": [
          {
            "filetype": "bigwig",
            "server": "//higlass.io/api/v1",
            "tilesetUid": "HnOFdNKyQiWEnLkn4Wb1Ug",
            "uid": "IVq8xl1tRgOFxtJs3FfNJA",
            "type": "bar",
            "options": {
              "align": "bottom",
              "labelColor": "[glyph-color]",
              "labelPosition": "topLeft",
              "labelLeftMargin": 0,
              "labelRightMargin": 0,
              "labelTopMargin": 0,
              "labelBottomMargin": 0,
              "labelShowResolution": false,
              "labelShowAssembly": true,
              "axisLabelFormatting": "scientific",
              "axisPositionHorizontal": "right",
              "barFillColor": "darkgreen",
              "valueScaling": "linear",
              "trackBorderWidth": 0,
              "trackBorderColor": "black",
              "labelTextOpacity": 0.4,
              "barOpacity": 1,
              "name": "UCSC - hg38.phastCons100way.bw"
            },
            "width": 873,
            "height": 177
          }
        ],
        "whole": [],
        "gallery": []
      },
      "layout": {
        "w": 12,
        "h": 2,
        "x": 0,
        "y": 0,
        "moved": false,
        "static": false
      },
      "initialYDomain": [
        1050834337.1588203,
        2295884245.752651
      ]
    }
  ],
  "zoomLocks": {
    "locksByViewUid": {},
    "locksDict": {}
  },
  "locationLocks": {
    "locksByViewUid": {},
    "locksDict": {}
  },
  "valueScaleLocks": {
    "locksByViewUid": {},
    "locksDict": {}
  }
}