igv 2.13.4 → 2.13.6

package/dist/igv.js

@@ -16472,6 +16472,376 @@
       }
     }
 
+    const appleCrayonRGBPalette = {
+      cantaloupe: {
+        r: 255,
+        g: 206,
+        b: 110
+      },
+      honeydew: {
+        r: 206,
+        g: 250,
+        b: 110
+      },
+      spindrift: {
+        r: 104,
+        g: 251,
+        b: 208
+      },
+      sky: {
+        r: 106,
+        g: 207,
+        b: 255
+      },
+      lavender: {
+        r: 210,
+        g: 120,
+        b: 255
+      },
+      carnation: {
+        r: 255,
+        g: 127,
+        b: 211
+      },
+      licorice: {
+        r: 0,
+        g: 0,
+        b: 0
+      },
+      snow: {
+        r: 255,
+        g: 255,
+        b: 255
+      },
+      salmon: {
+        r: 255,
+        g: 114,
+        b: 110
+      },
+      banana: {
+        r: 255,
+        g: 251,
+        b: 109
+      },
+      flora: {
+        r: 104,
+        g: 249,
+        b: 110
+      },
+      ice: {
+        r: 104,
+        g: 253,
+        b: 255
+      },
+      orchid: {
+        r: 110,
+        g: 118,
+        b: 255
+      },
+      bubblegum: {
+        r: 255,
+        g: 122,
+        b: 255
+      },
+      lead: {
+        r: 30,
+        g: 30,
+        b: 30
+      },
+      mercury: {
+        r: 232,
+        g: 232,
+        b: 232
+      },
+      tangerine: {
+        r: 255,
+        g: 136,
+        b: 2
+      },
+      lime: {
+        r: 131,
+        g: 249,
+        b: 2
+      },
+      sea_foam: {
+        r: 3,
+        g: 249,
+        b: 135
+      },
+      aqua: {
+        r: 0,
+        g: 140,
+        b: 255
+      },
+      grape: {
+        r: 137,
+        g: 49,
+        b: 255
+      },
+      strawberry: {
+        r: 255,
+        g: 41,
+        b: 135
+      },
+      tungsten: {
+        r: 58,
+        g: 58,
+        b: 58
+      },
+      silver: {
+        r: 208,
+        g: 208,
+        b: 208
+      },
+      maraschino: {
+        r: 255,
+        g: 33,
+        b: 1
+      },
+      lemon: {
+        r: 255,
+        g: 250,
+        b: 3
+      },
+      spring: {
+        r: 5,
+        g: 248,
+        b: 2
+      },
+      turquoise: {
+        r: 0,
+        g: 253,
+        b: 255
+      },
+      blueberry: {
+        r: 0,
+        g: 46,
+        b: 255
+      },
+      magenta: {
+        r: 255,
+        g: 57,
+        b: 255
+      },
+      iron: {
+        r: 84,
+        g: 84,
+        b: 83
+      },
+      magnesium: {
+        r: 184,
+        g: 184,
+        b: 184
+      },
+      mocha: {
+        r: 137,
+        g: 72,
+        b: 0
+      },
+      fern: {
+        r: 69,
+        g: 132,
+        b: 1
+      },
+      moss: {
+        r: 1,
+        g: 132,
+        b: 72
+      },
+      ocean: {
+        r: 0,
+        g: 74,
+        b: 136
+      },
+      eggplant: {
+        r: 73,
+        g: 26,
+        b: 136
+      },
+      maroon: {
+        r: 137,
+        g: 22,
+        b: 72
+      },
+      steel: {
+        r: 110,
+        g: 110,
+        b: 110
+      },
+      aluminum: {
+        r: 160,
+        g: 159,
+        b: 160
+      },
+      cayenne: {
+        r: 137,
+        g: 17,
+        b: 0
+      },
+      aspargus: {
+        r: 136,
+        g: 133,
+        b: 1
+      },
+      clover: {
+        r: 2,
+        g: 132,
+        b: 1
+      },
+      teal: {
+        r: 0,
+        g: 134,
+        b: 136
+      },
+      midnight: {
+        r: 0,
+        g: 24,
+        b: 136
+      },
+      plum: {
+        r: 137,
+        g: 30,
+        b: 136
+      },
+      tin: {
+        r: 135,
+        g: 134,
+        b: 135
+      },
+      nickel: {
+        r: 136,
+        g: 135,
+        b: 135
+      }
+    };
+    function appleCrayonRGB(name) {
+      const {
+        r,
+        g,
+        b
+      } = appleCrayonRGBPalette[name];
+      return `rgb(${r},${g},${b})`;
+    }
+    function appleCrayonRGBA(name, alpha) {
+      const {
+        r,
+        g,
+        b
+      } = appleCrayonRGBPalette[name];
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+    const colorPalettes = {
+      Set1: ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(166,86,40)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(247,129,191)", "rgb(153,153,153)", "rgb(255,255,51)"],
+      Dark2: ["rgb(27,158,119)", "rgb(217,95,2)", "rgb(117,112,179)", "rgb(231,41,138)", "rgb(102,166,30)", "rgb(230,171,2)", "rgb(166,118,29)", "rgb(102,102,102)"],
+      Set2: ["rgb(102, 194,165)", "rgb(252,141,98)", "rgb(141,160,203)", "rgb(231,138,195)", "rgb(166,216,84)", "rgb(255,217,47)", "rgb(229,196,148)", "rgb(179,179,179)"],
+      Set3: ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)", "rgb(217,217,217)", "rgb(188,128,189)", "rgb(204,235,197)", "rgb(255,237,111)"],
+      Pastel1: ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)", "rgb(255,255,204)", "rgb(229,216,189)", "rgb(253,218,236)"],
+      Pastel2: ["rgb(173,226,207)", "rgb(253,205,172)", "rgb(203,213,232)", "rgb(244,202,228)", "rgb(230,245,201)", "rgb(255,242,174)", "rgb(243,225,206)"],
+      Accent: ["rgb(127,201,127)", "rgb(190,174,212)", "rgb(253,192,134)", "rgb(255,255,153)", "rgb(56,108,176)", "rgb(240,2,127)", "rgb(191,91,23)"]
+    };
+    class PaletteColorTable {
+      constructor(palette) {
+        this.colors = colorPalettes[palette];
+        if (!Array.isArray(this.colors)) this.colors = [];
+        this.colorTable = {};
+        this.nextIdx = 0;
+        this.colorGenerator = new RandomColorGenerator();
+      }
+      getColor(key) {
+        if (!this.colorTable.hasOwnProperty(key)) {
+          if (this.nextIdx < this.colors.length) {
+            this.colorTable[key] = this.colors[this.nextIdx];
+          } else {
+            this.colorTable[key] = this.colorGenerator.get();
+          }
+          this.nextIdx++;
+        }
+        return this.colorTable[key];
+      }
+    }
+    class ColorTable {
+      constructor(colors) {
+        this.colorTable = colors || {};
+        this.nextIdx = 0;
+        this.colorGenerator = new RandomColorGenerator();
+      }
+      getColor(key) {
+        if (!this.colorTable.hasOwnProperty(key)) {
+          if (this.colorTable.hasOwnProperty("*")) {
+            return this.colorTable["*"];
+          }
+          this.colorTable[key] = this.colorGenerator.get();
+        }
+        return this.colorTable[key];
+      }
+    }
+
+    // Random color generator from https://github.com/sterlingwes/RandomColor/blob/master/rcolor.js
+    // Free to use & distribute under the MIT license
+    // Wes Johnson (@SterlingWes)
+    //
+    // inspired by http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+    function RandomColorGenerator() {
+      this.hue = Math.random();
+      this.goldenRatio = 0.618033988749895;
+      this.hexwidth = 2;
+    }
+    RandomColorGenerator.prototype.hsvToRgb = function (h, s, v) {
+      var h_i = Math.floor(h * 6),
+        f = h * 6 - h_i,
+        p = v * (1 - s),
+        q = v * (1 - f * s),
+        t = v * (1 - (1 - f) * s),
+        r = 255,
+        g = 255,
+        b = 255;
+      switch (h_i) {
+        case 0:
+          r = v, g = t, b = p;
+          break;
+        case 1:
+          r = q, g = v, b = p;
+          break;
+        case 2:
+          r = p, g = v, b = t;
+          break;
+        case 3:
+          r = p, g = q, b = v;
+          break;
+        case 4:
+          r = t, g = p, b = v;
+          break;
+        case 5:
+          r = v, g = p, b = q;
+          break;
+      }
+      return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)];
+    };
+    RandomColorGenerator.prototype.padHex = function (str) {
+      if (str.length > this.hexwidth) return str;
+      return new Array(this.hexwidth - str.length + 1).join('0') + str;
+    };
+    RandomColorGenerator.prototype.get = function (saturation, value) {
+      this.hue += this.goldenRatio;
+      this.hue %= 1;
+      if (typeof saturation !== "number") saturation = 0.5;
+      if (typeof value !== "number") value = 0.95;
+      var rgb = this.hsvToRgb(this.hue, saturation, value);
+      return "#" + this.padHex(rgb[0].toString(16)) + this.padHex(rgb[1].toString(16)) + this.padHex(rgb[2].toString(16));
+    };
+    const randomColorGenerator = new RandomColorGenerator();
+    function randomColor() {
+      return randomColorGenerator.get();
+    }
+    function randomRGB$1(min, max) {
+      min = IGVMath.clamp(min, 0, 255);
+      max = IGVMath.clamp(max, 0, 255);
+      const r = Math.round(Math.random() * (max - min) + min).toString(10);
+      const g = Math.round(Math.random() * (max - min) + min).toString(10);
+      const b = Math.round(Math.random() * (max - min) + min).toString(10);
+      return `rgb(${r},${g},${b})`;
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -16699,6 +17069,18 @@
         if (fill) {
           ctx.fill();
         }
+      },
+      drawRandomColorVerticalLines: ctx => {
+        for (let x = 0; x < ctx.canvas.width; x++) {
+          IGVGraphics.fillRect(ctx, x, 0, 1, ctx.canvas.height, {
+            fillStyle: randomRGB$1(100, 250)
+          });
+        }
+      },
+      labelTransformWithContext: (ctx, exe) => {
+        ctx.translate(exe, 0);
+        ctx.scale(-1, 1);
+        ctx.translate(-exe, 0);
       }
     };
     function doPath(ctx, x, y) {
@@ -18787,7 +19169,7 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "biggenepred", "bignarrowpeak", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut", "tsv", "hiccups"]);
+    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "biggenepred", "bignarrowpeak", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut", "tsv", "hiccups", "fasta", "fa", "fna"]);
 
     /**
      * Return a custom format object with the given name.
@@ -18842,6 +19224,10 @@
           return "bigwig";
         case "bb":
           return "bigbed";
+        case "fasta":
+        case "fa":
+        case "fna":
+          return "fasta";
         default:
           if (knownFileExtensions.has(ext)) {
             return ext;
@@ -18901,6 +19287,8 @@
           case "biggenepred":
           case "bignarrowpeak":
             return "bedtype";
+          case "fasta":
+            return "sequence";
           default:
             return "annotation";
         }
@@ -18982,6 +19370,14 @@
       return comp;
     }
 
+    class Chromosome {
+      constructor(name, order, bpLength) {
+        this.name = name;
+        this.order = order;
+        this.bpLength = bpLength;
+      }
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -19006,318 +19402,160 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    const defaultSequenceTrackOrder = Number.MIN_SAFE_INTEGER;
-    const translationDict = {
-      'TTT': 'F',
-      'TTC': 'F',
-      'TTA': 'L',
-      'TTG': 'L',
-      'CTT': 'L',
-      'CTC': 'L',
-      'CTA': 'L',
-      'CTG': 'L',
-      'ATT': 'I',
-      'ATC': 'I',
-      'ATA': 'I',
-      'ATG': 'M',
-      'GTT': 'V',
-      'GTC': 'V',
-      'GTA': 'V',
-      'GTG': 'V',
-      'TCT': 'S',
-      'TCC': 'S',
-      'TCA': 'S',
-      'TCG': 'S',
-      'CCT': 'P',
-      'CCC': 'P',
-      'CCA': 'P',
-      'CCG': 'P',
-      'ACT': 'T',
-      'ACC': 'T',
-      'ACA': 'T',
-      'ACG': 'T',
-      'GCT': 'A',
-      'GCC': 'A',
-      'GCA': 'A',
-      'GCG': 'A',
-      'TAT': 'Y',
-      'TAC': 'Y',
-      'TAA': 'STOP',
-      'TAG': 'STOP',
-      'CAT': 'H',
-      'CAC': 'H',
-      'CAA': 'Q',
-      'CAG': 'Q',
-      'AAT': 'N',
-      'AAC': 'N',
-      'AAA': 'K',
-      'AAG': 'K',
-      'GAT': 'D',
-      'GAC': 'D',
-      'GAA': 'E',
-      'GAG': 'E',
-      'TGT': 'C',
-      'TGC': 'C',
-      'TGA': 'STOP',
-      'TGG': 'W',
-      'CGT': 'R',
-      'CGC': 'R',
-      'CGA': 'R',
-      'CGG': 'R',
-      'AGT': 'S',
-      'AGC': 'S',
-      'AGA': 'R',
-      'AGG': 'R',
-      'GGT': 'G',
-      'GGC': 'G',
-      'GGA': 'G',
-      'GGG': 'G'
-    };
-    const complement = {};
-    const t1 = ['A', 'G', 'C', 'T', 'Y', 'R', 'W', 'S', 'K', 'M', 'D', 'V', 'H', 'B', 'N', 'X'];
-    const t2 = ['T', 'C', 'G', 'A', 'R', 'Y', 'W', 'S', 'M', 'K', 'H', 'B', 'D', 'V', 'N', 'X'];
-    for (let i = 0; i < t1.length; i++) {
-      complement[t1[i]] = t2[i];
-      complement[t1[i].toLowerCase()] = t2[i].toLowerCase();
-    }
-    const DEFAULT_HEIGHT = 25;
-    const TRANSLATED_HEIGHT = 115;
-    const SEQUENCE_HEIGHT = 15;
-    const FRAME_HEIGHT = 25;
-    const FRAME_BORDER = 5;
-    const BP_PER_PIXEL_THRESHOLD = 1 / 10;
-    class SequenceTrack {
-      constructor(config, browser) {
-        this.type = "sequence";
-        this.browser = browser;
-        this.removable = false;
+    const splitLines$4 = splitLines$5;
+    const reservedProperties$1 = new Set(['fastaURL', 'indexURL', 'cytobandURL', 'indexed']);
+    class NonIndexedFasta {
+      constructor(reference) {
+        this.fastaURL = reference.fastaURL;
+        this.withCredentials = reference.withCredentials;
+        this.chromosomeNames = [];
+        this.chromosomes = {};
+        this.sequences = new Map();
+
+        // Build a track-like config object from the referenceObject
+        const config = {};
+        for (let key in reference) {
+          if (reference.hasOwnProperty(key) && !reservedProperties$1.has(key)) {
+            config[key] = reference[key];
+          }
+        }
         this.config = config;
-        this.name = "Sequence";
-        this.id = "sequence";
-        this.sequenceType = config.sequenceType || "dna"; //   dna | rna | prot
-        this.disableButtons = false;
-        this.order = config.order || defaultSequenceTrackOrder;
-        this.ignoreTrackMenu = false;
-        this.reversed = config.reversed === true;
-        this.frameTranslate = config.frameTranslate === true;
-        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
       }
-      menuItemList() {
-        return [{
-          name: this.reversed ? "Forward" : "Reverse",
-          click: () => {
-            this.reversed = !this.reversed;
-            this.trackView.repaintViews();
-          }
-        }, {
-          name: this.frameTranslate ? "Close Translation" : "Three-frame Translate",
-          click: () => {
-            this.frameTranslate = !this.frameTranslate;
-            if (this.frameTranslate) {
-              for (let vp of this.trackView.viewports) {
-                vp.setContentHeight(TRANSLATED_HEIGHT);
-              }
-              this.trackView.setTrackHeight(TRANSLATED_HEIGHT);
-            } else {
-              for (let vp of this.trackView.viewports) {
-                vp.setContentHeight(DEFAULT_HEIGHT);
-              }
-              this.trackView.setTrackHeight(DEFAULT_HEIGHT);
-            }
-            this.trackView.repaintViews();
-          }
-        }];
+      async init() {
+        return this.loadAll();
       }
-      contextMenuItemList(clickState) {
-        const viewport = clickState.viewport;
-        if (viewport.referenceFrame.bpPerPixel <= 1) {
-          const pixelWidth = viewport.getWidth();
-          const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
-          const chr = viewport.referenceFrame.chr;
-          const start = Math.floor(viewport.referenceFrame.start);
-          const end = Math.ceil(start + bpWindow);
-          const items = [{
-            label: this.reversed ? 'View visible sequence (reversed)...' : 'View visible sequence...',
-            click: async () => {
-              let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
-              if (!seq) {
-                seq = "Unknown sequence";
-              } else if (this.reversed) {
-                seq = reverseComplementSequence(seq);
-              }
-              this.browser.alert.present(seq);
-            }
-          }];
-          if (isSecureContext()) {
-            items.push({
-              label: 'Copy visible sequence',
-              click: async () => {
-                let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
-                if (!seq) {
-                  seq = "Unknown sequence";
-                } else if (this.reversed) {
-                  seq = reverseComplementSequence(seq);
-                }
-                try {
-                  await navigator.clipboard.writeText(seq);
-                } catch (e) {
-                  console.error(e);
-                  this.browser.alert.present(`error copying sequence to clipboard ${e}`);
-                }
-              }
-            });
-          }
-          items.push('<hr/>');
-          return items;
-        } else {
+      async getSequence(chr, start, end) {
+        if (!this.sequences.has(chr)) {
           return undefined;
         }
-      }
-      translateSequence(seq) {
-        const threeFrame = [[], [], []];
-        for (let fNum of [0, 1, 2]) {
-          let idx = fNum;
-          while (seq.length - idx >= 3) {
-            let st = seq.slice(idx, idx + 3);
-            if (this.reversed) {
-              st = st.split('').reverse().join('');
-            }
-            const aa = translationDict[st.toUpperCase()] || "";
-            threeFrame[fNum].push({
-              codons: st,
-              aminoA: aa
-            });
-            idx += 3;
+        let seqSlice = this.sequences.get(chr).find(ss => ss.contains(start, end));
+        if (!seqSlice) {
+          seqSlice = this.sequences.get(chr).find(ss => ss.overlaps(start, end));
+          if (!seqSlice) {
+            return undefined;
           }
         }
-        return threeFrame;
-      }
-      async getFeatures(chr, start, end, bpPerPixel) {
-        start = Math.floor(start);
-        end = Math.floor(end);
-        if (bpPerPixel && bpPerPixel > 1) {
-          return null;
-        } else {
-          const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
-          return {
-            bpStart: start,
-            sequence: sequence
-          };
+        start -= seqSlice.offset;
+        end -= seqSlice.offset;
+        let prefix = "";
+        if (start < 0) {
+          for (let i = start; i < Math.min(end, 0); i++) {
+            prefix += "*";
+          }
+        }
+        if (end <= 0) {
+          return Promise.resolve(prefix);
         }
+        const seq = seqSlice.sequence;
+        const seqEnd = Math.min(end, seq.length);
+        return prefix + seq.substring(start, seqEnd);
       }
-      draw(options) {
-        const ctx = options.context;
-        if (options.features) {
-          let sequence = options.features.sequence;
-          if (!sequence) {
-            return;
-          }
-          if (this.reversed) {
-            sequence = sequence.split('').map(function (cv) {
-              return complement[cv];
-            }).join('');
+      async loadAll() {
+        let data;
+        if (isDataURL(this.fastaURL)) {
+          let bytes = decodeDataURI$1(this.fastaURL);
+          data = "";
+          for (let b of bytes) {
+            data += String.fromCharCode(b);
           }
-          const sequenceBpStart = options.features.bpStart; // genomic position at start of sequence
-          const bpEnd = 1 + options.bpStart + options.pixelWidth * options.bpPerPixel;
-          for (let bp = Math.floor(options.bpStart); bp <= bpEnd; bp++) {
-            const seqIdx = Math.floor(bp - sequenceBpStart);
-            if (seqIdx >= 0 && seqIdx < sequence.length) {
-              const baseLetter = sequence[seqIdx];
-              const offsetBP = bp - options.bpStart;
-              const aPixel = offsetBP / options.bpPerPixel;
-              const pixelWidth = 1 / options.bpPerPixel;
-              const color = this.fillColor(baseLetter);
-              if (options.bpPerPixel > BP_PER_PIXEL_THRESHOLD) {
-                IGVGraphics.fillRect(ctx, aPixel, FRAME_BORDER, pixelWidth, SEQUENCE_HEIGHT - FRAME_BORDER, {
-                  fillStyle: color
-                });
-              } else {
-                let textPixel = aPixel + 0.5 * (pixelWidth - ctx.measureText(baseLetter).width);
-                IGVGraphics.strokeText(ctx, baseLetter, textPixel, SEQUENCE_HEIGHT, {
-                  strokeStyle: color
-                });
-              }
+        } else {
+          data = await igvxhr.load(this.fastaURL, buildOptions(this.config));
+        }
+        const chrNameSet = new Set();
+        const lines = splitLines$4(data);
+        const len = lines.length;
+        let lineNo = 0;
+        let order = 0;
+        let nextLine;
+        let current = {};
+        while (lineNo < len) {
+          nextLine = lines[lineNo++].trim();
+          if (nextLine.startsWith("#") || nextLine.length === 0) ; else if (nextLine.startsWith(">")) {
+            // Start the next sequence
+            if (current && current.seq) {
+              pushChromosome.call(this, current, order++);
             }
-          }
-          if (this.frameTranslate) {
-            let y = SEQUENCE_HEIGHT + 2 * FRAME_BORDER;
-            const translatedSequence = this.translateSequence(sequence);
-            for (let fNum = 0; fNum < translatedSequence.length; fNum++) {
-              // == 3, 1 for each frame
-
-              const aaSequence = translatedSequence[fNum]; // AA sequence for this frame
-
-              for (let idx = 0; idx < aaSequence.length; idx++) {
-                let color = 0 === idx % 2 ? 'rgb(160,160,160)' : 'rgb(224,224,224)';
-                const cv = aaSequence[idx];
-                const bpPos = sequenceBpStart + fNum + idx * 3;
-                const bpOffset = bpPos - options.bpStart;
-                const p0 = Math.floor(bpOffset / options.bpPerPixel);
-                const p1 = Math.floor((bpOffset + 3) / options.bpPerPixel);
-                const pc = Math.round((p0 + p1) / 2);
-                if (p1 < 0) {
-                  continue; // off left edge
-                } else if (p0 > options.pixelWidth) {
-                  break; // off right edge
-                }
+            const parts = nextLine.substr(1).split(/\s+/);
 
-                let aaLabel = cv.aminoA;
-                if (cv.aminoA.indexOf('STOP') > -1) {
-                  color = 'rgb(255, 0, 0)';
-                  aaLabel = 'STOP'; //Color blind accessible
-                } else if (cv.aminoA === 'M') {
-                  color = 'rgb(0, 153, 0)';
-                  aaLabel = 'START'; //Color blind accessible
-                }
+            // Check for samtools style locus string.   This is not perfect, and could fail on weird sequence names
+            const nameParts = parts[0].split(':');
+            current.chr = nameParts[0];
+            current.seq = "";
+            current.offset = 0;
+            if (nameParts.length > 1 && nameParts[1].indexOf('-') > 0) {
+              const locusParts = nameParts[1].split('-');
+              if (locusParts.length === 2 && /^[0-9]+$/.test(locusParts[0]) && /^[0-9]+$/.test(locusParts[1])) ;
+              const from = Number.parseInt(locusParts[0]);
+              const to = Number.parseInt(locusParts[1]);
+              if (to > from) {
+                // TODO this should be an error
+                current.offset = from - 1;
+              }
 
-                IGVGraphics.fillRect(ctx, p0, y, p1 - p0, FRAME_HEIGHT, {
-                  fillStyle: color
-                });
-                if (options.bpPerPixel <= 1 / 10) {
-                  IGVGraphics.strokeText(ctx, aaLabel, pc - ctx.measureText(aaLabel).width / 2, y + 15);
+              // Check for chromosome length token
+              if (parts.length > 1 && parts[1].startsWith("@len=")) {
+                try {
+                  current.length = parseInt(parts[1].trim().substring(5));
+                } catch (e) {
+                  current.length = undefined;
+                  console.error(`Error parsing sequence length for ${nextLine}`);
                 }
+              } else {
+                current.length = undefined;
               }
-              y += FRAME_HEIGHT + FRAME_BORDER;
             }
+          } else {
+            current.seq += nextLine;
+          }
+          // add last seq
+          if (current && current.seq) {
+            pushChromosome.call(this, current, order);
+          }
+        }
+        function pushChromosome(current, order) {
+          const length = current.length || current.offset + current.seq.length;
+          if (!chrNameSet.has(current.chr)) {
+            this.chromosomeNames.push(current.chr);
+            this.sequences.set(current.chr, []);
+            this.chromosomes[current.chr] = new Chromosome(current.chr, order, length);
+            chrNameSet.add(current.chr);
+          } else {
+            const c = this.chromosomes[current.chr];
+            c.bpLength = Math.max(c.bpLength, length);
           }
+          this.sequences.get(current.chr).push(new SequenceSlice(current.offset, current.seq));
         }
       }
-      get supportsWholeGenome() {
-        return false;
+    }
+    class SequenceSlice {
+      constructor(offset, sequence) {
+        this.offset = offset;
+        this.sequence = sequence;
       }
-      computePixelHeight(ignore) {
-        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
-        return this.height;
+      contains(start, end) {
+        return this.offset <= start && this.end >= end;
       }
-      fillColor(index) {
-        if (this.color) {
-          return this.color;
-        } else if ("dna" === this.sequenceType) {
-          return this.browser.nucleotideColors[index] || 'gray';
-        } else {
-          return 'rgb(0, 0, 150)';
-        }
+      overlaps(start, end) {
+        return this.offset < end && this.end > start;
       }
-
-      /**
-       * Return the current state of the track.  Used to create sessions and bookmarks.
-       *
-       * @returns {*|{}}
-       */
-      getState() {
-        const config = {
-          type: "sequence"
-        };
-        if (this.order !== defaultSequenceTrackOrder) {
-          config.order = this.order;
-        }
-        if (this.reversed) {
-          config.revealed = true;
-        }
-        return config;
+      get end() {
+        return this.offset + this.sequence.length;
       }
     }
 
+    const GenomicInterval = function (chr, start, end, features) {
+      this.chr = chr;
+      this.start = start;
+      this.end = end;
+      this.features = features;
+    };
+    GenomicInterval.prototype.contains = function (chr, start, end) {
+      return this.chr === chr && this.start <= start && this.end >= end;
+    };
+    GenomicInterval.prototype.containsRange = function (range) {
+      return this.chr === range.chr && this.start <= range.start && this.end >= range.end;
+    };
+
     /*
      * The MIT License (MIT)
      *
@@ -19342,87 +19580,947 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    class Viewport {
-      constructor(trackView, viewportColumn, referenceFrame, width) {
-        this.guid = guid$2();
-        this.trackView = trackView;
-        this.referenceFrame = referenceFrame;
-        this.browser = trackView.browser;
-        this.$viewport = $$1('<div class="igv-viewport">');
-        viewportColumn.appendChild(this.$viewport.get(0));
-        if (trackView.track.height) {
-          this.$viewport.get(0).style.height = `${trackView.track.height}px`;
-        }
-
-        // Create an alert dialog for the sequence track to copy ref sequence to.
-        if (trackView.track instanceof SequenceTrack) {
-          this.alert = new AlertDialog(this.$viewport.get(0));
-        }
-        this.contentTop = 0;
-        this.contentHeight = this.$viewport.height();
-        this.$viewport.width(width);
-        this.initializationHelper();
-      }
-      initializationHelper() {}
-      showMessage(message) {
-        if (!this.messageDiv) {
-          this.messageDiv = document.createElement('div');
-          this.messageDiv.className = 'igv-viewport-message';
-          //this.contentDiv.append(this.messageDiv)
-          this.$viewport.append($$1(this.messageDiv));
-        }
-        this.messageDiv.textContent = message;
-        this.messageDiv.style.display = 'inline-block';
-      }
-      hideMessage(message) {
-        if (this.messageDiv) this.messageDiv.style.display = 'none';
-      }
-      setTrackLabel(label) {}
-      startSpinner() {}
-      stopSpinner() {}
-      checkZoomIn() {
-        return true;
-      }
-      shift() {}
-      setTop(contentTop) {
-        this.contentTop = contentTop;
-        this.$viewport.height();
-
-        //this.$content.css('top', `${contentTop}px`)
-        //
-        // if (undefined === this.canvasVerticalRange || this.canvasVerticalRange.bottom < viewBottom || this.canvasVerticalRange.top > viewTop) {
-        //     console.log("Repaint " + this.canvasVerticalRange)
-        //    this.repaint()
-        // }
-      }
+    const splitLines$3 = splitLines$5;
+    const reservedProperties = new Set(['fastaURL', 'indexURL', 'compressedIndexURL', 'cytobandURL', 'indexed']);
+    class FastaSequence {
+      constructor(reference) {
+        this.file = reference.fastaURL;
+        this.indexFile = reference.indexURL || reference.indexFile || this.file + ".fai";
+        this.compressedIndexFile = reference.compressedIndexURL || false;
+        this.withCredentials = reference.withCredentials;
+        this.chromosomeNames = [];
+        this.chromosomes = {};
+        this.sequences = {};
+        this.offsets = {};
 
-      async loadFeatures() {
-        return undefined;
-      }
-      clearCache() {}
-      async repaint() {}
-      draw(drawConfiguration, features, roiFeatures) {
-        console.log('Viewport - draw(drawConfiguration, features, roiFeatures)');
-      }
-      checkContentHeight(features) {
-        let track = this.trackView.track;
-        features = features || this.cachedFeatures;
-        if ("FILL" === track.displayMode) {
-          this.setContentHeight(this.$viewport.height());
-        } else if (typeof track.computePixelHeight === 'function') {
-          if (features && features.length > 0) {
-            let requiredContentHeight = track.computePixelHeight(features);
-            //let currentContentHeight = this.$content.height()
-            let currentContentHeight = this.contentHeight;
-            if (requiredContentHeight !== currentContentHeight) {
-              this.setContentHeight(requiredContentHeight);
-            }
+        // Build a track-like config object from the referenceObject
+        const config = {};
+        for (let key in reference) {
+          if (reference.hasOwnProperty(key) && !reservedProperties.has(key)) {
+            config[key] = reference[key];
           }
         }
+        this.config = config;
       }
-      getContentHeight() {
-        //return this.$content.height()
-        return this.contentHeight;
+      async init() {
+        return this.getIndex();
+      }
+      async getSequence(chr, start, end) {
+        const hasCachedSquence = this.interval && this.interval.contains(chr, start, end);
+        if (!hasCachedSquence) {
+          // Expand query, to minimum of 50kb
+          let qstart = start;
+          let qend = end;
+          if (end - start < 50000) {
+            const w = end - start;
+            const center = Math.round(start + w / 2);
+            qstart = Math.max(0, center - 25000);
+            qend = center + 25000;
+          }
+          const seqBytes = await this.readSequence(chr, qstart, qend);
+          this.interval = new GenomicInterval(chr, qstart, qend, seqBytes);
+        }
+        const offset = start - this.interval.start;
+        const n = end - start;
+        const seq = this.interval.features ? this.interval.features.substr(offset, n) : null;
+        return seq;
+      }
+      async getIndex() {
+        if (this.index) {
+          return this.index;
+        } else {
+          const data = await igvxhr.load(this.indexFile, buildOptions(this.config));
+          const lines = splitLines$3(data);
+          const len = lines.length;
+          let lineNo = 0;
+          let order = 0;
+          this.index = {};
+          while (lineNo < len) {
+            const tokens = lines[lineNo++].split("\t");
+            const nTokens = tokens.length;
+            if (nTokens === 5) {
+              // Parse the index line.
+              const chr = tokens[0];
+              const size = parseInt(tokens[1]);
+              const position = parseInt(tokens[2]);
+              const basesPerLine = parseInt(tokens[3]);
+              const bytesPerLine = parseInt(tokens[4]);
+              const indexEntry = {
+                size: size,
+                position: position,
+                basesPerLine: basesPerLine,
+                bytesPerLine: bytesPerLine
+              };
+              this.chromosomeNames.push(chr);
+              this.index[chr] = indexEntry;
+              this.chromosomes[chr] = new Chromosome(chr, order++, size);
+            }
+          }
+          return this.index;
+        }
+      }
+
+      //Code is losely based on https://github.com/GMOD/bgzf-filehandle
+      //Reworked however in orde to work with the igvxhr interface for loading files
+      //Additionally, replaced calls to the Long.js interface with standard JS calls for ArrayBuffers and the associated views
+      //
+      //The compressed index is an array of blocks, with each block being a pair: compressed-position & uncompressed-position (both in bytes)
+      async getCompressedIndex() {
+        const GZI_NUM_BYTES_OFFSET = 8;
+        const GZI_NUM_BYTES_BLOCK = 8;
+        if (this.compressedIndex) {
+          return this.compressedIndex;
+        }
+        if (!this.compressedIndexFile) {
+          this.compressedIndex = [];
+          return this.compressedIndex;
+        }
+        //In contrast to the 'normal' reference (for which the index is chromosome based), this index is block-based
+        //As such there is not need to make it a hash. An array is sufficient.
+        this.compressedIndex = [];
+        const gziData = await igvxhr.loadArrayBuffer(this.compressedIndexFile, buildOptions(this.config));
+        const givenFileSize = gziData.byteLength;
+        if (givenFileSize < GZI_NUM_BYTES_OFFSET) {
+          console.log("Cannot parse GZI index file: length (" + givenFileSize + " bytes) is insufficient to determine content of index.");
+          return this.compressedIndex;
+        }
+        //First 8 bytes are a little endian unsigned bigint (64bit), indicating the number of blocks in the index.
+        const numBlocksBuffer = gziData.slice(0, GZI_NUM_BYTES_OFFSET);
+        const numBlocks = Number(new DataView(numBlocksBuffer).getBigUint64(0, true));
+        //The remainder of the gzi content are pairs of little endian unsigned bigint (64bit) numbers.
+        //The first of the pair is the compressed position of a block
+        //The second of the pair is the uncompressed position of a block
+
+        //Sanity check:
+        //Is the size of the array-buffer (of the entire file) correct with regards to the number of blocks detailled by the first 8 bytes of the file?
+        //Total file-size should be:
+        // 8 + 2*(num_entries*8) bytes, with the first 8 bytes indicating the number of entries
+        const expectedFileSize = GZI_NUM_BYTES_OFFSET + numBlocks * 2 * GZI_NUM_BYTES_BLOCK;
+        if (givenFileSize != expectedFileSize) {
+          console.log("Incorrect file size of reference genome index. Expected : " + expectedFileSize + ". Received : " + givenFileSize);
+          return this.compressedIndex;
+        }
+
+        //Push the first block to the index: the first block always has positions 0 for both the compressed and uncompressed file
+        this.compressedIndex.push([0, 0]);
+
+        //Further process all the blocks of the GZI index, and keep them in memory
+        for (let blockNumber = 0; blockNumber < numBlocks; blockNumber++) {
+          const bufferBlockStart = GZI_NUM_BYTES_OFFSET + blockNumber * 2 * GZI_NUM_BYTES_BLOCK;
+          const bufferBlockEnd = GZI_NUM_BYTES_OFFSET + blockNumber * 2 * GZI_NUM_BYTES_BLOCK + 2 * GZI_NUM_BYTES_BLOCK;
+          const bufferBlock = gziData.slice(bufferBlockStart, bufferBlockEnd);
+          const viewBlock = new DataView(bufferBlock);
+          const compressedPosition = Number(viewBlock.getBigUint64(0, true)); //First 8 bytes
+          const uncompressedPosition = Number(viewBlock.getBigUint64(GZI_NUM_BYTES_BLOCK, true)); //Last 8 bytes
+          this.compressedIndex.push([compressedPosition, uncompressedPosition]);
+        }
+        return this.compressedIndex;
+      }
+
+      //The Fasta-index gives a byte-position of the chromosomal sequences within the FASTA file.
+      //These locations need to be remapped to the locations within the zipped reference genome, using the GZI index
+      //This function provides this functionality by 
+      //1) taking the indicated start/stop byte locations within the UNCOMPRESSED FASTA file
+      //2) remapping these byte locations to the correct blocks (and associated positions) within the COMPRESSED FASTA file
+      //Subsequently, the calling method can then extract the correct blocks from the compressed FASTA files and uncompressed the data
+      async getRelevantCompressedBlockNumbers(queryPositionStart, queryPositionEnd) {
+        const UNCOMPRESSED_POSITION = 1;
+        //Fallback for impossible values
+        if (queryPositionStart < 0 || queryPositionEnd < 0 || queryPositionEnd < queryPositionStart) {
+          console.log("Incompatible query positions for reference-genome. Start:" + queryPositionStart + " | End:" + queryPositionEnd);
+          return [];
+        }
+        //Ensure compressed index is loaded
+        await this.getCompressedIndex();
+        let result = [];
+        //Now search for the correct block-numbers (going from 0 to length(compressed-index)) which overlap with the provided byte-positions
+        const lowestBlockNumber = 0;
+        const highestBlockNumber = this.compressedIndex.length - 1;
+        //Failsafe if for some reason the compressed index wasn't loaded or doesn't contain any data
+        if (this.compressedIndex.length == 0) {
+          console.log("Compressed index does not contain any content");
+          return [];
+        }
+        //Failsafe: if the queryPositionStart is greater than the uncompressed-position of the final block,
+        //then this final block is the only possible result
+        if (queryPositionStart > this.compressedIndex[highestBlockNumber][UNCOMPRESSED_POSITION]) {
+          return [highestBlockNumber];
+        }
+
+        //Rather than doing a linear search over all blocks, a binary search is done for speed considerations
+        //We are searching for the highest block number for which its position is smaller than the query start position
+        //Afterwards we will simply expand the blocks until the entire query range is covered
+        let searchLow = lowestBlockNumber;
+        let searchHigh = highestBlockNumber;
+        let searchPosition = Math.floor(this.compressedIndex.length / 2);
+        let maxIterations = this.compressedIndex.length + 1;
+        let solutionFound = false;
+        //instead of doing a while(true), this for-loop prevents eternal loops in case of issues
+        for (let iteration = 0; iteration < maxIterations; iteration++) {
+          const searchUncompressedPosition = this.compressedIndex[searchPosition][UNCOMPRESSED_POSITION];
+          const nextSearchUncompressedPosition = searchPosition < this.compressedIndex.length - 1 ? this.compressedIndex[searchPosition + 1][UNCOMPRESSED_POSITION] : Infinity;
+          //The query position lies within the current search block
+          if (searchUncompressedPosition <= queryPositionStart && nextSearchUncompressedPosition > queryPositionStart) {
+            solutionFound = true;
+            break; //searchPosition is the correct block number index
+          }
+          //Current block lies before the query position
+          else if (searchUncompressedPosition < queryPositionStart) {
+            searchLow = searchPosition + 1;
+          }
+          //Current block lies after the query position
+          else {
+            searchHigh = searchPosition - 1;
+          }
+          searchPosition = Math.ceil((searchHigh - searchLow) / 2) + searchLow;
+        }
+        //If for some reason the binary search did not reveal a correct block index, then we return the empty result
+        if (!solutionFound) {
+          console.log("No blocks within compressed index found that correspond with query positions " + queryPositionStart + "," + queryPositionEnd);
+          console.log(this.compressedIndex);
+          return [];
+        }
+
+        //Now extend the result by adding additional blocks until the entire query range is covered
+        result.push(searchPosition);
+        for (let blockIndex = searchPosition + 1; blockIndex < this.compressedIndex.length; blockIndex++) {
+          result.push(blockIndex);
+          const blockUncompressedPosition = this.compressedIndex[blockIndex][UNCOMPRESSED_POSITION];
+          if (blockUncompressedPosition >= queryPositionEnd) {
+            break;
+          }
+        }
+
+        //It is possible that the query end position lies AFTER the start of the final block
+        //If this is the case, we add a 'fake' negative index which will be interpreted by the loadAndUncompressBlocks method as an indicator
+        //to read until the end of the file 
+        const finalRelevantBlock = result[result.length - 1];
+        const finalIndexBlock = this.compressedIndex.length - 1;
+        if (finalRelevantBlock === finalIndexBlock && this.compressedIndex[finalRelevantBlock][UNCOMPRESSED_POSITION] < queryPositionEnd) {
+          result.push(-1);
+        }
+        return result;
+      }
+
+      //Load the content from the blockIndices.
+      //This is done on a per-block basis
+      //Content of the first block will be trimmed in order to match the expected offset
+      async loadAndUncompressBlocks(blockIndices, startByte) {
+        const COMPRESSED_POSITION = 0;
+        const UNCOMPRESSED_POSITION = 1;
+        //Normally the compressed index should already exist, we're just makeing sure here
+        await this.getCompressedIndex();
+        if (blockIndices.length == 0) {
+          return "";
+        }
+
+        //Storing data in seperate array with indices in order to assert order due to async behaviour of loops
+        let resultCache = Array(blockIndices.length - 1);
+        for (let i = 0; i < blockIndices.length - 1; i++) {
+          const currentBlockNumber = blockIndices[i];
+          const currentBlockInfo = this.compressedIndex[currentBlockNumber];
+          const currentBlockCompressedPosition = currentBlockInfo[COMPRESSED_POSITION];
+          const nextBlockNumber = blockIndices[i + 1];
+          let compressedBytes = [];
+          if (nextBlockNumber != -1) {
+            //default : read current entire block only
+            const nextBlockInfo = this.compressedIndex[nextBlockNumber];
+            const nextBlockCompressedPosition = nextBlockInfo[COMPRESSED_POSITION];
+            const compressedLength = nextBlockCompressedPosition - currentBlockCompressedPosition;
+            compressedBytes = await igvxhr.loadArrayBuffer(this.file, buildOptions(this.config, {
+              range: {
+                start: currentBlockCompressedPosition,
+                size: compressedLength
+              }
+            }));
+          } else {
+            // special case for query within final block: read until the end of the file
+            compressedBytes = await igvxhr.loadArrayBuffer(this.file, buildOptions(this.config, {
+              range: {
+                start: currentBlockCompressedPosition
+              }
+            }));
+          }
+          //now unzip the compressed bytes, and store them in the resultCache
+          const uncompressedBytes = await unbgzf(compressedBytes);
+          resultCache[i] = uncompressedBytes;
+        }
+
+        //Iterate over the result cache, create sequences from the data, and create a full sequence string from the data
+        let result = "";
+        for (let i = 0; i < resultCache.length; i++) {
+          for (let j = 0; j < resultCache[i].length; j++) {
+            const c = String.fromCharCode(resultCache[i][j]);
+            result = result + c;
+          }
+        }
+
+        //postprocess this data: because entire blocks are read we need to remove the first N bases of the first used block, 
+        //which are not included in the original query positions
+        const firstBlockInfo = this.compressedIndex[blockIndices[0]];
+        const offset = startByte - firstBlockInfo[UNCOMPRESSED_POSITION];
+        result = result.substring(offset);
+        return result;
+      }
+      async readSequence(chr, qstart, qend) {
+        await this.getIndex();
+        await this.getCompressedIndex(); //This will work even if no compressed index file is set
+
+        const idxEntry = this.index[chr];
+        if (!idxEntry) {
+          console.log("No index entry for chr: " + chr);
+          // Tag interval with null so we don't try again
+          this.interval = new GenomicInterval(chr, qstart, qend, null);
+          return null;
+        }
+        const start = Math.max(0, qstart); // qstart should never be < 0
+        const end = Math.min(idxEntry.size, qend);
+        const bytesPerLine = idxEntry.bytesPerLine;
+        const basesPerLine = idxEntry.basesPerLine;
+        const position = idxEntry.position;
+        const nEndBytes = bytesPerLine - basesPerLine;
+        const startLine = Math.floor(start / basesPerLine);
+        const endLine = Math.floor(end / basesPerLine);
+        const base0 = startLine * basesPerLine; // Base at beginning of start line
+        const offset = start - base0;
+        const startByte = position + startLine * bytesPerLine + offset;
+        const base1 = endLine * basesPerLine;
+        const offset1 = end - base1;
+        const endByte = position + endLine * bytesPerLine + offset1 - 1;
+        const byteCount = endByte - startByte + 1;
+        if (byteCount <= 0) {
+          console.error("No sequence for " + chr + ":" + qstart + "-" + qend);
+          return null;
+        }
+
+        //If the compressed index file is set, then we are dealing with a compressed genome sequence
+        //The selection of startByte/endByte is done for the non-compressed genome sequence.
+        //These need to be 'converted' to the correct byte positions in the compressed genome sequence,
+        //by making use of the compressed index (GZI file)
+        let allBytes;
+        if (!this.compressedIndexFile) {
+          allBytes = await igvxhr.load(this.file, buildOptions(this.config, {
+            range: {
+              start: startByte,
+              size: byteCount
+            }
+          }));
+        } else {
+          let relevantBlockIndices = await this.getRelevantCompressedBlockNumbers(startByte, endByte);
+          if (relevantBlockIndices.length === 0) {
+            console.log("No blocks in the compressed index that correspond with the requested byte positions (" + startByte + "," + endByte + ")");
+            return null;
+          }
+          allBytes = await this.loadAndUncompressBlocks(relevantBlockIndices, startByte);
+        }
+        if (!allBytes) {
+          return null;
+        }
+        let nBases,
+          seqBytes = "",
+          srcPos = 0,
+          allBytesLength = allBytes.length;
+        if (offset > 0) {
+          nBases = Math.min(end - start, basesPerLine - offset);
+          seqBytes += allBytes.substr(srcPos, nBases);
+          srcPos += nBases + nEndBytes;
+        }
+        while (srcPos < allBytesLength) {
+          nBases = Math.min(basesPerLine, allBytesLength - srcPos);
+          seqBytes += allBytes.substr(srcPos, nBases);
+          srcPos += nBases + nEndBytes;
+        }
+        return seqBytes;
+      }
+    }
+
+    /*
+     * The MIT License (MIT)
+     *
+     * Copyright (c) 2014 Broad Institute
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in
+     * all copies or substantial portions of the Software.
+     *
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     * THE SOFTWARE.
+     */
+    const splitLines$2 = splitLines$5;
+    class ChromSizes {
+      constructor(url) {
+        this.url = url;
+        this.chromosomeNames = [];
+        this.chromosomes = {};
+      }
+      async init() {
+        return this.loadAll();
+      }
+      async getSequence(chr, start, end) {
+        return undefined; // TODO -- return array of "N"s?
+      }
+
+      async loadAll() {
+        let data;
+        if (isDataURL(this.url)) {
+          let bytes = decodeDataURI$1(this.fastaURL);
+          data = "";
+          for (let b of bytes) {
+            data += String.fromCharCode(b);
+          }
+        } else {
+          data = await igvxhr.load(this.url, {});
+        }
+        this.chromosomeNames = [];
+        this.chromosomes = {};
+        const lines = splitLines$2(data);
+        let order = 0;
+        for (let nextLine of lines) {
+          const tokens = nextLine.split('\t');
+          this.chromosomeNames.push(tokens[0]);
+          const chrLength = Number.parseInt(tokens[1]);
+          const chromosome = new Chromosome(tokens[0], order++, chrLength);
+          this.chromosomes[tokens[0]] = chromosome;
+        }
+      }
+    }
+
+    async function loadFasta(reference) {
+      let fasta;
+      if ("chromsizes" === reference.format) {
+        fasta = new ChromSizes(reference.fastaURL);
+      } else if (isDataURL(reference.fastaURL) || reference.indexed === false) {
+        fasta = new NonIndexedFasta(reference);
+      } else {
+        fasta = new FastaSequence(reference);
+      }
+      await fasta.init();
+      return fasta;
+    }
+
+    const defaultNucleotideColors = {
+      "A": "rgb(  0, 200,   0)",
+      "C": "rgb(  0,0,200)",
+      "T": "rgb(255,0,0)",
+      "G": "rgb(209,113,  5)",
+      "N": "rgb(80,80,80)"
+    };
+
+    /*
+     * The MIT License (MIT)
+     *
+     * Copyright (c) 2014 Broad Institute
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in
+     * all copies or substantial portions of the Software.
+     *
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     * THE SOFTWARE.
+     */
+    const defaultSequenceTrackOrder = Number.MIN_SAFE_INTEGER;
+    const translationDict = {
+      'TTT': 'F',
+      'TTC': 'F',
+      'TTA': 'L',
+      'TTG': 'L',
+      'CTT': 'L',
+      'CTC': 'L',
+      'CTA': 'L',
+      'CTG': 'L',
+      'ATT': 'I',
+      'ATC': 'I',
+      'ATA': 'I',
+      'ATG': 'M',
+      'GTT': 'V',
+      'GTC': 'V',
+      'GTA': 'V',
+      'GTG': 'V',
+      'TCT': 'S',
+      'TCC': 'S',
+      'TCA': 'S',
+      'TCG': 'S',
+      'CCT': 'P',
+      'CCC': 'P',
+      'CCA': 'P',
+      'CCG': 'P',
+      'ACT': 'T',
+      'ACC': 'T',
+      'ACA': 'T',
+      'ACG': 'T',
+      'GCT': 'A',
+      'GCC': 'A',
+      'GCA': 'A',
+      'GCG': 'A',
+      'TAT': 'Y',
+      'TAC': 'Y',
+      'TAA': 'STOP',
+      'TAG': 'STOP',
+      'CAT': 'H',
+      'CAC': 'H',
+      'CAA': 'Q',
+      'CAG': 'Q',
+      'AAT': 'N',
+      'AAC': 'N',
+      'AAA': 'K',
+      'AAG': 'K',
+      'GAT': 'D',
+      'GAC': 'D',
+      'GAA': 'E',
+      'GAG': 'E',
+      'TGT': 'C',
+      'TGC': 'C',
+      'TGA': 'STOP',
+      'TGG': 'W',
+      'CGT': 'R',
+      'CGC': 'R',
+      'CGA': 'R',
+      'CGG': 'R',
+      'AGT': 'S',
+      'AGC': 'S',
+      'AGA': 'R',
+      'AGG': 'R',
+      'GGT': 'G',
+      'GGC': 'G',
+      'GGA': 'G',
+      'GGG': 'G'
+    };
+    const complement = {};
+    const t1 = ['A', 'G', 'C', 'T', 'Y', 'R', 'W', 'S', 'K', 'M', 'D', 'V', 'H', 'B', 'N', 'X'];
+    const t2 = ['T', 'C', 'G', 'A', 'R', 'Y', 'W', 'S', 'M', 'K', 'H', 'B', 'D', 'V', 'N', 'X'];
+    for (let i = 0; i < t1.length; i++) {
+      complement[t1[i]] = t2[i];
+      complement[t1[i].toLowerCase()] = t2[i].toLowerCase();
+    }
+    const DEFAULT_HEIGHT = 25;
+    const TRANSLATED_HEIGHT = 115;
+    const SEQUENCE_HEIGHT = 15;
+    const FRAME_HEIGHT = 25;
+    const FRAME_BORDER = 5;
+    const BP_PER_PIXEL_THRESHOLD = 1 / 10;
+    const bppFeatureFetchThreshold = 10;
+    class SequenceTrack {
+      constructor(config, browser) {
+        this.config = config;
+        this.browser = browser;
+        this.type = "sequence";
+        this.removable = config.removable === undefined ? true : config.removable; // Defaults to true
+        this.name = config.name;
+        this.id = config.id;
+        this.sequenceType = config.sequenceType || "dna"; //   dna | rna | prot
+        this.disableButtons = false;
+        this.order = config.order || defaultSequenceTrackOrder;
+        this.ignoreTrackMenu = false;
+        this.reversed = config.reversed === true;
+        this.frameTranslate = config.frameTranslate === true;
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
+
+        // Hack for backward compatibility
+        if (config.url) {
+          config.fastaURL = config.url;
+        }
+        if (!config.fastaURL) {
+          // Mark this as the genome reference sequence ==> backward compatibility convention
+          this.id = config.id || "sequence";
+        }
+      }
+      menuItemList() {
+        return [{
+          name: this.reversed ? "Forward" : "Reverse",
+          click: () => {
+            this.reversed = !this.reversed;
+            this.trackView.repaintViews();
+          }
+        }, {
+          name: this.frameTranslate ? "Close Translation" : "Three-frame Translate",
+          click: () => {
+            this.frameTranslate = !this.frameTranslate;
+            if (this.frameTranslate) {
+              for (let vp of this.trackView.viewports) {
+                vp.setContentHeight(TRANSLATED_HEIGHT);
+              }
+              this.trackView.setTrackHeight(TRANSLATED_HEIGHT);
+            } else {
+              for (let vp of this.trackView.viewports) {
+                vp.setContentHeight(DEFAULT_HEIGHT);
+              }
+              this.trackView.setTrackHeight(DEFAULT_HEIGHT);
+            }
+            this.trackView.repaintViews();
+          }
+        }];
+      }
+      contextMenuItemList(clickState) {
+        const viewport = clickState.viewport;
+        if (viewport.referenceFrame.bpPerPixel <= 1) {
+          const pixelWidth = viewport.getWidth();
+          const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
+          const chr = viewport.referenceFrame.chr;
+          const start = Math.floor(viewport.referenceFrame.start);
+          const end = Math.ceil(start + bpWindow);
+          const items = [{
+            label: this.reversed ? 'View visible sequence (reversed)...' : 'View visible sequence...',
+            click: async () => {
+              let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
+              if (!seq) {
+                seq = "Unknown sequence";
+              } else if (this.reversed) {
+                seq = reverseComplementSequence(seq);
+              }
+              this.browser.alert.present(seq);
+            }
+          }];
+          if (isSecureContext()) {
+            items.push({
+              label: 'Copy visible sequence',
+              click: async () => {
+                let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
+                if (!seq) {
+                  seq = "Unknown sequence";
+                } else if (this.reversed) {
+                  seq = reverseComplementSequence(seq);
+                }
+                try {
+                  await navigator.clipboard.writeText(seq);
+                } catch (e) {
+                  console.error(e);
+                  this.browser.alert.present(`error copying sequence to clipboard ${e}`);
+                }
+              }
+            });
+          }
+          items.push('<hr/>');
+          return items;
+        } else {
+          return undefined;
+        }
+      }
+      translateSequence(seq) {
+        const threeFrame = [[], [], []];
+        for (let fNum of [0, 1, 2]) {
+          let idx = fNum;
+          while (seq.length - idx >= 3) {
+            let st = seq.slice(idx, idx + 3);
+            if (this.reversed) {
+              st = st.split('').reverse().join('');
+            }
+            const aa = translationDict[st.toUpperCase()] || "";
+            threeFrame[fNum].push({
+              codons: st,
+              aminoA: aa
+            });
+            idx += 3;
+          }
+        }
+        return threeFrame;
+      }
+
+      /**
+       * Return the source for sequence.  If an explicit fasta url is defined, use it, otherwise fetch sequence
+       * from the current genome
+       * *
+       * @returns {Promise<WrappedFasta|*>}
+       */
+      async getSequenceSource() {
+        if (this.config.fastaURL) {
+          if (!this.fasta) {
+            this.fasta = new WrappedFasta(this.config, this.browser.genome);
+            await this.fasta.init();
+          }
+          return this.fasta;
+        } else {
+          return this.browser.genome.sequence;
+        }
+      }
+      async getFeatures(chr, start, end, bpPerPixel) {
+        start = Math.floor(start);
+        end = Math.floor(end);
+        if (bpPerPixel && bpPerPixel > bppFeatureFetchThreshold) {
+          return null;
+        } else {
+          const sequenceSource = await this.getSequenceSource();
+          const sequence = await sequenceSource.getSequence(chr, start, end);
+          return {
+            bpStart: start,
+            sequence: sequence
+          };
+        }
+      }
+      draw(options) {
+        const ctx = options.context;
+        if (options.features) {
+          let sequence = options.features.sequence;
+          if (!sequence) {
+            return;
+          }
+          if (this.reversed) {
+            sequence = sequence.split('').map(function (cv) {
+              return complement[cv];
+            }).join('');
+          }
+          const sequenceBpStart = options.features.bpStart; // genomic position at start of sequence
+          const bpEnd = 1 + options.bpStart + options.pixelWidth * options.bpPerPixel;
+          for (let bp = Math.floor(options.bpStart); bp <= bpEnd; bp++) {
+            const seqIdx = Math.floor(bp - sequenceBpStart);
+            if (seqIdx >= 0 && seqIdx < sequence.length) {
+              const offsetBP = bp - options.bpStart;
+              const aPixel = offsetBP / options.bpPerPixel;
+              const pixelWidth = 1 / options.bpPerPixel;
+              const baseLetter = sequence[seqIdx];
+              const color = this.fillColor(baseLetter.toUpperCase());
+              if (options.bpPerPixel > BP_PER_PIXEL_THRESHOLD) {
+                IGVGraphics.fillRect(ctx, aPixel, FRAME_BORDER, pixelWidth, SEQUENCE_HEIGHT - FRAME_BORDER, {
+                  fillStyle: color
+                });
+              } else {
+                const textPixel = aPixel + 0.5 * (pixelWidth - ctx.measureText(baseLetter).width);
+                if ('y' === options.axis) {
+                  ctx.save();
+                  IGVGraphics.labelTransformWithContext(ctx, textPixel);
+                  IGVGraphics.strokeText(ctx, baseLetter, textPixel, SEQUENCE_HEIGHT, {
+                    strokeStyle: color
+                  });
+                  ctx.restore();
+                } else {
+                  IGVGraphics.strokeText(ctx, baseLetter, textPixel, SEQUENCE_HEIGHT, {
+                    strokeStyle: color
+                  });
+                }
+              }
+            }
+          }
+          if (this.frameTranslate) {
+            let y = SEQUENCE_HEIGHT + 2 * FRAME_BORDER;
+            const translatedSequence = this.translateSequence(sequence);
+            for (let fNum = 0; fNum < translatedSequence.length; fNum++) {
+              // == 3, 1 for each frame
+
+              const aaSequence = translatedSequence[fNum]; // AA sequence for this frame
+
+              for (let idx = 0; idx < aaSequence.length; idx++) {
+                let color = 0 === idx % 2 ? 'rgb(160,160,160)' : 'rgb(224,224,224)';
+                const cv = aaSequence[idx];
+                const bpPos = sequenceBpStart + fNum + idx * 3;
+                const bpOffset = bpPos - options.bpStart;
+                const p0 = Math.floor(bpOffset / options.bpPerPixel);
+                const p1 = Math.floor((bpOffset + 3) / options.bpPerPixel);
+                const pc = Math.round((p0 + p1) / 2);
+                if (p1 < 0) {
+                  continue; // off left edge
+                } else if (p0 > options.pixelWidth) {
+                  break; // off right edge
+                }
+
+                let aaLabel = cv.aminoA;
+                if (cv.aminoA.indexOf('STOP') > -1) {
+                  color = 'rgb(255, 0, 0)';
+                  aaLabel = 'STOP'; //Color blind accessible
+                } else if (cv.aminoA === 'M') {
+                  color = 'rgb(0, 153, 0)';
+                  aaLabel = 'START'; //Color blind accessible
+                }
+
+                IGVGraphics.fillRect(ctx, p0, y, p1 - p0, FRAME_HEIGHT, {
+                  fillStyle: color
+                });
+                if (options.bpPerPixel <= 1 / 10) {
+                  IGVGraphics.strokeText(ctx, aaLabel, pc - ctx.measureText(aaLabel).width / 2, y + 15);
+                }
+              }
+              y += FRAME_HEIGHT + FRAME_BORDER;
+            }
+          }
+        }
+      }
+      get supportsWholeGenome() {
+        return false;
+      }
+      computePixelHeight(ignore) {
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
+        return this.height;
+      }
+      fillColor(index) {
+        if (this.color) {
+          return this.color;
+        } else if ("dna" === this.sequenceType) {
+          // return this.browser.nucleotideColors[index] || 'gray'
+          return defaultNucleotideColors[index] || 'gray';
+        } else {
+          return 'rgb(0, 0, 150)';
+        }
+      }
+
+      /**
+       * Return the current state of the track.  Used to create sessions and bookmarks.
+       *
+       * @returns {*|{}}
+       */
+      getState() {
+        const config = {
+          type: "sequence"
+        };
+        if (this.order !== defaultSequenceTrackOrder) {
+          config.order = this.order;
+        }
+        if (this.reversed) {
+          config.revealed = true;
+        }
+        return config;
+      }
+    }
+
+    /**
+     * Wrapper for a Fasta object that does chr name alias translation.   This is not neccessary for the genome fasta,
+     * as it defines the reference name, but can be neccessary if loading an additional fasta as a track
+     *
+     */
+    class WrappedFasta {
+      constructor(config, genome) {
+        this.config = config;
+        this.genome = genome;
+      }
+      async init() {
+        this.fasta = await loadFasta(this.config);
+        this.chrNameMap = new Map();
+        for (let name of this.fasta.chromosomeNames) {
+          this.chrNameMap.set(this.genome.getChromosomeName(name), name);
+        }
+      }
+      async getSequence(chr, start, end) {
+        const chrName = this.chrNameMap.has(chr) ? this.chrNameMap.get(chr) : chr;
+        return this.fasta.getSequence(chrName, start, end);
+      }
+    }
+
+    /*
+     * The MIT License (MIT)
+     *
+     * Copyright (c) 2014 Broad Institute
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in
+     * all copies or substantial portions of the Software.
+     *
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     * THE SOFTWARE.
+     */
+    class Viewport {
+      constructor(trackView, viewportColumn, referenceFrame, width) {
+        this.guid = guid$2();
+        this.trackView = trackView;
+        this.referenceFrame = referenceFrame;
+        this.browser = trackView.browser;
+        this.$viewport = $$1('<div class="igv-viewport">');
+        viewportColumn.appendChild(this.$viewport.get(0));
+        if (trackView.track.height) {
+          this.$viewport.get(0).style.height = `${trackView.track.height}px`;
+        }
+
+        // Create an alert dialog for the sequence track to copy ref sequence to.
+        if (trackView.track instanceof SequenceTrack) {
+          this.alert = new AlertDialog(this.$viewport.get(0));
+        }
+        this.contentTop = 0;
+        this.contentHeight = this.$viewport.height();
+        this.$viewport.width(width);
+        this.initializationHelper();
+      }
+      initializationHelper() {}
+      showMessage(message) {
+        if (!this.messageDiv) {
+          this.messageDiv = document.createElement('div');
+          this.messageDiv.className = 'igv-viewport-message';
+          //this.contentDiv.append(this.messageDiv)
+          this.$viewport.append($$1(this.messageDiv));
+        }
+        this.messageDiv.textContent = message;
+        this.messageDiv.style.display = 'inline-block';
+      }
+      hideMessage(message) {
+        if (this.messageDiv) this.messageDiv.style.display = 'none';
+      }
+      setTrackLabel(label) {}
+      startSpinner() {}
+      stopSpinner() {}
+      checkZoomIn() {
+        return true;
+      }
+      shift() {}
+      setTop(contentTop) {
+        this.contentTop = contentTop;
+        this.$viewport.height();
+
+        //this.$content.css('top', `${contentTop}px`)
+        //
+        // if (undefined === this.canvasVerticalRange || this.canvasVerticalRange.bottom < viewBottom || this.canvasVerticalRange.top > viewTop) {
+        //     console.log("Repaint " + this.canvasVerticalRange)
+        //    this.repaint()
+        // }
+      }
+
+      async loadFeatures() {
+        return undefined;
+      }
+      clearCache() {}
+      async repaint() {}
+      draw(drawConfiguration, features, roiFeatures) {
+        console.log('Viewport - draw(drawConfiguration, features, roiFeatures)');
+      }
+      checkContentHeight(features) {
+        let track = this.trackView.track;
+        features = features || this.cachedFeatures;
+        if ("FILL" === track.displayMode) {
+          this.setContentHeight(this.$viewport.height());
+        } else if (typeof track.computePixelHeight === 'function') {
+          if (features && features.length > 0) {
+            let requiredContentHeight = track.computePixelHeight(features);
+            //let currentContentHeight = this.$content.height()
+            let currentContentHeight = this.contentHeight;
+            if (requiredContentHeight !== currentContentHeight) {
+              this.setContentHeight(requiredContentHeight);
+            }
+          }
+        }
+      }
+      getContentHeight() {
+        //return this.$content.height()
+        return this.contentHeight;
       }
       setContentHeight(contentHeight) {
         this.contentHeight = contentHeight;
@@ -20096,1372 +21194,732 @@
           y: y
         }));
       }
-      /**
-       * rotates the current element
-       */
-      rotate(angle) {
-        var degrees = angle * 180 / Math.PI;
-        this.__addTransform(format("rotate({angle},{cx},{cy})", {
-          angle: degrees,
-          cx: 0,
-          cy: 0
-        }));
-      }
-      /**
-       * translates the current element
-       */
-      translate(x, y) {
-        this.__addTransform(format("translate({x},{y})", {
-          x: x,
-          y: y
-        }));
-      }
-      /**
-       * applies a transform to the current element
-       */
-      transform(a, b, c, d, e, f) {
-        this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {
-          a: a,
-          b: b,
-          c: c,
-          d: d,
-          e: e,
-          f: f
-        }));
-      }
-      /**
-       * Create a new Path Element
-       */
-      beginPath() {
-        var path, parent;
-
-        // Note that there is only one current default path, it is not part of the drawing state.
-        // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
-        this.__currentDefaultPath = "";
-        this.__currentPosition = {};
-        path = this.__createElement("path", {}, true);
-        parent = this.__closestGroupOrSvg();
-        parent.appendChild(path);
-        this.__currentElement = path;
-      }
-      /**
-       * Helper function to apply currentDefaultPath to current path element
-       * @private
-       */
-      __applyCurrentDefaultPath() {
-        var currentElement = this.__currentElement;
-        if (currentElement.nodeName === "path") {
-          currentElement.setAttribute("d", this.__currentDefaultPath);
-        } else {
-          console.error("Attempted to apply path command to node", currentElement.nodeName);
-        }
-      }
-      /**
-       * Helper function to add path command
-       * @private
-       */
-      __addPathCommand(command) {
-        this.__currentDefaultPath += " ";
-        this.__currentDefaultPath += command;
-      }
-      /**
-       * Adds the move command to the current path element,
-       * if the currentPathElement is not empty create a new path element
-       */
-      moveTo(x, y) {
-        if (this.__currentElement.nodeName !== "path") {
-          this.beginPath();
-        }
-
-        // creates a new subpath with the given point
-        this.__currentPosition = {
-          x: x,
-          y: y
-        };
-        this.__addPathCommand(format("M {x} {y}", {
-          x: x,
-          y: y
-        }));
-      }
-      /**
-       * Closes the current path
-       */
-      closePath() {
-        if (this.__currentDefaultPath) {
-          this.__addPathCommand("Z");
-        }
-      }
-      /**
-       * Adds a line to command
-       */
-      lineTo(x, y) {
-        this.__currentPosition = {
-          x: x,
-          y: y
-        };
-        if (this.__currentDefaultPath && this.__currentDefaultPath.indexOf('M') > -1) {
-          this.__addPathCommand(format("L {x} {y}", {
-            x: x,
-            y: y
-          }));
-        } else {
-          this.__addPathCommand(format("M {x} {y}", {
-            x: x,
-            y: y
-          }));
-        }
-      }
-      /**
-       * Add a bezier command
-       */
-      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-        this.__currentPosition = {
-          x: x,
-          y: y
-        };
-        this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", {
-          cp1x: cp1x,
-          cp1y: cp1y,
-          cp2x: cp2x,
-          cp2y: cp2y,
-          x: x,
-          y: y
-        }));
-      }
-      /**
-       * Adds a quadratic curve to command
-       */
-      quadraticCurveTo(cpx, cpy, x, y) {
-        this.__currentPosition = {
-          x: x,
-          y: y
-        };
-        this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {
-          cpx: cpx,
-          cpy: cpy,
-          x: x,
-          y: y
-        }));
-      }
-      /**
-       * Adds the arcTo to the current path
-       *
-       * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
-       */
-      arcTo(x1, y1, x2, y2, radius) {
-        // Let the point (x0, y0) be the last point in the subpath.
-        var x0 = this.__currentPosition && this.__currentPosition.x;
-        var y0 = this.__currentPosition && this.__currentPosition.y;
-
-        // First ensure there is a subpath for (x1, y1).
-        if (typeof x0 == "undefined" || typeof y0 == "undefined") {
-          return;
-        }
-
-        // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
-        if (radius < 0) {
-          throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
-        }
-
-        // If the point (x0, y0) is equal to the point (x1, y1),
-        // or if the point (x1, y1) is equal to the point (x2, y2),
-        // or if the radius radius is zero,
-        // then the method must add the point (x1, y1) to the subpath,
-        // and connect that point to the previous point (x0, y0) by a straight line.
-        if (x0 === x1 && y0 === y1 || x1 === x2 && y1 === y2 || radius === 0) {
-          this.lineTo(x1, y1);
-          return;
-        }
-
-        // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
-        // then the method must add the point (x1, y1) to the subpath,
-        // and connect that point to the previous point (x0, y0) by a straight line.
-        var unit_vec_p1_p0 = normalize$1([x0 - x1, y0 - y1]);
-        var unit_vec_p1_p2 = normalize$1([x2 - x1, y2 - y1]);
-        if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
-          this.lineTo(x1, y1);
-          return;
-        }
-
-        // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
-        // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
-        // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
-        // The points at which this circle touches these two lines are called the start and end tangent points respectively.
-
-        // note that both vectors are unit vectors, so the length is 1
-        var cos = unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1];
-        var theta = Math.acos(Math.abs(cos));
-
-        // Calculate origin
-        var unit_vec_p1_origin = normalize$1([unit_vec_p1_p0[0] + unit_vec_p1_p2[0], unit_vec_p1_p0[1] + unit_vec_p1_p2[1]]);
-        var len_p1_origin = radius / Math.sin(theta / 2);
-        var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
-        var y = y1 + len_p1_origin * unit_vec_p1_origin[1];
-
-        // Calculate start angle and end angle
-        // rotate 90deg clockwise (note that y axis points to its down)
-        var unit_vec_origin_start_tangent = [-unit_vec_p1_p0[1], unit_vec_p1_p0[0]];
-        // rotate 90deg counter clockwise (note that y axis points to its down)
-        var unit_vec_origin_end_tangent = [unit_vec_p1_p2[1], -unit_vec_p1_p2[0]];
-        var getAngle = function (vector) {
-          // get angle (clockwise) between vector and (1, 0)
-          var x = vector[0];
-          var y = vector[1];
-          if (y >= 0) {
-            // note that y axis points to its down
-            return Math.acos(x);
-          } else {
-            return -Math.acos(x);
-          }
-        };
-        var startAngle = getAngle(unit_vec_origin_start_tangent);
-        var endAngle = getAngle(unit_vec_origin_end_tangent);
-
-        // Connect the point (x0, y0) to the start tangent point by a straight line
-        this.lineTo(x + unit_vec_origin_start_tangent[0] * radius, y + unit_vec_origin_start_tangent[1] * radius);
-
-        // Connect the start tangent point to the end tangent point by arc
-        // and adding the end tangent point to the subpath.
-        this.arc(x, y, radius, startAngle, endAngle);
-      }
-      /**
-       * Sets the stroke property on the current element
-       */
-      stroke() {
-        if (this.__currentElement.nodeName === "path") {
-          this.__currentElement.setAttribute("paint-order", "fill stroke markers");
-        }
-        this.__applyCurrentDefaultPath();
-        this.__applyStyleToCurrentElement("stroke");
-      }
-      /**
-       * Sets fill properties on the current element
-       */
-      fill() {
-        if (this.__currentElement.nodeName === "path") {
-          this.__currentElement.setAttribute("paint-order", "stroke fill markers");
-        }
-        this.__applyCurrentDefaultPath();
-        this.__applyStyleToCurrentElement("fill");
-      }
-      /**
-       *  Adds a rectangle to the path.
-       */
-      rect(x, y, width, height) {
-        if (this.__currentElement.nodeName !== "path") {
-          this.beginPath();
-        }
-        this.moveTo(x, y);
-        this.lineTo(x + width, y);
-        this.lineTo(x + width, y + height);
-        this.lineTo(x, y + height);
-        this.lineTo(x, y);
-        this.closePath();
-      }
-      /**
-       * adds a rectangle element
-       */
-      fillRect(x, y, width, height) {
-        if (height < 0) {
-          y += height;
-          height = -height;
-        }
-        if (width < 0) {
-          x += width;
-          width = -width;
-        }
-        // See if rect intersects current viewbox
-        var r2 = {
-          x: x,
-          y: y,
-          width: width,
-          height: height
-        };
-        if (this.viewbox) {
-          if (!intersectRect(this.viewbox, r2)) {
-            return;
-          }
-        }
-        var rect, parent;
-        rect = this.__createElement("rect", r2, true);
-        parent = this.__closestGroupOrSvg();
-        parent.appendChild(rect);
-        this.__currentElement = rect;
-        this.__applyStyleToCurrentElement("fill");
-      }
-      /**
-       * Draws a rectangle with no fill
-       * @param x
-       * @param y
-       * @param width
-       * @param height
-       */
-      strokeRect(x, y, width, height) {
-        var rect, parent;
-        rect = this.__createElement("rect", {
-          x: x,
-          y: y,
-          width: width,
-          height: height
-        }, true);
-        parent = this.__closestGroupOrSvg();
-        parent.appendChild(rect);
-        this.__currentElement = rect;
-        this.__applyStyleToCurrentElement("stroke");
-      }
-      // stroke ellipse
-      strokeEllipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW) {
-        this.__ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, 'stroke');
-      }
-
-      // fill ellipse
-      fillEllipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW) {
-        this.__ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, 'fill');
-      }
-
-      // ellipse helper
-      __ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, style) {
-        const config = {
-          cx,
-          cy,
-          rx,
-          ry
-        };
-        const element = this.__createElement('ellipse', config, true);
-        const parent = this.__closestGroupOrSvg();
-        parent.appendChild(element);
-        this.__currentElement = element;
-        this.__applyStyleToCurrentElement(style);
-      }
-
-      /**
-       * Clear entire canvas:
-       * 1. save current transforms
-       * 2. remove all the childNodes of the root g element
-       */
-      __clearCanvas() {
-        var current = this.__closestGroupOrSvg(),
-          transform = current.getAttribute("transform");
-        var rootGroup = this.__root.childNodes[1];
-        var childNodes = rootGroup.childNodes;
-        for (var i = childNodes.length - 1; i >= 0; i--) {
-          if (childNodes[i]) {
-            rootGroup.removeChild(childNodes[i]);
-          }
-        }
-        this.__currentElement = rootGroup;
-        //reset __groupStack as all the child group nodes are all removed.
-        this.__groupStack = [];
-        if (transform) {
-          this.__addTransform(transform);
-        }
-      }
-      /**
-       * "Clears" a canvas by just drawing a white rectangle in the current group.
-       */
-      clearRect(x, y, width, height) {
-        //clear entire canvas
-        if (x === 0 && y === 0 && width === this.width && height === this.height) {
-          this.__clearCanvas();
-          return;
-        }
-        var rect,
-          parent = this.__closestGroupOrSvg();
-        rect = this.__createElement("rect", {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
-          fill: "#FFFFFF"
-        }, true);
-        parent.appendChild(rect);
+      /**
+       * rotates the current element
+       */
+      rotate(angle) {
+        var degrees = angle * 180 / Math.PI;
+        this.__addTransform(format("rotate({angle},{cx},{cy})", {
+          angle: degrees,
+          cx: 0,
+          cy: 0
+        }));
       }
       /**
-       * Adds a linear gradient to a defs tag.
-       * Returns a canvas gradient object that has a reference to it's parent def
+       * translates the current element
        */
-      createLinearGradient(x1, y1, x2, y2) {
-        var grad = this.__createElement("linearGradient", {
-          id: randomString(this.__ids),
-          x1: x1 + "px",
-          x2: x2 + "px",
-          y1: y1 + "px",
-          y2: y2 + "px",
-          "gradientUnits": "userSpaceOnUse"
-        }, false);
-        this.__defs.appendChild(grad);
-        return new CanvasGradient(grad, this);
+      translate(x, y) {
+        this.__addTransform(format("translate({x},{y})", {
+          x: x,
+          y: y
+        }));
       }
       /**
-       * Adds a radial gradient to a defs tag.
-       * Returns a canvas gradient object that has a reference to it's parent def
+       * applies a transform to the current element
        */
-      createRadialGradient(x0, y0, r0, x1, y1, r1) {
-        var grad = this.__createElement("radialGradient", {
-          id: randomString(this.__ids),
-          cx: x1 + "px",
-          cy: y1 + "px",
-          r: r1 + "px",
-          fx: x0 + "px",
-          fy: y0 + "px",
-          "gradientUnits": "userSpaceOnUse"
-        }, false);
-        this.__defs.appendChild(grad);
-        return new CanvasGradient(grad, this);
+      transform(a, b, c, d, e, f) {
+        this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {
+          a: a,
+          b: b,
+          c: c,
+          d: d,
+          e: e,
+          f: f
+        }));
       }
       /**
-       * Parses the font string and returns svg mapping
-       * @private
+       * Create a new Path Element
        */
-      __parseFont() {
-        var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
-        var fontPart = regex.exec(this.font);
-        var data = {
-          style: fontPart[1] || 'normal',
-          size: fontPart[4] || '10px',
-          family: fontPart[6] || 'sans-serif',
-          weight: fontPart[3] || 'normal',
-          decoration: fontPart[2] || 'normal',
-          href: null
-        };
-
-        //canvas doesn't support underline natively, but we can pass this attribute
-        if (this.__fontUnderline === "underline") {
-          data.decoration = "underline";
-        }
+      beginPath() {
+        var path, parent;
 
-        //canvas also doesn't support linking, but we can pass this as well
-        if (this.__fontHref) {
-          data.href = this.__fontHref;
-        }
-        return data;
+        // Note that there is only one current default path, it is not part of the drawing state.
+        // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
+        this.__currentDefaultPath = "";
+        this.__currentPosition = {};
+        path = this.__createElement("path", {}, true);
+        parent = this.__closestGroupOrSvg();
+        parent.appendChild(path);
+        this.__currentElement = path;
       }
       /**
-       * Helper to link text fragments
-       * @param font
-       * @param element
-       * @return {*}
+       * Helper function to apply currentDefaultPath to current path element
        * @private
        */
-      __wrapTextLink(font, element) {
-        if (font.href) {
-          var a = this.__createElement("a");
-          a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
-          a.appendChild(element);
-          return a;
+      __applyCurrentDefaultPath() {
+        var currentElement = this.__currentElement;
+        if (currentElement.nodeName === "path") {
+          currentElement.setAttribute("d", this.__currentDefaultPath);
+        } else {
+          console.error("Attempted to apply path command to node", currentElement.nodeName);
         }
-        return element;
       }
       /**
-       * Fills or strokes text
-       * @param text
-       * @param x
-       * @param y
-       * @param action - stroke or fill
+       * Helper function to add path command
        * @private
        */
-      __applyText(text, x, y, action) {
-        var font = this.__parseFont(),
-          parent = this.__closestGroupOrSvg(),
-          textElement = this.__createElement("text", {
-            "font-family": font.family,
-            "font-size": font.size,
-            "font-style": font.style,
-            "font-weight": font.weight,
-            "text-decoration": font.decoration,
-            "x": x,
-            "y": y,
-            "text-anchor": getTextAnchor(this.textAlign),
-            "dominant-baseline": getDominantBaseline(this.textBaseline)
-          }, true);
-        textElement.appendChild(this.__document.createTextNode(text));
-        this.__currentElement = textElement;
-        this.__applyStyleToCurrentElement(action);
-        parent.appendChild(this.__wrapTextLink(font, textElement));
+      __addPathCommand(command) {
+        this.__currentDefaultPath += " ";
+        this.__currentDefaultPath += command;
       }
       /**
-       * Creates a text element
-       * @param text
-       * @param x
-       * @param y
+       * Adds the move command to the current path element,
+       * if the currentPathElement is not empty create a new path element
        */
-      fillText(text, x, y) {
-        this.__applyText(text, x, y, "fill");
+      moveTo(x, y) {
+        if (this.__currentElement.nodeName !== "path") {
+          this.beginPath();
+        }
+
+        // creates a new subpath with the given point
+        this.__currentPosition = {
+          x: x,
+          y: y
+        };
+        this.__addPathCommand(format("M {x} {y}", {
+          x: x,
+          y: y
+        }));
       }
       /**
-       * Strokes text
-       * @param text
-       * @param x
-       * @param y
+       * Closes the current path
        */
-      strokeText(text, x, y) {
-        this.__applyText(text, x, y, "stroke");
+      closePath() {
+        if (this.__currentDefaultPath) {
+          this.__addPathCommand("Z");
+        }
       }
       /**
-       * No need to implement this for svg.
-       * @param text
-       * @return {TextMetrics}
+       * Adds a line to command
        */
-      measureText(text) {
-        this.__ctx.font = this.font;
-        return this.__ctx.measureText(text);
+      lineTo(x, y) {
+        this.__currentPosition = {
+          x: x,
+          y: y
+        };
+        if (this.__currentDefaultPath && this.__currentDefaultPath.indexOf('M') > -1) {
+          this.__addPathCommand(format("L {x} {y}", {
+            x: x,
+            y: y
+          }));
+        } else {
+          this.__addPathCommand(format("M {x} {y}", {
+            x: x,
+            y: y
+          }));
+        }
       }
       /**
-       *  Arc command!
+       * Add a bezier command
        */
-      arc(x, y, radius, startAngle, endAngle, counterClockwise) {
-        // in canvas no circle is drawn if no angle is provided.
-        if (startAngle === endAngle) {
-          return;
-        }
-        startAngle = startAngle % (2 * Math.PI);
-        endAngle = endAngle % (2 * Math.PI);
-        if (startAngle === endAngle) {
-          //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
-          endAngle = (endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) % (2 * Math.PI);
-        }
-        var endX = x + radius * Math.cos(endAngle),
-          endY = y + radius * Math.sin(endAngle),
-          startX = x + radius * Math.cos(startAngle),
-          startY = y + radius * Math.sin(startAngle),
-          sweepFlag = counterClockwise ? 0 : 1,
-          largeArcFlag = 0,
-          diff = endAngle - startAngle;
-
-        // https://github.com/gliffy/canvas2svg/issues/4
-        if (diff < 0) {
-          diff += 2 * Math.PI;
-        }
-        if (counterClockwise) {
-          largeArcFlag = diff > Math.PI ? 0 : 1;
-        } else {
-          largeArcFlag = diff > Math.PI ? 1 : 0;
-        }
-        this.lineTo(startX, startY);
-        this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}", {
-          rx: radius,
-          ry: radius,
-          xAxisRotation: 0,
-          largeArcFlag: largeArcFlag,
-          sweepFlag: sweepFlag,
-          endX: endX,
-          endY: endY
-        }));
+      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
         this.__currentPosition = {
-          x: endX,
-          y: endY
+          x: x,
+          y: y
         };
+        this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", {
+          cp1x: cp1x,
+          cp1y: cp1y,
+          cp2x: cp2x,
+          cp2y: cp2y,
+          x: x,
+          y: y
+        }));
       }
       /**
-       * The ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusX and radiusY. The path
-       * starts at startAngle and ends at endAngle, and travels in the direction given by counterclockwise (defaulting to clockwise).
-       */
-      // ellipse (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-      //     // TODO -- implement
-      // }
-
-      /**
-       * Generates a ClipPath from the clip command.
+       * Adds a quadratic curve to command
        */
-      clip() {
-        var group = this.__closestGroupOrSvg(),
-          clipPath = this.__createElement("clipPath"),
-          id = randomString(this.__ids),
-          newGroup = this.__createElement("g");
-        this.__applyCurrentDefaultPath();
-        group.removeChild(this.__currentElement);
-        clipPath.setAttribute("id", id);
-        clipPath.appendChild(this.__currentElement);
-        this.__defs.appendChild(clipPath);
-
-        //set the clip path to this group
-        group.setAttribute("clip-path", format("url(#{id})", {
-          id: id
+      quadraticCurveTo(cpx, cpy, x, y) {
+        this.__currentPosition = {
+          x: x,
+          y: y
+        };
+        this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {
+          cpx: cpx,
+          cpy: cpy,
+          x: x,
+          y: y
         }));
-
-        //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
-        // to this path
-        group.appendChild(newGroup);
-        this.__currentElement = newGroup;
       }
       /**
-       * Draws a canvas, image or mock context to this canvas.
-       * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
-       * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
+       * Adds the arcTo to the current path
+       *
+       * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
        */
-      drawImage() {
-        //convert arguments to a real array
-        var args = Array.prototype.slice.call(arguments),
-          image = args[0],
-          dx,
-          dy,
-          dw,
-          dh,
-          sx = 0,
-          sy = 0,
-          sw,
-          sh,
-          parent,
-          svg,
-          defs,
-          group,
-          svgImage,
-          canvas,
-          context,
-          id;
-        if (args.length === 3) {
-          dx = args[1];
-          dy = args[2];
-          sw = image.width;
-          sh = image.height;
-          dw = sw;
-          dh = sh;
-        } else if (args.length === 5) {
-          dx = args[1];
-          dy = args[2];
-          dw = args[3];
-          dh = args[4];
-          sw = image.width;
-          sh = image.height;
-        } else if (args.length === 9) {
-          sx = args[1];
-          sy = args[2];
-          sw = args[3];
-          sh = args[4];
-          dx = args[5];
-          dy = args[6];
-          dw = args[7];
-          dh = args[8];
-        } else {
-          throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length);
+      arcTo(x1, y1, x2, y2, radius) {
+        // Let the point (x0, y0) be the last point in the subpath.
+        var x0 = this.__currentPosition && this.__currentPosition.x;
+        var y0 = this.__currentPosition && this.__currentPosition.y;
+
+        // First ensure there is a subpath for (x1, y1).
+        if (typeof x0 == "undefined" || typeof y0 == "undefined") {
+          return;
         }
-        parent = this.__closestGroupOrSvg();
-        this.__currentElement;
-        var translateDirective = "translate(" + dx + ", " + dy + ")";
-        if (image instanceof ctx) {
-          //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
-          //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
-          svg = image.getSvg().cloneNode(true);
-          if (svg.childNodes && svg.childNodes.length > 1) {
-            defs = svg.childNodes[0];
-            while (defs.childNodes.length) {
-              id = defs.childNodes[0].getAttribute("id");
-              this.__ids[id] = id;
-              this.__defs.appendChild(defs.childNodes[0]);
-            }
-            group = svg.childNodes[1];
-            if (group) {
-              //save original transform
-              var originTransform = group.getAttribute("transform");
-              var transformDirective;
-              if (originTransform) {
-                transformDirective = originTransform + " " + translateDirective;
-              } else {
-                transformDirective = translateDirective;
-              }
-              group.setAttribute("transform", transformDirective);
-              parent.appendChild(group);
-            }
-          }
-        } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
-          //canvas or image
-          svgImage = this.__createElement("image");
-          svgImage.setAttribute("width", dw);
-          svgImage.setAttribute("height", dh);
-          svgImage.setAttribute("preserveAspectRatio", "none");
-          if (sx || sy || sw !== image.width || sh !== image.height) {
-            //crop the image using a temporary canvas
-            canvas = this.__document.createElement("canvas");
-            canvas.width = dw;
-            canvas.height = dh;
-            context = canvas.getContext("2d");
-            context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
-            image = canvas;
-          }
-          svgImage.setAttribute("transform", translateDirective);
-          svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
-          parent.appendChild(svgImage);
+
+        // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
+        if (radius < 0) {
+          throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
         }
-      }
-      /**
-       * Generates a pattern tag
-       */
-      createPattern(image, repetition) {
-        let pattern = this.__document.__createElement("pattern");
-        let id = randomString(this.__ids);
-        let img;
-        pattern.setAttribute("id", id);
-        pattern.setAttribute("width", image.width);
-        pattern.setAttribute("height", image.height);
-        if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
-          img = this.__createElement("image");
-          img.setAttribute("width", image.width);
-          img.setAttribute("height", image.height);
-          img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
-          pattern.appendChild(img);
-          this.__defs.appendChild(pattern);
-        } else if (image instanceof ctx) {
-          pattern.appendChild(image.__root.childNodes[1]);
-          this.__defs.appendChild(pattern);
+
+        // If the point (x0, y0) is equal to the point (x1, y1),
+        // or if the point (x1, y1) is equal to the point (x2, y2),
+        // or if the radius radius is zero,
+        // then the method must add the point (x1, y1) to the subpath,
+        // and connect that point to the previous point (x0, y0) by a straight line.
+        if (x0 === x1 && y0 === y1 || x1 === x2 && y1 === y2 || radius === 0) {
+          this.lineTo(x1, y1);
+          return;
         }
-        return new CanvasPattern(pattern, this);
-      }
-      setLineDash(dashArray) {
-        if (dashArray && dashArray.length > 0) {
-          this.lineDash = dashArray.join(",");
-        } else {
-          this.lineDash = null;
+
+        // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
+        // then the method must add the point (x1, y1) to the subpath,
+        // and connect that point to the previous point (x0, y0) by a straight line.
+        var unit_vec_p1_p0 = normalize$1([x0 - x1, y0 - y1]);
+        var unit_vec_p1_p2 = normalize$1([x2 - x1, y2 - y1]);
+        if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
+          this.lineTo(x1, y1);
+          return;
         }
-      }
-      /**
-       * Not yet implemented
-       */
-      drawFocusRing() {}
-      createImageData() {}
-      getImageData() {}
-      putImageData() {}
-      globalCompositeOperation() {}
-      setTransform() {}
-    }
 
-    class Chromosome {
-      constructor(name, order, bpLength) {
-        this.name = name;
-        this.order = order;
-        this.bpLength = bpLength;
-      }
-    }
+        // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
+        // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
+        // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
+        // The points at which this circle touches these two lines are called the start and end tangent points respectively.
 
-    /*
-     * The MIT License (MIT)
-     *
-     * Copyright (c) 2014 Broad Institute
-     *
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     *
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     *
-     *
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-    const splitLines$4 = splitLines$5;
-    const reservedProperties$1 = new Set(['fastaURL', 'indexURL', 'cytobandURL', 'indexed']);
-    class NonIndexedFasta {
-      constructor(reference) {
-        this.fastaURL = reference.fastaURL;
-        this.withCredentials = reference.withCredentials;
-        this.chromosomeNames = [];
-        this.chromosomes = {};
-        this.sequences = new Map();
+        // note that both vectors are unit vectors, so the length is 1
+        var cos = unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1];
+        var theta = Math.acos(Math.abs(cos));
 
-        // Build a track-like config object from the referenceObject
-        const config = {};
-        for (let key in reference) {
-          if (reference.hasOwnProperty(key) && !reservedProperties$1.has(key)) {
-            config[key] = reference[key];
+        // Calculate origin
+        var unit_vec_p1_origin = normalize$1([unit_vec_p1_p0[0] + unit_vec_p1_p2[0], unit_vec_p1_p0[1] + unit_vec_p1_p2[1]]);
+        var len_p1_origin = radius / Math.sin(theta / 2);
+        var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
+        var y = y1 + len_p1_origin * unit_vec_p1_origin[1];
+
+        // Calculate start angle and end angle
+        // rotate 90deg clockwise (note that y axis points to its down)
+        var unit_vec_origin_start_tangent = [-unit_vec_p1_p0[1], unit_vec_p1_p0[0]];
+        // rotate 90deg counter clockwise (note that y axis points to its down)
+        var unit_vec_origin_end_tangent = [unit_vec_p1_p2[1], -unit_vec_p1_p2[0]];
+        var getAngle = function (vector) {
+          // get angle (clockwise) between vector and (1, 0)
+          var x = vector[0];
+          var y = vector[1];
+          if (y >= 0) {
+            // note that y axis points to its down
+            return Math.acos(x);
+          } else {
+            return -Math.acos(x);
           }
-        }
-        this.config = config;
+        };
+        var startAngle = getAngle(unit_vec_origin_start_tangent);
+        var endAngle = getAngle(unit_vec_origin_end_tangent);
+
+        // Connect the point (x0, y0) to the start tangent point by a straight line
+        this.lineTo(x + unit_vec_origin_start_tangent[0] * radius, y + unit_vec_origin_start_tangent[1] * radius);
+
+        // Connect the start tangent point to the end tangent point by arc
+        // and adding the end tangent point to the subpath.
+        this.arc(x, y, radius, startAngle, endAngle);
       }
-      async init() {
-        return this.loadAll();
+      /**
+       * Sets the stroke property on the current element
+       */
+      stroke() {
+        if (this.__currentElement.nodeName === "path") {
+          this.__currentElement.setAttribute("paint-order", "fill stroke markers");
+        }
+        this.__applyCurrentDefaultPath();
+        this.__applyStyleToCurrentElement("stroke");
       }
-      async getSequence(chr, start, end) {
-        if (!this.sequences.has(chr)) {
-          return undefined;
+      /**
+       * Sets fill properties on the current element
+       */
+      fill() {
+        if (this.__currentElement.nodeName === "path") {
+          this.__currentElement.setAttribute("paint-order", "stroke fill markers");
         }
-        let seqSlice = this.sequences.get(chr).find(ss => ss.contains(start, end));
-        if (!seqSlice) {
-          seqSlice = this.sequences.get(chr).find(ss => ss.overlaps(start, end));
-          if (!seqSlice) {
-            return undefined;
-          }
+        this.__applyCurrentDefaultPath();
+        this.__applyStyleToCurrentElement("fill");
+      }
+      /**
+       *  Adds a rectangle to the path.
+       */
+      rect(x, y, width, height) {
+        if (this.__currentElement.nodeName !== "path") {
+          this.beginPath();
         }
-        start -= seqSlice.offset;
-        end -= seqSlice.offset;
-        let prefix = "";
-        if (start < 0) {
-          for (let i = start; i < Math.min(end, 0); i++) {
-            prefix += "*";
-          }
+        this.moveTo(x, y);
+        this.lineTo(x + width, y);
+        this.lineTo(x + width, y + height);
+        this.lineTo(x, y + height);
+        this.lineTo(x, y);
+        this.closePath();
+      }
+      /**
+       * adds a rectangle element
+       */
+      fillRect(x, y, width, height) {
+        if (height < 0) {
+          y += height;
+          height = -height;
         }
-        if (end <= 0) {
-          return Promise.resolve(prefix);
+        if (width < 0) {
+          x += width;
+          width = -width;
         }
-        const seq = seqSlice.sequence;
-        const seqEnd = Math.min(end, seq.length);
-        return prefix + seq.substring(start, seqEnd);
-      }
-      async loadAll() {
-        let data;
-        if (isDataURL(this.fastaURL)) {
-          let bytes = decodeDataURI$1(this.fastaURL);
-          data = "";
-          for (let b of bytes) {
-            data += String.fromCharCode(b);
+        // See if rect intersects current viewbox
+        var r2 = {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        };
+        if (this.viewbox) {
+          if (!intersectRect(this.viewbox, r2)) {
+            return;
           }
-        } else {
-          data = await igvxhr.load(this.fastaURL, buildOptions(this.config));
         }
-        const chrNameSet = new Set();
-        const lines = splitLines$4(data);
-        const len = lines.length;
-        let lineNo = 0;
-        let order = 0;
-        let nextLine;
-        let current = {};
-        while (lineNo < len) {
-          nextLine = lines[lineNo++].trim();
-          if (nextLine.startsWith("#") || nextLine.length === 0) ; else if (nextLine.startsWith(">")) {
-            // Start the next sequence
-            if (current && current.seq) {
-              pushChromosome.call(this, current, order++);
-            }
-            const parts = nextLine.substr(1).split(/\s+/);
+        var rect, parent;
+        rect = this.__createElement("rect", r2, true);
+        parent = this.__closestGroupOrSvg();
+        parent.appendChild(rect);
+        this.__currentElement = rect;
+        this.__applyStyleToCurrentElement("fill");
+      }
+      /**
+       * Draws a rectangle with no fill
+       * @param x
+       * @param y
+       * @param width
+       * @param height
+       */
+      strokeRect(x, y, width, height) {
+        var rect, parent;
+        rect = this.__createElement("rect", {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        }, true);
+        parent = this.__closestGroupOrSvg();
+        parent.appendChild(rect);
+        this.__currentElement = rect;
+        this.__applyStyleToCurrentElement("stroke");
+      }
+      // stroke ellipse
+      strokeEllipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW) {
+        this.__ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, 'stroke');
+      }
 
-            // Check for samtools style locus string.   This is not perfect, and could fail on weird sequence names
-            const nameParts = parts[0].split(':');
-            current.chr = nameParts[0];
-            current.seq = "";
-            current.offset = 0;
-            if (nameParts.length > 1 && nameParts[1].indexOf('-') > 0) {
-              const locusParts = nameParts[1].split('-');
-              if (locusParts.length === 2 && /^[0-9]+$/.test(locusParts[0]) && /^[0-9]+$/.test(locusParts[1])) ;
-              const from = Number.parseInt(locusParts[0]);
-              const to = Number.parseInt(locusParts[1]);
-              if (to > from) {
-                // TODO this should be an error
-                current.offset = from - 1;
-              }
+      // fill ellipse
+      fillEllipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW) {
+        this.__ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, 'fill');
+      }
 
-              // Check for chromosome length token
-              if (parts.length > 1 && parts[1].startsWith("@len=")) {
-                try {
-                  current.length = parseInt(parts[1].trim().substring(5));
-                } catch (e) {
-                  current.length = undefined;
-                  console.error(`Error parsing sequence length for ${nextLine}`);
-                }
-              } else {
-                current.length = undefined;
-              }
-            }
-          } else {
-            current.seq += nextLine;
-          }
-          // add last seq
-          if (current && current.seq) {
-            pushChromosome.call(this, current, order);
+      // ellipse helper
+      __ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, isCCW, style) {
+        const config = {
+          cx,
+          cy,
+          rx,
+          ry
+        };
+        const element = this.__createElement('ellipse', config, true);
+        const parent = this.__closestGroupOrSvg();
+        parent.appendChild(element);
+        this.__currentElement = element;
+        this.__applyStyleToCurrentElement(style);
+      }
+
+      /**
+       * Clear entire canvas:
+       * 1. save current transforms
+       * 2. remove all the childNodes of the root g element
+       */
+      __clearCanvas() {
+        var current = this.__closestGroupOrSvg(),
+          transform = current.getAttribute("transform");
+        var rootGroup = this.__root.childNodes[1];
+        var childNodes = rootGroup.childNodes;
+        for (var i = childNodes.length - 1; i >= 0; i--) {
+          if (childNodes[i]) {
+            rootGroup.removeChild(childNodes[i]);
           }
         }
-        function pushChromosome(current, order) {
-          const length = current.length || current.offset + current.seq.length;
-          if (!chrNameSet.has(current.chr)) {
-            this.chromosomeNames.push(current.chr);
-            this.sequences.set(current.chr, []);
-            this.chromosomes[current.chr] = new Chromosome(current.chr, order, length);
-            chrNameSet.add(current.chr);
-          } else {
-            const c = this.chromosomes[current.chr];
-            c.bpLength = Math.max(c.bpLength, length);
-          }
-          this.sequences.get(current.chr).push(new SequenceSlice(current.offset, current.seq));
+        this.__currentElement = rootGroup;
+        //reset __groupStack as all the child group nodes are all removed.
+        this.__groupStack = [];
+        if (transform) {
+          this.__addTransform(transform);
         }
       }
-    }
-    class SequenceSlice {
-      constructor(offset, sequence) {
-        this.offset = offset;
-        this.sequence = sequence;
-      }
-      contains(start, end) {
-        return this.offset <= start && this.end >= end;
+      /**
+       * "Clears" a canvas by just drawing a white rectangle in the current group.
+       */
+      clearRect(x, y, width, height) {
+        //clear entire canvas
+        if (x === 0 && y === 0 && width === this.width && height === this.height) {
+          this.__clearCanvas();
+          return;
+        }
+        var rect,
+          parent = this.__closestGroupOrSvg();
+        rect = this.__createElement("rect", {
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+          fill: "#FFFFFF"
+        }, true);
+        parent.appendChild(rect);
       }
-      overlaps(start, end) {
-        return this.offset < end && this.end > start;
+      /**
+       * Adds a linear gradient to a defs tag.
+       * Returns a canvas gradient object that has a reference to it's parent def
+       */
+      createLinearGradient(x1, y1, x2, y2) {
+        var grad = this.__createElement("linearGradient", {
+          id: randomString(this.__ids),
+          x1: x1 + "px",
+          x2: x2 + "px",
+          y1: y1 + "px",
+          y2: y2 + "px",
+          "gradientUnits": "userSpaceOnUse"
+        }, false);
+        this.__defs.appendChild(grad);
+        return new CanvasGradient(grad, this);
       }
-      get end() {
-        return this.offset + this.sequence.length;
+      /**
+       * Adds a radial gradient to a defs tag.
+       * Returns a canvas gradient object that has a reference to it's parent def
+       */
+      createRadialGradient(x0, y0, r0, x1, y1, r1) {
+        var grad = this.__createElement("radialGradient", {
+          id: randomString(this.__ids),
+          cx: x1 + "px",
+          cy: y1 + "px",
+          r: r1 + "px",
+          fx: x0 + "px",
+          fy: y0 + "px",
+          "gradientUnits": "userSpaceOnUse"
+        }, false);
+        this.__defs.appendChild(grad);
+        return new CanvasGradient(grad, this);
       }
-    }
-
-    const GenomicInterval = function (chr, start, end, features) {
-      this.chr = chr;
-      this.start = start;
-      this.end = end;
-      this.features = features;
-    };
-    GenomicInterval.prototype.contains = function (chr, start, end) {
-      return this.chr === chr && this.start <= start && this.end >= end;
-    };
-    GenomicInterval.prototype.containsRange = function (range) {
-      return this.chr === range.chr && this.start <= range.start && this.end >= range.end;
-    };
+      /**
+       * Parses the font string and returns svg mapping
+       * @private
+       */
+      __parseFont() {
+        var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
+        var fontPart = regex.exec(this.font);
+        var data = {
+          style: fontPart[1] || 'normal',
+          size: fontPart[4] || '10px',
+          family: fontPart[6] || 'sans-serif',
+          weight: fontPart[3] || 'normal',
+          decoration: fontPart[2] || 'normal',
+          href: null
+        };
 
-    /*
-     * The MIT License (MIT)
-     *
-     * Copyright (c) 2014 Broad Institute
-     *
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     *
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     *
-     *
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-    const splitLines$3 = splitLines$5;
-    const reservedProperties = new Set(['fastaURL', 'indexURL', 'compressedIndexURL', 'cytobandURL', 'indexed']);
-    class FastaSequence {
-      constructor(reference) {
-        this.file = reference.fastaURL;
-        this.indexFile = reference.indexURL || reference.indexFile || this.file + ".fai";
-        this.compressedIndexFile = reference.compressedIndexURL || false;
-        this.withCredentials = reference.withCredentials;
-        this.chromosomeNames = [];
-        this.chromosomes = {};
-        this.sequences = {};
-        this.offsets = {};
+        //canvas doesn't support underline natively, but we can pass this attribute
+        if (this.__fontUnderline === "underline") {
+          data.decoration = "underline";
+        }
 
-        // Build a track-like config object from the referenceObject
-        const config = {};
-        for (let key in reference) {
-          if (reference.hasOwnProperty(key) && !reservedProperties.has(key)) {
-            config[key] = reference[key];
-          }
+        //canvas also doesn't support linking, but we can pass this as well
+        if (this.__fontHref) {
+          data.href = this.__fontHref;
         }
-        this.config = config;
-      }
-      async init() {
-        return this.getIndex();
+        return data;
       }
-      async getSequence(chr, start, end) {
-        const hasCachedSquence = this.interval && this.interval.contains(chr, start, end);
-        if (!hasCachedSquence) {
-          // Expand query, to minimum of 50kb
-          let qstart = start;
-          let qend = end;
-          if (end - start < 50000) {
-            const w = end - start;
-            const center = Math.round(start + w / 2);
-            qstart = Math.max(0, center - 25000);
-            qend = center + 25000;
-          }
-          const seqBytes = await this.readSequence(chr, qstart, qend);
-          this.interval = new GenomicInterval(chr, qstart, qend, seqBytes);
+      /**
+       * Helper to link text fragments
+       * @param font
+       * @param element
+       * @return {*}
+       * @private
+       */
+      __wrapTextLink(font, element) {
+        if (font.href) {
+          var a = this.__createElement("a");
+          a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
+          a.appendChild(element);
+          return a;
         }
-        const offset = start - this.interval.start;
-        const n = end - start;
-        const seq = this.interval.features ? this.interval.features.substr(offset, n) : null;
-        return seq;
+        return element;
       }
-      async getIndex() {
-        if (this.index) {
-          return this.index;
-        } else {
-          const data = await igvxhr.load(this.indexFile, buildOptions(this.config));
-          const lines = splitLines$3(data);
-          const len = lines.length;
-          let lineNo = 0;
-          let order = 0;
-          this.index = {};
-          while (lineNo < len) {
-            const tokens = lines[lineNo++].split("\t");
-            const nTokens = tokens.length;
-            if (nTokens === 5) {
-              // Parse the index line.
-              const chr = tokens[0];
-              const size = parseInt(tokens[1]);
-              const position = parseInt(tokens[2]);
-              const basesPerLine = parseInt(tokens[3]);
-              const bytesPerLine = parseInt(tokens[4]);
-              const indexEntry = {
-                size: size,
-                position: position,
-                basesPerLine: basesPerLine,
-                bytesPerLine: bytesPerLine
-              };
-              this.chromosomeNames.push(chr);
-              this.index[chr] = indexEntry;
-              this.chromosomes[chr] = new Chromosome(chr, order++, size);
-            }
-          }
-          return this.index;
-        }
+      /**
+       * Fills or strokes text
+       * @param text
+       * @param x
+       * @param y
+       * @param action - stroke or fill
+       * @private
+       */
+      __applyText(text, x, y, action) {
+        var font = this.__parseFont(),
+          parent = this.__closestGroupOrSvg(),
+          textElement = this.__createElement("text", {
+            "font-family": font.family,
+            "font-size": font.size,
+            "font-style": font.style,
+            "font-weight": font.weight,
+            "text-decoration": font.decoration,
+            "x": x,
+            "y": y,
+            "text-anchor": getTextAnchor(this.textAlign),
+            "dominant-baseline": getDominantBaseline(this.textBaseline)
+          }, true);
+        textElement.appendChild(this.__document.createTextNode(text));
+        this.__currentElement = textElement;
+        this.__applyStyleToCurrentElement(action);
+        parent.appendChild(this.__wrapTextLink(font, textElement));
       }
-
-      //Code is losely based on https://github.com/GMOD/bgzf-filehandle
-      //Reworked however in orde to work with the igvxhr interface for loading files
-      //Additionally, replaced calls to the Long.js interface with standard JS calls for ArrayBuffers and the associated views
-      //
-      //The compressed index is an array of blocks, with each block being a pair: compressed-position & uncompressed-position (both in bytes)
-      async getCompressedIndex() {
-        const GZI_NUM_BYTES_OFFSET = 8;
-        const GZI_NUM_BYTES_BLOCK = 8;
-        if (this.compressedIndex) {
-          return this.compressedIndex;
-        }
-        if (!this.compressedIndexFile) {
-          this.compressedIndex = [];
-          return this.compressedIndex;
+      /**
+       * Creates a text element
+       * @param text
+       * @param x
+       * @param y
+       */
+      fillText(text, x, y) {
+        this.__applyText(text, x, y, "fill");
+      }
+      /**
+       * Strokes text
+       * @param text
+       * @param x
+       * @param y
+       */
+      strokeText(text, x, y) {
+        this.__applyText(text, x, y, "stroke");
+      }
+      /**
+       * No need to implement this for svg.
+       * @param text
+       * @return {TextMetrics}
+       */
+      measureText(text) {
+        this.__ctx.font = this.font;
+        return this.__ctx.measureText(text);
+      }
+      /**
+       *  Arc command!
+       */
+      arc(x, y, radius, startAngle, endAngle, counterClockwise) {
+        // in canvas no circle is drawn if no angle is provided.
+        if (startAngle === endAngle) {
+          return;
         }
-        //In contrast to the 'normal' reference (for which the index is chromosome based), this index is block-based
-        //As such there is not need to make it a hash. An array is sufficient.
-        this.compressedIndex = [];
-        const gziData = await igvxhr.loadArrayBuffer(this.compressedIndexFile, buildOptions(this.config));
-        const givenFileSize = gziData.byteLength;
-        if (givenFileSize < GZI_NUM_BYTES_OFFSET) {
-          console.log("Cannot parse GZI index file: length (" + givenFileSize + " bytes) is insufficient to determine content of index.");
-          return this.compressedIndex;
+        startAngle = startAngle % (2 * Math.PI);
+        endAngle = endAngle % (2 * Math.PI);
+        if (startAngle === endAngle) {
+          //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
+          endAngle = (endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) % (2 * Math.PI);
         }
-        //First 8 bytes are a little endian unsigned bigint (64bit), indicating the number of blocks in the index.
-        const numBlocksBuffer = gziData.slice(0, GZI_NUM_BYTES_OFFSET);
-        const numBlocks = Number(new DataView(numBlocksBuffer).getBigUint64(0, true));
-        //The remainder of the gzi content are pairs of little endian unsigned bigint (64bit) numbers.
-        //The first of the pair is the compressed position of a block
-        //The second of the pair is the uncompressed position of a block
+        var endX = x + radius * Math.cos(endAngle),
+          endY = y + radius * Math.sin(endAngle),
+          startX = x + radius * Math.cos(startAngle),
+          startY = y + radius * Math.sin(startAngle),
+          sweepFlag = counterClockwise ? 0 : 1,
+          largeArcFlag = 0,
+          diff = endAngle - startAngle;
 
-        //Sanity check:
-        //Is the size of the array-buffer (of the entire file) correct with regards to the number of blocks detailled by the first 8 bytes of the file?
-        //Total file-size should be:
-        // 8 + 2*(num_entries*8) bytes, with the first 8 bytes indicating the number of entries
-        const expectedFileSize = GZI_NUM_BYTES_OFFSET + numBlocks * 2 * GZI_NUM_BYTES_BLOCK;
-        if (givenFileSize != expectedFileSize) {
-          console.log("Incorrect file size of reference genome index. Expected : " + expectedFileSize + ". Received : " + givenFileSize);
-          return this.compressedIndex;
+        // https://github.com/gliffy/canvas2svg/issues/4
+        if (diff < 0) {
+          diff += 2 * Math.PI;
         }
-
-        //Push the first block to the index: the first block always has positions 0 for both the compressed and uncompressed file
-        this.compressedIndex.push([0, 0]);
-
-        //Further process all the blocks of the GZI index, and keep them in memory
-        for (let blockNumber = 0; blockNumber < numBlocks; blockNumber++) {
-          const bufferBlockStart = GZI_NUM_BYTES_OFFSET + blockNumber * 2 * GZI_NUM_BYTES_BLOCK;
-          const bufferBlockEnd = GZI_NUM_BYTES_OFFSET + blockNumber * 2 * GZI_NUM_BYTES_BLOCK + 2 * GZI_NUM_BYTES_BLOCK;
-          const bufferBlock = gziData.slice(bufferBlockStart, bufferBlockEnd);
-          const viewBlock = new DataView(bufferBlock);
-          const compressedPosition = Number(viewBlock.getBigUint64(0, true)); //First 8 bytes
-          const uncompressedPosition = Number(viewBlock.getBigUint64(GZI_NUM_BYTES_BLOCK, true)); //Last 8 bytes
-          this.compressedIndex.push([compressedPosition, uncompressedPosition]);
+        if (counterClockwise) {
+          largeArcFlag = diff > Math.PI ? 0 : 1;
+        } else {
+          largeArcFlag = diff > Math.PI ? 1 : 0;
         }
-        return this.compressedIndex;
+        this.lineTo(startX, startY);
+        this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}", {
+          rx: radius,
+          ry: radius,
+          xAxisRotation: 0,
+          largeArcFlag: largeArcFlag,
+          sweepFlag: sweepFlag,
+          endX: endX,
+          endY: endY
+        }));
+        this.__currentPosition = {
+          x: endX,
+          y: endY
+        };
       }
+      /**
+       * The ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusX and radiusY. The path
+       * starts at startAngle and ends at endAngle, and travels in the direction given by counterclockwise (defaulting to clockwise).
+       */
+      // ellipse (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+      //     // TODO -- implement
+      // }
 
-      //The Fasta-index gives a byte-position of the chromosomal sequences within the FASTA file.
-      //These locations need to be remapped to the locations within the zipped reference genome, using the GZI index
-      //This function provides this functionality by 
-      //1) taking the indicated start/stop byte locations within the UNCOMPRESSED FASTA file
-      //2) remapping these byte locations to the correct blocks (and associated positions) within the COMPRESSED FASTA file
-      //Subsequently, the calling method can then extract the correct blocks from the compressed FASTA files and uncompressed the data
-      async getRelevantCompressedBlockNumbers(queryPositionStart, queryPositionEnd) {
-        const UNCOMPRESSED_POSITION = 1;
-        //Fallback for impossible values
-        if (queryPositionStart < 0 || queryPositionEnd < 0 || queryPositionEnd < queryPositionStart) {
-          console.log("Incompatible query positions for reference-genome. Start:" + queryPositionStart + " | End:" + queryPositionEnd);
-          return [];
-        }
-        //Ensure compressed index is loaded
-        await this.getCompressedIndex();
-        let result = [];
-        //Now search for the correct block-numbers (going from 0 to length(compressed-index)) which overlap with the provided byte-positions
-        const lowestBlockNumber = 0;
-        const highestBlockNumber = this.compressedIndex.length - 1;
-        //Failsafe if for some reason the compressed index wasn't loaded or doesn't contain any data
-        if (this.compressedIndex.length == 0) {
-          console.log("Compressed index does not contain any content");
-          return [];
-        }
-        //Failsafe: if the queryPositionStart is greater than the uncompressed-position of the final block,
-        //then this final block is the only possible result
-        if (queryPositionStart > this.compressedIndex[highestBlockNumber][UNCOMPRESSED_POSITION]) {
-          return [highestBlockNumber];
-        }
-
-        //Rather than doing a linear search over all blocks, a binary search is done for speed considerations
-        //We are searching for the highest block number for which its position is smaller than the query start position
-        //Afterwards we will simply expand the blocks until the entire query range is covered
-        let searchLow = lowestBlockNumber;
-        let searchHigh = highestBlockNumber;
-        let searchPosition = Math.floor(this.compressedIndex.length / 2);
-        let maxIterations = this.compressedIndex.length + 1;
-        let solutionFound = false;
-        //instead of doing a while(true), this for-loop prevents eternal loops in case of issues
-        for (let iteration = 0; iteration < maxIterations; iteration++) {
-          const searchUncompressedPosition = this.compressedIndex[searchPosition][UNCOMPRESSED_POSITION];
-          const nextSearchUncompressedPosition = searchPosition < this.compressedIndex.length - 1 ? this.compressedIndex[searchPosition + 1][UNCOMPRESSED_POSITION] : Infinity;
-          //The query position lies within the current search block
-          if (searchUncompressedPosition <= queryPositionStart && nextSearchUncompressedPosition > queryPositionStart) {
-            solutionFound = true;
-            break; //searchPosition is the correct block number index
-          }
-          //Current block lies before the query position
-          else if (searchUncompressedPosition < queryPositionStart) {
-            searchLow = searchPosition + 1;
-          }
-          //Current block lies after the query position
-          else {
-            searchHigh = searchPosition - 1;
-          }
-          searchPosition = Math.ceil((searchHigh - searchLow) / 2) + searchLow;
-        }
-        //If for some reason the binary search did not reveal a correct block index, then we return the empty result
-        if (!solutionFound) {
-          console.log("No blocks within compressed index found that correspond with query positions " + queryPositionStart + "," + queryPositionEnd);
-          console.log(this.compressedIndex);
-          return [];
-        }
+      /**
+       * Generates a ClipPath from the clip command.
+       */
+      clip() {
+        var group = this.__closestGroupOrSvg(),
+          clipPath = this.__createElement("clipPath"),
+          id = randomString(this.__ids),
+          newGroup = this.__createElement("g");
+        this.__applyCurrentDefaultPath();
+        group.removeChild(this.__currentElement);
+        clipPath.setAttribute("id", id);
+        clipPath.appendChild(this.__currentElement);
+        this.__defs.appendChild(clipPath);
 
-        //Now extend the result by adding additional blocks until the entire query range is covered
-        result.push(searchPosition);
-        for (let blockIndex = searchPosition + 1; blockIndex < this.compressedIndex.length; blockIndex++) {
-          result.push(blockIndex);
-          const blockUncompressedPosition = this.compressedIndex[blockIndex][UNCOMPRESSED_POSITION];
-          if (blockUncompressedPosition >= queryPositionEnd) {
-            break;
-          }
-        }
+        //set the clip path to this group
+        group.setAttribute("clip-path", format("url(#{id})", {
+          id: id
+        }));
 
-        //It is possible that the query end position lies AFTER the start of the final block
-        //If this is the case, we add a 'fake' negative index which will be interpreted by the loadAndUncompressBlocks method as an indicator
-        //to read until the end of the file 
-        const finalRelevantBlock = result[result.length - 1];
-        const finalIndexBlock = this.compressedIndex.length - 1;
-        if (finalRelevantBlock === finalIndexBlock && this.compressedIndex[finalRelevantBlock][UNCOMPRESSED_POSITION] < queryPositionEnd) {
-          result.push(-1);
-        }
-        return result;
+        //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
+        // to this path
+        group.appendChild(newGroup);
+        this.__currentElement = newGroup;
       }
-
-      //Load the content from the blockIndices.
-      //This is done on a per-block basis
-      //Content of the first block will be trimmed in order to match the expected offset
-      async loadAndUncompressBlocks(blockIndices, startByte) {
-        const COMPRESSED_POSITION = 0;
-        const UNCOMPRESSED_POSITION = 1;
-        //Normally the compressed index should already exist, we're just makeing sure here
-        await this.getCompressedIndex();
-        if (blockIndices.length == 0) {
-          return "";
+      /**
+       * Draws a canvas, image or mock context to this canvas.
+       * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
+       * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
+       */
+      drawImage() {
+        //convert arguments to a real array
+        var args = Array.prototype.slice.call(arguments),
+          image = args[0],
+          dx,
+          dy,
+          dw,
+          dh,
+          sx = 0,
+          sy = 0,
+          sw,
+          sh,
+          parent,
+          svg,
+          defs,
+          group,
+          svgImage,
+          canvas,
+          context,
+          id;
+        if (args.length === 3) {
+          dx = args[1];
+          dy = args[2];
+          sw = image.width;
+          sh = image.height;
+          dw = sw;
+          dh = sh;
+        } else if (args.length === 5) {
+          dx = args[1];
+          dy = args[2];
+          dw = args[3];
+          dh = args[4];
+          sw = image.width;
+          sh = image.height;
+        } else if (args.length === 9) {
+          sx = args[1];
+          sy = args[2];
+          sw = args[3];
+          sh = args[4];
+          dx = args[5];
+          dy = args[6];
+          dw = args[7];
+          dh = args[8];
+        } else {
+          throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length);
         }
-
-        //Storing data in seperate array with indices in order to assert order due to async behaviour of loops
-        let resultCache = Array(blockIndices.length - 1);
-        for (let i = 0; i < blockIndices.length - 1; i++) {
-          const currentBlockNumber = blockIndices[i];
-          const currentBlockInfo = this.compressedIndex[currentBlockNumber];
-          const currentBlockCompressedPosition = currentBlockInfo[COMPRESSED_POSITION];
-          const nextBlockNumber = blockIndices[i + 1];
-          let compressedBytes = [];
-          if (nextBlockNumber != -1) {
-            //default : read current entire block only
-            const nextBlockInfo = this.compressedIndex[nextBlockNumber];
-            const nextBlockCompressedPosition = nextBlockInfo[COMPRESSED_POSITION];
-            const compressedLength = nextBlockCompressedPosition - currentBlockCompressedPosition;
-            compressedBytes = await igvxhr.loadArrayBuffer(this.file, buildOptions(this.config, {
-              range: {
-                start: currentBlockCompressedPosition,
-                size: compressedLength
-              }
-            }));
-          } else {
-            // special case for query within final block: read until the end of the file
-            compressedBytes = await igvxhr.loadArrayBuffer(this.file, buildOptions(this.config, {
-              range: {
-                start: currentBlockCompressedPosition
+        parent = this.__closestGroupOrSvg();
+        this.__currentElement;
+        var translateDirective = "translate(" + dx + ", " + dy + ")";
+        if (image instanceof ctx) {
+          //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
+          //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
+          svg = image.getSvg().cloneNode(true);
+          if (svg.childNodes && svg.childNodes.length > 1) {
+            defs = svg.childNodes[0];
+            while (defs.childNodes.length) {
+              id = defs.childNodes[0].getAttribute("id");
+              this.__ids[id] = id;
+              this.__defs.appendChild(defs.childNodes[0]);
+            }
+            group = svg.childNodes[1];
+            if (group) {
+              //save original transform
+              var originTransform = group.getAttribute("transform");
+              var transformDirective;
+              if (originTransform) {
+                transformDirective = originTransform + " " + translateDirective;
+              } else {
+                transformDirective = translateDirective;
               }
-            }));
+              group.setAttribute("transform", transformDirective);
+              parent.appendChild(group);
+            }
           }
-          //now unzip the compressed bytes, and store them in the resultCache
-          const uncompressedBytes = await unbgzf(compressedBytes);
-          resultCache[i] = uncompressedBytes;
-        }
-
-        //Iterate over the result cache, create sequences from the data, and create a full sequence string from the data
-        let result = "";
-        for (let i = 0; i < resultCache.length; i++) {
-          for (let j = 0; j < resultCache[i].length; j++) {
-            const c = String.fromCharCode(resultCache[i][j]);
-            result = result + c;
+        } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
+          //canvas or image
+          svgImage = this.__createElement("image");
+          svgImage.setAttribute("width", dw);
+          svgImage.setAttribute("height", dh);
+          svgImage.setAttribute("preserveAspectRatio", "none");
+          if (sx || sy || sw !== image.width || sh !== image.height) {
+            //crop the image using a temporary canvas
+            canvas = this.__document.createElement("canvas");
+            canvas.width = dw;
+            canvas.height = dh;
+            context = canvas.getContext("2d");
+            context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
+            image = canvas;
           }
+          svgImage.setAttribute("transform", translateDirective);
+          svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
+          parent.appendChild(svgImage);
         }
-
-        //postprocess this data: because entire blocks are read we need to remove the first N bases of the first used block, 
-        //which are not included in the original query positions
-        const firstBlockInfo = this.compressedIndex[blockIndices[0]];
-        const offset = startByte - firstBlockInfo[UNCOMPRESSED_POSITION];
-        result = result.substring(offset);
-        return result;
       }
-      async readSequence(chr, qstart, qend) {
-        await this.getIndex();
-        await this.getCompressedIndex(); //This will work even if no compressed index file is set
-
-        const idxEntry = this.index[chr];
-        if (!idxEntry) {
-          console.log("No index entry for chr: " + chr);
-          // Tag interval with null so we don't try again
-          this.interval = new GenomicInterval(chr, qstart, qend, null);
-          return null;
-        }
-        const start = Math.max(0, qstart); // qstart should never be < 0
-        const end = Math.min(idxEntry.size, qend);
-        const bytesPerLine = idxEntry.bytesPerLine;
-        const basesPerLine = idxEntry.basesPerLine;
-        const position = idxEntry.position;
-        const nEndBytes = bytesPerLine - basesPerLine;
-        const startLine = Math.floor(start / basesPerLine);
-        const endLine = Math.floor(end / basesPerLine);
-        const base0 = startLine * basesPerLine; // Base at beginning of start line
-        const offset = start - base0;
-        const startByte = position + startLine * bytesPerLine + offset;
-        const base1 = endLine * basesPerLine;
-        const offset1 = end - base1;
-        const endByte = position + endLine * bytesPerLine + offset1 - 1;
-        const byteCount = endByte - startByte + 1;
-        if (byteCount <= 0) {
-          console.error("No sequence for " + chr + ":" + qstart + "-" + qend);
-          return null;
-        }
-
-        //If the compressed index file is set, then we are dealing with a compressed genome sequence
-        //The selection of startByte/endByte is done for the non-compressed genome sequence.
-        //These need to be 'converted' to the correct byte positions in the compressed genome sequence,
-        //by making use of the compressed index (GZI file)
-        let allBytes;
-        if (!this.compressedIndexFile) {
-          allBytes = await igvxhr.load(this.file, buildOptions(this.config, {
-            range: {
-              start: startByte,
-              size: byteCount
-            }
-          }));
-        } else {
-          let relevantBlockIndices = await this.getRelevantCompressedBlockNumbers(startByte, endByte);
-          if (relevantBlockIndices.length === 0) {
-            console.log("No blocks in the compressed index that correspond with the requested byte positions (" + startByte + "," + endByte + ")");
-            return null;
-          }
-          allBytes = await this.loadAndUncompressBlocks(relevantBlockIndices, startByte);
-        }
-        if (!allBytes) {
-          return null;
-        }
-        let nBases,
-          seqBytes = "",
-          srcPos = 0,
-          allBytesLength = allBytes.length;
-        if (offset > 0) {
-          nBases = Math.min(end - start, basesPerLine - offset);
-          seqBytes += allBytes.substr(srcPos, nBases);
-          srcPos += nBases + nEndBytes;
-        }
-        while (srcPos < allBytesLength) {
-          nBases = Math.min(basesPerLine, allBytesLength - srcPos);
-          seqBytes += allBytes.substr(srcPos, nBases);
-          srcPos += nBases + nEndBytes;
+      /**
+       * Generates a pattern tag
+       */
+      createPattern(image, repetition) {
+        let pattern = this.__document.__createElement("pattern");
+        let id = randomString(this.__ids);
+        let img;
+        pattern.setAttribute("id", id);
+        pattern.setAttribute("width", image.width);
+        pattern.setAttribute("height", image.height);
+        if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
+          img = this.__createElement("image");
+          img.setAttribute("width", image.width);
+          img.setAttribute("height", image.height);
+          img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
+          pattern.appendChild(img);
+          this.__defs.appendChild(pattern);
+        } else if (image instanceof ctx) {
+          pattern.appendChild(image.__root.childNodes[1]);
+          this.__defs.appendChild(pattern);
         }
-        return seqBytes;
-      }
-    }
-
-    /*
-     * The MIT License (MIT)
-     *
-     * Copyright (c) 2014 Broad Institute
-     *
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     *
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     *
-     *
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-    const splitLines$2 = splitLines$5;
-    class ChromSizes {
-      constructor(url) {
-        this.url = url;
-        this.chromosomeNames = [];
-        this.chromosomes = {};
-      }
-      async init() {
-        return this.loadAll();
-      }
-      async getSequence(chr, start, end) {
-        return undefined; // TODO -- return array of "N"s?
+        return new CanvasPattern(pattern, this);
       }
-
-      async loadAll() {
-        let data;
-        if (isDataURL(this.url)) {
-          let bytes = decodeDataURI$1(this.fastaURL);
-          data = "";
-          for (let b of bytes) {
-            data += String.fromCharCode(b);
-          }
+      setLineDash(dashArray) {
+        if (dashArray && dashArray.length > 0) {
+          this.lineDash = dashArray.join(",");
         } else {
-          data = await igvxhr.load(this.url, {});
-        }
-        this.chromosomeNames = [];
-        this.chromosomes = {};
-        const lines = splitLines$2(data);
-        let order = 0;
-        for (let nextLine of lines) {
-          const tokens = nextLine.split('\t');
-          this.chromosomeNames.push(tokens[0]);
-          const chrLength = Number.parseInt(tokens[1]);
-          const chromosome = new Chromosome(tokens[0], order++, chrLength);
-          this.chromosomes[tokens[0]] = chromosome;
+          this.lineDash = null;
         }
       }
-    }
-
-    async function loadFasta(reference) {
-      let fasta;
-      if ("chromsizes" === reference.format) {
-        fasta = new ChromSizes(reference.fastaURL);
-      } else if (isDataURL(reference.fastaURL) || reference.indexed === false) {
-        fasta = new NonIndexedFasta(reference);
-      } else {
-        fasta = new FastaSequence(reference);
-      }
-      await fasta.init();
-      return fasta;
+      /**
+       * Not yet implemented
+       */
+      drawFocusRing() {}
+      createImageData() {}
+      getImageData() {}
+      putImageData() {}
+      globalCompositeOperation() {}
+      setTransform() {}
     }
 
     const Cytoband = function (start, end, name, typestain) {
@@ -21481,7 +21939,7 @@
       }
     };
 
-    const _version = "2.13.4";
+    const _version = "2.13.6";
     function version$1() {
       return _version;
     }
@@ -21960,7 +22418,7 @@
             return visibilityWindow !== undefined && visibilityWindow > 0 && this.referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow;
           }
         };
-        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > 1) {
+        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > bppFeatureFetchThreshold) {
           $$1(this.canvas).remove();
           this.canvas = undefined;
           //this.featureCache = undefined
@@ -23166,6 +23624,9 @@
             feature.attributes = {};
             for (let kv of attributeKVs) {
               feature.attributes[kv[0]] = kv[1];
+              if (header.nameField != undefined && kv[0] === header.nameField) {
+                feature.name = kv[1];
+              }
             }
           }
           if (!feature.name) {
@@ -29402,25 +29863,12 @@
     var FunctionPrototype$2 = Function.prototype;
     var call$2 = FunctionPrototype$2.call;
     var uncurryThisWithBind = functionBindNative && FunctionPrototype$2.bind.bind(call$2, call$2);
-    var functionUncurryThisRaw = functionBindNative ? uncurryThisWithBind : function (fn) {
+    var functionUncurryThis = functionBindNative ? uncurryThisWithBind : function (fn) {
       return function () {
         return call$2.apply(fn, arguments);
       };
     };
 
-    var toString$1 = functionUncurryThisRaw({}.toString);
-    var stringSlice = functionUncurryThisRaw(''.slice);
-    var classofRaw = function (it) {
-      return stringSlice(toString$1(it), 8, -1);
-    };
-
-    var functionUncurryThis = function (fn) {
-      // Nashorn bug:
-      //   https://github.com/zloirock/core-js/issues/1128
-      //   https://github.com/zloirock/core-js/issues/1130
-      if (classofRaw(fn) === 'Function') return functionUncurryThisRaw(fn);
-    };
-
     // we can't use just `it == null` since of `document.all` special case
     // https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot-aec
     var isNullOrUndefined = function (it) {
@@ -29643,19 +30091,19 @@
       (module.exports = function (key, value) {
         return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
       })('versions', []).push({
-        version: '3.26.0',
+        version: '3.26.1',
         mode: 'global',
         copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-        license: 'https://github.com/zloirock/core-js/blob/v3.26.0/LICENSE',
+        license: 'https://github.com/zloirock/core-js/blob/v3.26.1/LICENSE',
         source: 'https://github.com/zloirock/core-js'
       });
     });
 
     var id = 0;
     var postfix = Math.random();
-    var toString = functionUncurryThis(1.0.toString);
+    var toString$1 = functionUncurryThis(1.0.toString);
     var uid = function (key) {
-      return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString(++id + postfix, 36);
+      return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$1(++id + postfix, 36);
     };
 
     var WellKnownSymbolsStore = shared('wks');
@@ -30659,368 +31107,6 @@
       }
     }
 
-    const appleCrayonRGBPalette = {
-      cantaloupe: {
-        r: 255,
-        g: 206,
-        b: 110
-      },
-      honeydew: {
-        r: 206,
-        g: 250,
-        b: 110
-      },
-      spindrift: {
-        r: 104,
-        g: 251,
-        b: 208
-      },
-      sky: {
-        r: 106,
-        g: 207,
-        b: 255
-      },
-      lavender: {
-        r: 210,
-        g: 120,
-        b: 255
-      },
-      carnation: {
-        r: 255,
-        g: 127,
-        b: 211
-      },
-      licorice: {
-        r: 0,
-        g: 0,
-        b: 0
-      },
-      snow: {
-        r: 255,
-        g: 255,
-        b: 255
-      },
-      salmon: {
-        r: 255,
-        g: 114,
-        b: 110
-      },
-      banana: {
-        r: 255,
-        g: 251,
-        b: 109
-      },
-      flora: {
-        r: 104,
-        g: 249,
-        b: 110
-      },
-      ice: {
-        r: 104,
-        g: 253,
-        b: 255
-      },
-      orchid: {
-        r: 110,
-        g: 118,
-        b: 255
-      },
-      bubblegum: {
-        r: 255,
-        g: 122,
-        b: 255
-      },
-      lead: {
-        r: 30,
-        g: 30,
-        b: 30
-      },
-      mercury: {
-        r: 232,
-        g: 232,
-        b: 232
-      },
-      tangerine: {
-        r: 255,
-        g: 136,
-        b: 2
-      },
-      lime: {
-        r: 131,
-        g: 249,
-        b: 2
-      },
-      sea_foam: {
-        r: 3,
-        g: 249,
-        b: 135
-      },
-      aqua: {
-        r: 0,
-        g: 140,
-        b: 255
-      },
-      grape: {
-        r: 137,
-        g: 49,
-        b: 255
-      },
-      strawberry: {
-        r: 255,
-        g: 41,
-        b: 135
-      },
-      tungsten: {
-        r: 58,
-        g: 58,
-        b: 58
-      },
-      silver: {
-        r: 208,
-        g: 208,
-        b: 208
-      },
-      maraschino: {
-        r: 255,
-        g: 33,
-        b: 1
-      },
-      lemon: {
-        r: 255,
-        g: 250,
-        b: 3
-      },
-      spring: {
-        r: 5,
-        g: 248,
-        b: 2
-      },
-      turquoise: {
-        r: 0,
-        g: 253,
-        b: 255
-      },
-      blueberry: {
-        r: 0,
-        g: 46,
-        b: 255
-      },
-      magenta: {
-        r: 255,
-        g: 57,
-        b: 255
-      },
-      iron: {
-        r: 84,
-        g: 84,
-        b: 83
-      },
-      magnesium: {
-        r: 184,
-        g: 184,
-        b: 184
-      },
-      mocha: {
-        r: 137,
-        g: 72,
-        b: 0
-      },
-      fern: {
-        r: 69,
-        g: 132,
-        b: 1
-      },
-      moss: {
-        r: 1,
-        g: 132,
-        b: 72
-      },
-      ocean: {
-        r: 0,
-        g: 74,
-        b: 136
-      },
-      eggplant: {
-        r: 73,
-        g: 26,
-        b: 136
-      },
-      maroon: {
-        r: 137,
-        g: 22,
-        b: 72
-      },
-      steel: {
-        r: 110,
-        g: 110,
-        b: 110
-      },
-      aluminum: {
-        r: 160,
-        g: 159,
-        b: 160
-      },
-      cayenne: {
-        r: 137,
-        g: 17,
-        b: 0
-      },
-      aspargus: {
-        r: 136,
-        g: 133,
-        b: 1
-      },
-      clover: {
-        r: 2,
-        g: 132,
-        b: 1
-      },
-      teal: {
-        r: 0,
-        g: 134,
-        b: 136
-      },
-      midnight: {
-        r: 0,
-        g: 24,
-        b: 136
-      },
-      plum: {
-        r: 137,
-        g: 30,
-        b: 136
-      },
-      tin: {
-        r: 135,
-        g: 134,
-        b: 135
-      },
-      nickel: {
-        r: 136,
-        g: 135,
-        b: 135
-      }
-    };
-    function appleCrayonRGB(name) {
-      const {
-        r,
-        g,
-        b
-      } = appleCrayonRGBPalette[name];
-      return `rgb(${r},${g},${b})`;
-    }
-    function appleCrayonRGBA(name, alpha) {
-      const {
-        r,
-        g,
-        b
-      } = appleCrayonRGBPalette[name];
-      return `rgba(${r},${g},${b},${alpha})`;
-    }
-    const colorPalettes = {
-      Set1: ["rgb(228,26,28)", "rgb(55,126,184)", "rgb(77,175,74)", "rgb(166,86,40)", "rgb(152,78,163)", "rgb(255,127,0)", "rgb(247,129,191)", "rgb(153,153,153)", "rgb(255,255,51)"],
-      Dark2: ["rgb(27,158,119)", "rgb(217,95,2)", "rgb(117,112,179)", "rgb(231,41,138)", "rgb(102,166,30)", "rgb(230,171,2)", "rgb(166,118,29)", "rgb(102,102,102)"],
-      Set2: ["rgb(102, 194,165)", "rgb(252,141,98)", "rgb(141,160,203)", "rgb(231,138,195)", "rgb(166,216,84)", "rgb(255,217,47)", "rgb(229,196,148)", "rgb(179,179,179)"],
-      Set3: ["rgb(141,211,199)", "rgb(255,255,179)", "rgb(190,186,218)", "rgb(251,128,114)", "rgb(128,177,211)", "rgb(253,180,98)", "rgb(179,222,105)", "rgb(252,205,229)", "rgb(217,217,217)", "rgb(188,128,189)", "rgb(204,235,197)", "rgb(255,237,111)"],
-      Pastel1: ["rgb(251,180,174)", "rgb(179,205,227)", "rgb(204,235,197)", "rgb(222,203,228)", "rgb(254,217,166)", "rgb(255,255,204)", "rgb(229,216,189)", "rgb(253,218,236)"],
-      Pastel2: ["rgb(173,226,207)", "rgb(253,205,172)", "rgb(203,213,232)", "rgb(244,202,228)", "rgb(230,245,201)", "rgb(255,242,174)", "rgb(243,225,206)"],
-      Accent: ["rgb(127,201,127)", "rgb(190,174,212)", "rgb(253,192,134)", "rgb(255,255,153)", "rgb(56,108,176)", "rgb(240,2,127)", "rgb(191,91,23)"]
-    };
-    class PaletteColorTable {
-      constructor(palette) {
-        this.colors = colorPalettes[palette];
-        if (!Array.isArray(this.colors)) this.colors = [];
-        this.colorTable = {};
-        this.nextIdx = 0;
-        this.colorGenerator = new RandomColorGenerator();
-      }
-      getColor(key) {
-        if (!this.colorTable.hasOwnProperty(key)) {
-          if (this.nextIdx < this.colors.length) {
-            this.colorTable[key] = this.colors[this.nextIdx];
-          } else {
-            this.colorTable[key] = this.colorGenerator.get();
-          }
-          this.nextIdx++;
-        }
-        return this.colorTable[key];
-      }
-    }
-    class ColorTable {
-      constructor(colors) {
-        this.colorTable = colors || {};
-        this.nextIdx = 0;
-        this.colorGenerator = new RandomColorGenerator();
-      }
-      getColor(key) {
-        if (!this.colorTable.hasOwnProperty(key)) {
-          if (this.colorTable.hasOwnProperty("*")) {
-            return this.colorTable["*"];
-          }
-          this.colorTable[key] = this.colorGenerator.get();
-        }
-        return this.colorTable[key];
-      }
-    }
-
-    // Random color generator from https://github.com/sterlingwes/RandomColor/blob/master/rcolor.js
-    // Free to use & distribute under the MIT license
-    // Wes Johnson (@SterlingWes)
-    //
-    // inspired by http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
-    function RandomColorGenerator() {
-      this.hue = Math.random();
-      this.goldenRatio = 0.618033988749895;
-      this.hexwidth = 2;
-    }
-    RandomColorGenerator.prototype.hsvToRgb = function (h, s, v) {
-      var h_i = Math.floor(h * 6),
-        f = h * 6 - h_i,
-        p = v * (1 - s),
-        q = v * (1 - f * s),
-        t = v * (1 - (1 - f) * s),
-        r = 255,
-        g = 255,
-        b = 255;
-      switch (h_i) {
-        case 0:
-          r = v, g = t, b = p;
-          break;
-        case 1:
-          r = q, g = v, b = p;
-          break;
-        case 2:
-          r = p, g = v, b = t;
-          break;
-        case 3:
-          r = p, g = q, b = v;
-          break;
-        case 4:
-          r = t, g = p, b = v;
-          break;
-        case 5:
-          r = v, g = p, b = q;
-          break;
-      }
-      return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)];
-    };
-    RandomColorGenerator.prototype.padHex = function (str) {
-      if (str.length > this.hexwidth) return str;
-      return new Array(this.hexwidth - str.length + 1).join('0') + str;
-    };
-    RandomColorGenerator.prototype.get = function (saturation, value) {
-      this.hue += this.goldenRatio;
-      this.hue %= 1;
-      if (typeof saturation !== "number") saturation = 0.5;
-      if (typeof value !== "number") value = 0.95;
-      var rgb = this.hsvToRgb(this.hue, saturation, value);
-      return "#" + this.padHex(rgb[0].toString(16)) + this.padHex(rgb[1].toString(16)) + this.padHex(rgb[2].toString(16));
-    };
-    const randomColorGenerator = new RandomColorGenerator();
-    function randomColor() {
-      return randomColorGenerator.get();
-    }
-
     /*
      * The MIT License (MIT)
      *
@@ -33546,6 +33632,12 @@
       f: f$3
     };
 
+    var toString = functionUncurryThis({}.toString);
+    var stringSlice = functionUncurryThis(''.slice);
+    var classofRaw = function (it) {
+      return stringSlice(toString(it), 8, -1);
+    };
+
     var $Object = Object;
     var split = functionUncurryThis(''.split);
 
@@ -33803,7 +33895,14 @@
       return call.apply(apply, arguments);
     });
 
-    var bind = functionUncurryThis(functionUncurryThis.bind);
+    var functionUncurryThisClause = function (fn) {
+      // Nashorn bug:
+      //   https://github.com/zloirock/core-js/issues/1128
+      //   https://github.com/zloirock/core-js/issues/1130
+      if (classofRaw(fn) === 'Function') return functionUncurryThis(fn);
+    };
+
+    var bind = functionUncurryThisClause(functionUncurryThisClause.bind);
 
     // optional / simple context binding
     var functionBindContext = function (fn, that) {
@@ -53173,7 +53272,14 @@
         const lastLabelX = options.rowLastLabelX[feature.row] || -Number.MAX_SAFE_INTEGER;
         if (options.labelAllFeatures || xleft > lastLabelX || gtexSelection) {
           options.rowLastLabelX[feature.row] = xright;
-          IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
+          if ('y' === options.axis) {
+            ctx.save();
+            IGVGraphics.labelTransformWithContext(ctx, centerX);
+            IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
+            ctx.restore();
+          } else {
+            IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
+          }
         }
       } finally {
         ctx.restore();
@@ -58609,14 +58715,6 @@
       });
     }
 
-    const defaultNucleotideColors = {
-      "A": "rgb(  0, 200,   0)",
-      "C": "rgb(  0,0,200)",
-      "T": "rgb(255,0,0)",
-      "G": "rgb(209,113,  5)",
-      "N": "rgb(80,80,80)"
-    };
-
     const DEFAULT_SEARCH_CONFIG = {
       timeout: 5000,
       type: "plain",
@@ -58919,8 +59017,8 @@
       constructor(browser) {
         this.browser = browser;
       }
-      navbarDidResize(width, isWholeGenomeView) {
-        this.updateNavbar(this.createResponsiveClassSchedule(width, isWholeGenomeView));
+      navbarDidResize(width) {
+        this.updateNavbar(this.createResponsiveClassSchedule(width));
       }
       updateNavbar(responsiveClassSchedule) {
         this.browser.$toggle_button_container.removeClass();
@@ -58928,9 +59026,10 @@
         $$1(this.browser.zoomWidget.zoomContainer).removeClass();
         $$1(this.browser.zoomWidget.zoomContainer).addClass(responsiveClassSchedule.zoomContainer);
       }
-      createResponsiveClassSchedule(navbarWidth, isWholeGenomeView) {
+      createResponsiveClassSchedule(navbarWidth) {
         let candidates = {};
-        if (isWholeGenomeView) {
+        const isWGV = this.browser.isMultiLocusWholeGenomeView() || this.browser.referenceFrameList && GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr);
+        if (isWGV) {
           this.browser.windowSizePanel.hide();
         } else {
           this.browser.windowSizePanel.show();
@@ -58949,7 +59048,7 @@
           candidates.zoomContainer = 'igv-zoom-widget-900';
           this.browser.windowSizePanel.hide();
         }
-        if (isWholeGenomeView) {
+        if (isWGV) {
           candidates['zoomContainer'] = 'igv-zoom-widget-hidden';
         }
         return candidates;
@@ -59118,40 +59217,33 @@
           } = translateMouseCoordinates$1(event, this.columnContainer);
           this.horizontalGuide.style.top = `${y}px`;
           const target = document.elementFromPoint(event.clientX, event.clientY);
-          let viewport = undefined;
-          if (target.parentElement) {
-            if (target.parentElement.classList.contains('igv-viewport-content')) {
-              viewport = target.parentElement.parentElement;
-            } else if (target.parentElement.classList.contains('igv-viewport') && target.classList.contains('igv-viewport-content')) {
-              viewport = target.parentElement;
-            }
-            if (viewport && browser.getRulerTrackView()) {
-              this.verticalGuide.style.left = `${x}px`;
-              const columns = browser.root.querySelectorAll('.igv-column');
-              let index = undefined;
-              const viewportParent = viewport.parentElement;
-              for (let i = 0; i < columns.length; i++) {
-                if (undefined === index && viewportParent === columns[i]) {
-                  index = i;
-                }
-              }
-              const rulerViewport = browser.getRulerTrackView().viewports[index];
-              const result = rulerViewport.mouseMove(event);
-              if (result) {
-                const {
+          const viewport = findAncestorOfClass(target, 'igv-viewport');
+          if (viewport && browser.getRulerTrackView()) {
+            this.verticalGuide.style.left = `${x}px`;
+            const columns = browser.root.querySelectorAll('.igv-column');
+            let index = undefined;
+            const viewportParent = viewport.parentElement;
+            for (let i = 0; i < columns.length; i++) {
+              if (undefined === index && viewportParent === columns[i]) {
+                index = i;
+              }
+            }
+            const rulerViewport = browser.getRulerTrackView().viewports[index];
+            const result = rulerViewport.mouseMove(event);
+            if (result) {
+              const {
+                start,
+                bp,
+                end
+              } = result;
+              const interpolant = (bp - start) / (end - start);
+              if (this.customMouseHandler) {
+                this.customMouseHandler({
                   start,
                   bp,
-                  end
-                } = result;
-                const interpolant = (bp - start) / (end - start);
-                if (this.customMouseHandler) {
-                  this.customMouseHandler({
-                    start,
-                    bp,
-                    end,
-                    interpolant
-                  });
-                }
+                  end,
+                  interpolant
+                });
               }
             }
           }
@@ -59182,6 +59274,23 @@
       }
     }
 
+    /**
+     * Walk up the tree until a parent is found with the given classname.  If no ancestor is found return undefined.
+     * @param target
+     * @param classname
+     * @returns {*}
+     */
+    function findAncestorOfClass(target, classname) {
+      while (target.parentElement) {
+        if (target.parentElement.classList.contains(classname)) {
+          return target.parentElement;
+        } else {
+          target = target.parentElement;
+        }
+      }
+      return undefined;
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -61116,7 +61225,12 @@
 
         // Track gear column
         createColumn(this.columnContainer, 'igv-gear-menu-column');
-        const genomeConfig = await GenomeUtils.expandReference(this.alert, session.reference || session.genome);
+        const genomeOrReference = session.reference || session.genome;
+        if (!genomeOrReference) {
+          console.warn("No genome or reference object specified");
+          return;
+        }
+        const genomeConfig = await GenomeUtils.expandReference(this.alert, genomeOrReference);
         await this.loadReference(genomeConfig, session.locus);
         this.centerLineList = this.createCenterLineList(this.columnContainer);
 
@@ -61171,8 +61285,8 @@
         const genomeTracks = genomeConfig.tracks || [];
         const trackConfigurations = session.tracks ? genomeTracks.concat(session.tracks) : genomeTracks;
 
-        // Insure that we always have a sequence track
-        const pushSequenceTrack = trackConfigurations.filter(track => track.type === 'sequence').length === 0;
+        // Insure that we always have a sequence track with no explicit URL (=> the reference genome sequence track)
+        const pushSequenceTrack = trackConfigurations.filter(track => 'sequence' === track.type && !track.url && !track.fastaURL).length === 0;
         if (pushSequenceTrack /*&& false !== this.config.showSequence*/) {
           trackConfigurations.push({
             type: "sequence",
@@ -61500,13 +61614,15 @@
        */
       async createTrack(config) {
         // Resolve function and promise urls
-        let url = await resolveURL(config.url);
+        let url = await resolveURL(config.url || config.fastaURL);
         if (isString$2(url)) {
           url = url.trim();
         }
         if (url) {
           if (config.format) {
             config.format = config.format.toLowerCase();
+          } else if (config.fastaURL) {
+            config.format = "fasta"; // by definition
           } else {
             let filename = config.filename;
             if (!filename) {
@@ -61518,7 +61634,7 @@
             } else if (format) {
               config.format = format;
             } else {
-              if (config.sourceType === undefined || config.sourceType === "htsget") {
+              if (config.sourceType === "htsget") {
                 // Check for htsget URL.  This is a longshot
                 await HtsgetReader.inferFormat(config);
               }
@@ -62570,8 +62686,7 @@
       } else {
         await browser.loadSessionObject(config);
       }
-      const isWGV = browser.isMultiLocusWholeGenomeView() || GenomeUtils.isWholeGenomeView(browser.referenceFrameList[0].chr);
-      browser.navbarManager.navbarDidResize(browser.$navigation.width(), isWGV);
+      browser.navbarManager.navbarDidResize(browser.$navigation.width());
       return browser;
     }
     function removeBrowser(browser) {
@@ -62728,7 +62843,7 @@
     }
 
     function embedCSS() {
-      var css = '.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 210px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 18px;\n  height: 18px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000;\n}\n.igv-multi-locus-close-button > svg {\n  vertical-align: top;\n}\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343;\n}\n\n.igv-multi-locus-ruler-label {\n  z-index: 64;\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label div {\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n  background-color: white;\n}\n\n.igv-multi-locus-ruler-label-square-dot {\n  z-index: 64;\n  position: absolute;\n  left: 50%;\n  top: 5%;\n  transform: translate(-50%, 0%);\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label-square-dot > div:first-child {\n  width: 14px;\n  height: 14px;\n}\n.igv-multi-locus-ruler-label-square-dot > div:last-child {\n  margin-left: 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n}\n\n.igv-multi-locus-ruler-label:hover {\n  cursor: pointer;\n}\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 26px;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25);\n}\n\n.igv-ruler-tooltip {\n  pointer-events: none;\n  z-index: 128;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 32px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ruler-tooltip > div {\n  pointer-events: none;\n  width: 128px;\n  height: auto;\n  padding: 1px;\n  color: #373737;\n  font-size: 10px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: #373737;\n}\n\n.igv-track-label {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  width: auto;\n  height: auto;\n  max-width: 200px;\n  padding-left: 4px;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  text-align: center;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-color: #444;\n  border-radius: 2px;\n  border-style: solid;\n  border-width: thin;\n  background-color: white;\n  z-index: 128;\n  cursor: pointer;\n}\n\n.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8;\n}\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px;\n}\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 8;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-left-style: dashed;\n  border-left-width: thin;\n  border-right-style: dashed;\n  border-right-width: thin;\n}\n\n.igv-center-line-wide {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(127, 127, 127, 0.51);\n}\n\n.igv-center-line-thin {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(0, 0, 0, 0);\n}\n\n.igv-cursor-guide-horizontal {\n  display: none;\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 1px;\n  z-index: 1;\n  margin-left: 50px;\n  margin-right: 54px;\n  border-top-style: dotted;\n  border-top-width: thin;\n  border-top-color: rgba(127, 127, 127, 0.76);\n}\n\n.igv-cursor-guide-vertical {\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  z-index: 1;\n  border-left-style: dotted;\n  border-left-width: thin;\n  border-left-color: rgba(127, 127, 127, 0.76);\n  display: none;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-generic-dialog-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-generic-dialog-container .igv-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input div {\n  width: 30%;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div {\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-generic-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-container div:first-child {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-generic-container div:first-child i {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-menu-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: max-content;\n  z-index: 4096;\n  cursor: pointer;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background: white;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-end;\n  text-align: left;\n}\n.igv-menu-popup > div:not(:first-child) {\n  width: 100%;\n}\n.igv-menu-popup > div:not(:first-child) > div {\n  background: white;\n}\n.igv-menu-popup > div:not(:first-child) > div.context-menu {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.igv-menu-popup > div:not(:first-child) > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-menu-popup > div:not(:first-child) > div:hover {\n  background: #efefef;\n}\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px;\n}\n\n.igv-menu-popup-header {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-menu-popup-header div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-menu-popup-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-menu-popup-check-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 20px;\n  margin-right: 4px;\n  background-color: transparent;\n}\n.igv-menu-popup-check-container div {\n  padding-top: 2px;\n  padding-left: 8px;\n}\n.igv-menu-popup-check-container div:first-child {\n  position: relative;\n  width: 12px;\n  height: 12px;\n}\n.igv-menu-popup-check-container div:first-child svg {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-loading-spinner-container {\n  z-index: 1024;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 32px;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-loading-spinner-container > div {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 4px solid rgba(128, 128, 128, 0.5);\n  border-top-color: rgb(255, 255, 255);\n  animation: spin 1s ease-in-out infinite;\n  -webkit-animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n.igv-roi-menu-next-gen {\n  position: absolute;\n  z-index: 512;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background-color: white;\n  width: 192px;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu-next-gen > div:first-child {\n  height: 24px;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-roi-menu-next-gen > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu-next-gen > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu-next-gen > div:last-child {\n  background-color: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  text-align: start;\n  vertical-align: middle;\n  cursor: pointer;\n}\n.igv-roi-menu-next-gen > div:last-child > div {\n  height: 24px;\n  padding-left: 4px;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  border-bottom-color: #7f7f7f;\n}\n.igv-roi-menu-next-gen > div:last-child > div:not(:first-child):hover {\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu-next-gen > div:last-child div:first-child {\n  cursor: default;\n  font-style: italic;\n  text-align: center;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-menu-next-gen > div:last-child > div:last-child {\n  border-bottom-width: 0;\n  border-bottom-color: transparent;\n}\n\n.igv-roi-placeholder {\n  font-style: normal;\n  color: rgba(75, 75, 75, 0.6);\n}\n\n.igv-roi-table {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-four-column {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table-four-column > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table-four-column > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table-four-column > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table-four-column > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-row-selected {\n  background-color: rgba(0, 0, 0, 0.125);\n}\n\n.igv-roi-table-button {\n  height: 20px;\n  user-select: none;\n  line-height: 20px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  color: black;\n  padding-left: 6px;\n  padding-right: 6px;\n  background-color: rgb(239, 239, 239);\n  border-color: black;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 3px;\n}\n\n.igv-roi-table-button:hover {\n  cursor: pointer;\n  font-weight: 400;\n  background-color: rgba(0, 0, 0, 0.13);\n}\n\n.igv-roi-region {\n  z-index: 64;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  margin-top: 44px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-region > div {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.igv-roi-menu {\n  position: absolute;\n  z-index: 1024;\n  width: 144px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu > div:not(:last-child) {\n  border-bottom-color: rgba(128, 128, 128, 0.5);\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-menu > div:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-color: transparent;\n  border-top-style: solid;\n  border-top-width: 0;\n}\n.igv-roi-menu > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n}\n\n.igv-roi-menu-row {\n  height: 24px;\n  padding-left: 8px;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n  background-color: white;\n}\n\n.igv-roi-menu-row-edit-description {\n  width: -webkit-fill-available;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  background-color: white;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-bottom: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-menu-row-edit-description > label {\n  margin-left: 2px;\n  margin-bottom: 0;\n  display: block;\n  width: -webkit-fill-available;\n}\n.igv-roi-menu-row-edit-description > input {\n  display: block;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-bottom: 1px;\n  width: -webkit-fill-available;\n}\n\n.igv-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-top: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%;\n}\n.igv-viewport-content > canvas {\n  position: relative;\n  display: block;\n}\n\n.igv-column-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453;\n}\n\n.igv-column {\n  position: relative;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-axis-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 50px;\n}\n.igv-axis-column > div {\n  margin-top: 5px;\n  width: 100%;\n}\n\n.igv-sample-name-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-scrollbar-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 14px;\n}\n.igv-scrollbar-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 14px;\n}\n.igv-scrollbar-column > div > div {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 2px;\n  width: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c4c4c4;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-scrollbar-column > div > div:hover {\n  background-color: #c4c4c4;\n}\n\n.igv-track-drag-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 12px;\n  background-color: white;\n}\n.igv-track-drag-column > .igv-track-drag-handle {\n  z-index: 512;\n  position: relative;\n  cursor: pointer;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover {\n  background-color: #787878;\n}\n.igv-track-drag-column > .igv-track-drag-shim {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n}\n\n.igv-gear-menu-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 28px;\n}\n.igv-gear-menu-column > div {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 5px;\n  width: 100%;\n  background: white;\n}\n.igv-gear-menu-column > div > div {\n  position: relative;\n  margin-top: 4px;\n  width: 16px;\n  height: 16px;\n  color: #7F7F7F;\n}\n.igv-gear-menu-column > div > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n/*# sourceMappingURL=dom.css.map */\n';
+      var css = '.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 210px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 18px;\n  height: 18px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000;\n}\n.igv-multi-locus-close-button > svg {\n  vertical-align: top;\n}\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343;\n}\n\n.igv-multi-locus-ruler-label {\n  z-index: 64;\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label div {\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n  background-color: white;\n}\n\n.igv-multi-locus-ruler-label-square-dot {\n  z-index: 64;\n  position: absolute;\n  left: 50%;\n  top: 5%;\n  transform: translate(-50%, 0%);\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label-square-dot > div:first-child {\n  width: 14px;\n  height: 14px;\n}\n.igv-multi-locus-ruler-label-square-dot > div:last-child {\n  margin-left: 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n}\n\n.igv-multi-locus-ruler-label:hover {\n  cursor: pointer;\n}\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 26px;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25);\n}\n\n.igv-ruler-tooltip {\n  pointer-events: none;\n  z-index: 128;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 32px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ruler-tooltip > div {\n  pointer-events: none;\n  width: 128px;\n  height: auto;\n  padding: 1px;\n  color: #373737;\n  font-size: 10px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: #373737;\n}\n\n.igv-track-label {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  width: auto;\n  height: auto;\n  max-width: 50%;\n  padding-left: 4px;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  text-align: center;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-color: #444;\n  border-radius: 2px;\n  border-style: solid;\n  border-width: thin;\n  background-color: white;\n  z-index: 128;\n  cursor: pointer;\n}\n\n.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8;\n}\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px;\n}\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 8;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-left-style: dashed;\n  border-left-width: thin;\n  border-right-style: dashed;\n  border-right-width: thin;\n}\n\n.igv-center-line-wide {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(127, 127, 127, 0.51);\n}\n\n.igv-center-line-thin {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(0, 0, 0, 0);\n}\n\n.igv-cursor-guide-horizontal {\n  display: none;\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 1px;\n  z-index: 1;\n  margin-left: 50px;\n  margin-right: 54px;\n  border-top-style: dotted;\n  border-top-width: thin;\n  border-top-color: rgba(127, 127, 127, 0.76);\n}\n\n.igv-cursor-guide-vertical {\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  z-index: 1;\n  border-left-style: dotted;\n  border-left-width: thin;\n  border-left-color: rgba(127, 127, 127, 0.76);\n  display: none;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-generic-dialog-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-generic-dialog-container .igv-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input div {\n  width: 30%;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div {\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-generic-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-container div:first-child {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-generic-container div:first-child i {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-menu-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: max-content;\n  z-index: 4096;\n  cursor: pointer;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background: white;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-end;\n  text-align: left;\n}\n.igv-menu-popup > div:not(:first-child) {\n  width: 100%;\n}\n.igv-menu-popup > div:not(:first-child) > div {\n  background: white;\n}\n.igv-menu-popup > div:not(:first-child) > div.context-menu {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.igv-menu-popup > div:not(:first-child) > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-menu-popup > div:not(:first-child) > div:hover {\n  background: #efefef;\n}\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px;\n}\n\n.igv-menu-popup-header {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-menu-popup-header div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-menu-popup-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-menu-popup-check-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 20px;\n  margin-right: 4px;\n  background-color: transparent;\n}\n.igv-menu-popup-check-container div {\n  padding-top: 2px;\n  padding-left: 8px;\n}\n.igv-menu-popup-check-container div:first-child {\n  position: relative;\n  width: 12px;\n  height: 12px;\n}\n.igv-menu-popup-check-container div:first-child svg {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-loading-spinner-container {\n  z-index: 1024;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 32px;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-loading-spinner-container > div {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 4px solid rgba(128, 128, 128, 0.5);\n  border-top-color: rgb(255, 255, 255);\n  animation: spin 1s ease-in-out infinite;\n  -webkit-animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n.igv-roi-menu-next-gen {\n  position: absolute;\n  z-index: 512;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background-color: white;\n  width: 192px;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu-next-gen > div:first-child {\n  height: 24px;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-roi-menu-next-gen > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu-next-gen > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu-next-gen > div:last-child {\n  background-color: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  text-align: start;\n  vertical-align: middle;\n  cursor: pointer;\n}\n.igv-roi-menu-next-gen > div:last-child > div {\n  height: 24px;\n  padding-left: 4px;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  border-bottom-color: #7f7f7f;\n}\n.igv-roi-menu-next-gen > div:last-child > div:not(:first-child):hover {\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu-next-gen > div:last-child div:first-child {\n  cursor: default;\n  font-style: italic;\n  text-align: center;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-menu-next-gen > div:last-child > div:last-child {\n  border-bottom-width: 0;\n  border-bottom-color: transparent;\n}\n\n.igv-roi-placeholder {\n  font-style: normal;\n  color: rgba(75, 75, 75, 0.6);\n}\n\n.igv-roi-table {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-four-column {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table-four-column > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table-four-column > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table-four-column > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table-four-column > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-row-selected {\n  background-color: rgba(0, 0, 0, 0.125);\n}\n\n.igv-roi-table-button {\n  height: 20px;\n  user-select: none;\n  line-height: 20px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  color: black;\n  padding-left: 6px;\n  padding-right: 6px;\n  background-color: rgb(239, 239, 239);\n  border-color: black;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 3px;\n}\n\n.igv-roi-table-button:hover {\n  cursor: pointer;\n  font-weight: 400;\n  background-color: rgba(0, 0, 0, 0.13);\n}\n\n.igv-roi-region {\n  z-index: 64;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  margin-top: 44px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-region > div {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.igv-roi-menu {\n  position: absolute;\n  z-index: 1024;\n  width: 144px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu > div:not(:last-child) {\n  border-bottom-color: rgba(128, 128, 128, 0.5);\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-menu > div:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-color: transparent;\n  border-top-style: solid;\n  border-top-width: 0;\n}\n.igv-roi-menu > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n}\n\n.igv-roi-menu-row {\n  height: 24px;\n  padding-left: 8px;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n  background-color: white;\n}\n\n.igv-roi-menu-row-edit-description {\n  width: -webkit-fill-available;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  background-color: white;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-bottom: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-menu-row-edit-description > label {\n  margin-left: 2px;\n  margin-bottom: 0;\n  display: block;\n  width: -webkit-fill-available;\n}\n.igv-roi-menu-row-edit-description > input {\n  display: block;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-bottom: 1px;\n  width: -webkit-fill-available;\n}\n\n.igv-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-top: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  line-height: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%;\n}\n.igv-viewport-content > canvas {\n  position: relative;\n  display: block;\n}\n\n.igv-column-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453;\n}\n\n.igv-column {\n  position: relative;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-axis-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 50px;\n}\n.igv-axis-column > div {\n  margin-top: 5px;\n  width: 100%;\n}\n\n.igv-sample-name-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-scrollbar-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 14px;\n}\n.igv-scrollbar-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 14px;\n}\n.igv-scrollbar-column > div > div {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 2px;\n  width: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c4c4c4;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-scrollbar-column > div > div:hover {\n  background-color: #c4c4c4;\n}\n\n.igv-track-drag-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 12px;\n  background-color: white;\n}\n.igv-track-drag-column > .igv-track-drag-handle {\n  z-index: 512;\n  position: relative;\n  cursor: pointer;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover {\n  background-color: #787878;\n}\n.igv-track-drag-column > .igv-track-drag-shim {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n}\n\n.igv-gear-menu-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 28px;\n}\n.igv-gear-menu-column > div {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 5px;\n  width: 100%;\n  background: white;\n}\n.igv-gear-menu-column > div > div {\n  position: relative;\n  margin-top: 4px;\n  width: 16px;\n  height: 16px;\n  color: #7F7F7F;\n}\n.igv-gear-menu-column > div > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n/*# sourceMappingURL=dom.css.map */\n';
       var style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.innerHTML = css;
@@ -62759,7 +62874,8 @@
       version: version$1,
       setApiKey,
       doAutoscale,
-      TrackView
+      TrackView,
+      GenomeUtils
     };
 
     return index;