gosling.js
gosling.js copied to clipboard
Warning message when using `rect` ("WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost")
Not consistently showing this message, but it looks to occurs in the lollipop plot example.

example spec:
{
"xDomain": {"chromosome": "3", "interval": [10140000, 10160000]},
"centerRadius": 0.1,
"layout": "linear",
"spacing": 0,
"tracks": [
{
"title": "HiGlass",
"data": {
"url": "https://resgen.io/api/v1/tileset_info/?d=M9A9klpwTci5Vf4bHZ864g",
"type": "bed",
"genomicFields": [
{"index": 1, "name": "start"},
{"index": 2, "name": "end"}
],
"valueFields": [
{"index": 5, "name": "strand", "type": "nominal"},
{"index": 3, "name": "name", "type": "nominal"}
],
"exonIntervalFields": [
{"index": 12, "name": "start"},
{"index": 13, "name": "end"}
]
},
"overlay": [
{
"dataTransform": {
"filter": [
{"field": "type", "oneOf": ["gene"]},
{"field": "strand", "oneOf": ["+"]}
]
},
"mark": "triangle-r",
"x": {"field": "end", "type": "genomic", "axis": "top"},
"size": {"value": 15}
},
{
"dataTransform": {"filter": [{"field": "type", "oneOf": ["gene"]}]},
"mark": "text",
"text": {"field": "name", "type": "nominal"},
"x": {"field": "start", "type": "genomic"},
"xe": {"field": "end", "type": "genomic"},
"style": {"dy": -15}
},
{
"dataTransform": {
"filter": [
{"field": "type", "oneOf": ["gene"]},
{"field": "strand", "oneOf": ["-"]}
]
},
"mark": "triangle-l",
"x": {"field": "start", "type": "genomic"},
"size": {"value": 15},
"style": {"align": "right"}
},
{
"dataTransform": {"filter": [{"field": "type", "oneOf": ["exon"]}]},
"mark": "rect",
"x": {"field": "start", "type": "genomic"},
"size": {"value": 15},
"xe": {"field": "end", "type": "genomic"}
},
{
"dataTransform": {
"filter": [
{"field": "type", "oneOf": ["gene"]},
{"field": "strand", "oneOf": ["+"]}
]
},
"mark": "rule",
"x": {"field": "start", "type": "genomic"},
"strokeWidth": {"value": 3},
"xe": {"field": "end", "type": "genomic"},
"style": {"linePattern": {"type": "triangle-r", "size": 5}}
},
{
"dataTransform": {
"filter": [
{"field": "type", "oneOf": ["gene"]},
{"field": "strand", "oneOf": ["-"]}
]
},
"mark": "rule",
"x": {"field": "start", "type": "genomic"},
"strokeWidth": {"value": 3},
"xe": {"field": "end", "type": "genomic"},
"style": {"linePattern": {"type": "triangle-l", "size": 5}}
}
],
"row": {"field": "strand", "type": "nominal", "domain": ["+", "-"]},
"color": {
"field": "strand",
"type": "nominal",
"domain": ["+", "-"],
"range": ["#7585FF", "#FF8A85"]
},
"visibility": [
{
"operation": "less-than",
"measure": "width",
"threshold": "|xe-x|",
"transitionPadding": 10,
"target": "mark"
}
],
"opacity": {"value": 0.8},
"width": 350,
"height": 100
},
{
"data": {
"url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=clinvar-beddb",
"type": "bed",
"genomicFields": [
{"index": 1, "name": "start"},
{"index": 2, "name": "end"}
],
"valueFields": [{"index": 7, "name": "significance", "type": "nominal"}]
},
"overlay": [
{
"mark": "bar",
"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",
"row": {
"field": "significance",
"type": "nominal",
"domain": [
"Pathogenic",
"Pathogenic/Likely_pathogenic",
"Likely_pathogenic",
"Uncertain_significance",
"Likely_benign",
"Benign/Likely_benign",
"Benign"
]
},
"visibility": [
{
"measure": "zoomLevel",
"target": "mark",
"threshold": 1000000,
"operation": "LT",
"transitionPadding": 1000000
}
]
}
],
"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"
]
},
"x": {"field": "start", "type": "genomic"},
"size": {"value": 7},
"opacity": {"value": 0.8},
"width": 700,
"height": 150
},
{
"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"
],
"bin": 4
},
"mark": "rect",
"x": {"field": "start", "type": "genomic"},
"xe": {"field": "end", "type": "genomic"},
"row": {"field": "significance", "type": "nominal"},
"opacity": { "field": "count", "type": "quantitative", "range": [0.05, 1]},
"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
}
],
"overlayOnPreviousTrack": true,
"width": 700,
"height": 0
}
]
}
To reproduce, zoom in and out quickly in the SV example (https://gosling.js.org/?example=CANCER_VARIANT)
Resources:
https://github.com/pixijs/pixijs/issues/6494