gosling-lang / gosling.js

Grammar of Scalable Linked Interactive Nucleotide Graphics
https://gosling.js.org
MIT License
164 stars 27 forks source link

Visibility is not working for line marks #1008

Open dvmoritzschoefl opened 10 months ago

dvmoritzschoefl commented 10 months ago

zoommark.webm

I am not sure if this intended or not. But it seems that the line mark is not working with semantic visibility.

The relevant section in the spec is this:

"visibility": [ { "measure": "zoomLevel", "target": "mark", "threshold": 1000000, "operation": "LT", "transitionPadding": 1000000 } ]

etowahadams commented 10 months ago

Thanks for submitting and issue! This does seem to be a bug.

In the short term, you might get a similar desired effect by changing "point" to "bar".

Here is the spec to reproduce. Change "point" to "line" or "bar" to observe the differences. We expect "line" to behave like "point" and"bar" (not visible when zoomed out) but unexpectedly it is visible at all levels of zoom.

{
      "xDomain": {"chromosome": "chr13", "interval": [31500000, 33150000]},
      "centerRadius": 0.1,
      "layout": "linear",
      "spacing": 0,
      "alignment": "stack",
      "tracks": [
        {
          "alignment": "overlay",
          "data": {
            "url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=clinvar-beddb",
            "type": "beddb",
            "genomicFields": [
              {"index": 1, "name": "start"},
              {"index": 2, "name": "end"}
            ],
            "valueFields": [
              {"index": 7, "name": "significance", "type": "nominal"}
            ]
          },
          "tracks": [
            {
              "mark": "bar",
              "x": {"field": "start", "type": "genomic"},
              "y": {
                "field": "significance",
                "type": "nominal",
                "domain": [
                  "Pathogenic",
                  "Pathogenic/Likely_pathogenic",
                  "Likely_pathogenic",
                  "Uncertain_significance",
                  "Likely_benign",
                  "Benign/Likely_benign",
                  "Benign"
                ],
                "baseline": "Uncertain_significance",
                "range": [150, 20]
              },
              "size": {"value": 1},
              "color": {"value": "lightgray"},
              "stroke": {"value": "lightgray"},
              "strokeWidth": {"value": 1},
              "opacity": {"value": 0.3},
              "visibility": [
                {
                  "measure": "zoomLevel",
                  "target": "mark",
                  "threshold": 100000,
                  "operation": "LT",
                  "transitionPadding": 100000
                }
              ]
            },
            {
              "mark": "point",
              "x": {"field": "start", "type": "genomic"},
              "row": {
                "field": "significance",
                "type": "nominal",
                "domain": [
                  "Pathogenic",
                  "Pathogenic/Likely_pathogenic",
                  "Likely_pathogenic",
                  "Uncertain_significance",
                  "Likely_benign",
                  "Benign/Likely_benign",
                  "Benign"
                ]
              },
              "size": {"value": 7},
              "opacity": {"value": 0.8},
              "visibility": [
                {
                  "measure": "zoomLevel",
                  "target": "mark",
                  "threshold": 1000000,
                  "operation": "LT",
                  "transitionPadding": 1000000
                }
              ]
            },
            {
              "data": {
                "url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=clinvar-multivec",
                "type": "multivec",
                "row": "significance",
                "column": "position",
                "value": "count",
                "categories": [
                  "Benign",
                  "Benign/Likely_benign",
                  "Likely_benign",
                  "Uncertain_significance",
                  "Likely_pathogenic",
                  "Pathogenic/Likely_pathogenic",
                  "Pathogenic"
                ],
                "binSize": 4
              },
              "mark": "bar",
              "x": {"field": "start", "type": "genomic"},
              "xe": {"field": "end", "type": "genomic"},
              "y": {"field": "count", "type": "quantitative", "axis": "none"},
              "color": {
                "field": "significance",
                "type": "nominal",
                "domain": [
                  "Pathogenic",
                  "Pathogenic/Likely_pathogenic",
                  "Likely_pathogenic",
                  "Uncertain_significance",
                  "Likely_benign",
                  "Benign/Likely_benign",
                  "Benign"
                ],
                "range": [
                  "#CB3B8C",
                  "#CB71A3",
                  "#CB96B3",
                  "gray",
                  "#029F73",
                  "#5A9F8C",
                  "#5A9F8C"
                ],
                "legend": true
              },
              "visibility": [
                {
                  "measure": "zoomLevel",
                  "target": "mark",
                  "threshold": 500000,
                  "operation": "GT",
                  "transitionPadding": 500000
                }
              ]
            }
          ],
          "color": {
            "field": "significance",
            "type": "nominal",
            "domain": [
              "Pathogenic",
              "Pathogenic/Likely_pathogenic",
              "Likely_pathogenic",
              "Uncertain_significance",
              "Likely_benign",
              "Benign/Likely_benign",
              "Benign"
            ],
            "range": [
              "#CB3B8C",
              "#CB71A3",
              "#CB96B3",
              "gray",
              "#029F73",
              "#5A9F8C",
              "#5A9F8C"
            ]
          },
          "width": 800,
          "height": 150
        }
      ]
    }