The next track overrides the previous track given the overlay alignment

[zhangzhen]

The following code shows that a point-mark track overlays a rule-mark track. After loading is done, the points should be put on top of the rules. However, the points override the rules, and rules entirely disappear. Is the reason that the data two tracks are loading comes from different sources? How can I solve the problem?

{
  "arrangement": "vertical",
  "title": "Large Rearrangment Auditing",
  "assembly": "unknown",
  "spacing": 50,
  "xDomain": { "interval": [0, 33760] },
  "views": [
    ...
    {
      "linkingId": "detail",
      "alignment": "stack",
      "zoomLimits": [0, 10000],
      "tracks": [
        ...
        {
          "width": 1000,
          "height": 200,
          "data": {
            "url": "https://dataviz.brbiotech.com/RD2109054FFP/RD2109054FFP.cnv.gene.tsv",
            "type": "csv",
            "separator": "\t",
            "genomicFields": ["index_start", "index_end"],
            "quantitativeFields": ["CN"]
          },
          "mark": "rule",
          "x": { "field": "index_start", "type": "genomic" },
          "xe": { "field": "index_end", "type": "genomic" },
          "y": { "field": "CN", "type": "quantitative", "domain": [0,6] },
          "strokeWidth": { "value": 3 }
        },
        {
          "title": "Copy number",
          "width": 1000,
          "height": 200,
          "data": {
            "url": "https://dataviz.brbiotech.com/RD2109054FFP/RD2109054FFP.panelData.tsv",
            "type": "csv",
            "separator": "\t",
            "sampleLength": 2000,
            "genomicFields": ["index"],
            "quantitativeFields": ["CN"]
          },
          "x": { "field": "index", "type": "genomic" },
          "y": { "field": "CN", "type": "quantitative", "grid": true, "domain": [0,6] },
          "mark": "point",
          "size": { "value": 2 },
          "color": { "value": "#408941"},
          "opacity": {"value": 0.5},
          "overlayOnPreviousTrack": true
        }
      ]
    }
  ]
}

The complete spec is pasted below: src_specInEditor.txt

[sehilyi]

Testing with my own datasets does not seem to reproduce this issue, and the spec looks fine to me when I briefly check. The use of multiple datasets with the overlay option should be fine.

Would you be able to share the two datasets to me so that I can take a closer look?

[zhangzhen]

Would you be able to share the two datasets to me so that I can take a closer look?

I sent the two data files to your Harvard email a few seconds ago. One data file has more than 30k lines, while the other has more than 300 lines. Loading the big file is slower than the small one. I'm not sure whether the difference is the root of this issue. If you receive the files, please let me know.

BTW, the latest version has been released to npm package manager, but not to yarn package manager. This results in the the version of gosling.js dependency remains to be 0.9.8.

Zhen

[zhangzhen]

@sehilyi I copied the spec into the gosling editor. The result shows that two tracks overlaying works fine. Why doesn't it work correctly in my React app?

Zhen

[sehilyi]

Before I will be able to take a closer look, can you (1) double-check if your version of gosling.js is up-to-date and (2) see any warning/error messages on the console of your React app?

Basically, our Editor uses the latest gosling.js with React, so I think behavior should be the same if the version of gosling.js is the same between Editor and your React app.

BTW, the latest version has been released to npm package manager, but not to yarn package manager. This results in the the version of gosling.js dependency remains to be 0.9.8.

As far as I know, both yarn and npm point to the same package server, so once a new version of a package is released, you can use it using either yarn or npm.

[zhangzhen]

As far as I know, both yarn and npm point to the same package server, so once a new version of a package is released, you can use it using either yarn or npm.

I modified the version of gosling.js to ^0.9.9 in package.json, and then ran yarn install. I was forced to select 0.9.8 because a message was prompted to me, saying that 0.9.9 is not available. The following figure shows that yarnpkg still provides 0.9.8 as the latest version.

[sehilyi]

Can you double-check the command? The following command works for me.

yarn add gosling.js@^0.9.9

I assume that the yarn page still shows the previous version because its page is updated regularly (not in real-time) to reduce costs. I witness other recently-updated packages are the same (pointing to previous versions in the yarn's page).

[zhangzhen]

Running yarn add gosling.js@^0.9.9 --registry https://registry.npmjs.org works, but runing yarn add gosling.js@^0.9.9 doesn't.

I found the root of this issue. The overlay works if the theme is set to light, but it dosen't if the theme is set to ucsc.

[sehilyi]

I found the root of this issue. The overlay works if the theme is set to light, but it dosen't if the theme is set to ucsc.

Ah, good to know. It looks like the default background color of white in the UCSC theme was the origin of the issue.

https://github.com/gosling-lang/gosling-theme/blob/d438f77ed244eb04a4982891729b572d61285a5a/src/ucsc.ts#L35

The track overlaid on the top uses the white background, making the track under it hidden. This case should be properly handled in Gosling.js, and you could override the track.background option (i.e., { base: 'ucsc', track: { background: 'transparent' }}) to use the UCSC theme w/o making the overlaid tracks disapear.