gosling.js icon indicating copy to clipboard operation
gosling.js copied to clipboard

Warning message when using `rect` ("WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost")

Open sehilyi opened this issue 4 years ago • 3 comments

Not consistently showing this message, but it looks to occurs in the lollipop plot example.

sehilyi avatar Feb 18 '21 21:02 sehilyi

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
    }
  ]
}

sehilyi avatar Feb 19 '21 00:02 sehilyi

To reproduce, zoom in and out quickly in the SV example (https://gosling.js.org/?example=CANCER_VARIANT)

sehilyi avatar Aug 20 '21 19:08 sehilyi

Resources:

https://github.com/pixijs/pixijs/issues/6494

sehilyi avatar Aug 20 '21 19:08 sehilyi