igv 3.0.8 → 3.0.9

package/dist/igv.esm.js

@@ -18593,7 +18593,7 @@ function rgbStringHeatMapLerp(_a, _b, interpolant) {
 
 }
 
-const colorPickerTrackTypeSet = new Set(['bedtype', 'alignment', 'annotation', 'variant', 'wig', 'interact']);
+const colorPickerTrackTypeSet = new Set(['bedtype', 'alignment', 'annotation', 'variant', 'wig', 'interact', 'shoebox']);
 
 const vizWindowTypes = new Set(['alignment', 'annotation', 'variant', 'eqtl', 'qtl', 'snp', 'shoebox', 'wig']);
 
@@ -20936,125 +20936,6 @@ function createDOMPurify() {
 }
 var purify = createDOMPurify();
 
-class SliderDialog {
-
-    constructor(parent) {
-
-        this.parent = parent;
-
-        // dialog container
-        this.container = div({class: 'igv-ui-generic-dialog-container'});
-        parent.appendChild(this.container);
-
-        // dialog header
-        const header = div({class: 'igv-ui-generic-dialog-header'});
-        this.container.appendChild(header);
-
-        // dialog label
-        this.label = div({class: 'igv-ui-generic-dialog-one-liner'});
-        this.container.appendChild(this.label);
-        this.label.text = 'Unlabeled';
-
-        // input container
-        this.input_container = div({class: 'igv-ui-generic-dialog-input'});
-        this.container.appendChild(this.input_container);
-
-        // input element
-        let html = `<input type="range" id="igv-slider-dialog-input" name="igv-slider-dialog-input" />`;
-        this._input = document.createRange().createContextualFragment(html).firstChild;
-        this.input_container.appendChild(this._input);
-
-        // output element
-        html = `<output id="igv-slider-dialog-output" name="igv-slider-dialog-output" for="igv-slider-dialog-input"></output>`;
-        this._output = document.createRange().createContextualFragment(html).firstChild;
-        this.input_container.appendChild(this._output);
-
-
-        // ok | cancel
-        const buttons = div({class: 'igv-ui-generic-dialog-ok-cancel'});
-        this.container.appendChild(buttons);
-
-        // ok
-        this.ok = div();
-        buttons.appendChild(this.ok);
-        this.ok.textContent = 'OK';
-
-        // cancel
-        this.cancel = div();
-        buttons.appendChild(this.cancel);
-        this.cancel.textContent = 'Cancel';
-
-        hide(this.container);
-
-        this._input.addEventListener('input', () => {
-            const number = parseFloat(this._input.value)/this._scaleFactor;
-            this.callback(number);
-            this._output.value = `${number.toFixed(2)}`;
-        }, false);
-
-        this.ok.addEventListener('click', () => {
-            if (typeof this.callback === 'function') {
-                const number = parseFloat(this._input.value)/this._scaleFactor;
-                this.callback(number);
-                this.callback = undefined;
-            }
-            this._input.value = undefined;
-            hide(this.container);
-        });
-
-        const cancel = () => {
-            this._input.value = undefined;
-            hide(this.container);
-        };
-
-        this.cancel.addEventListener('click', cancel);
-
-        attachDialogCloseHandlerWithParent(header, cancel);
-        makeDraggable(this.container, header);
-
-    }
-
-    get value() {
-        return purify.sanitize(this._input.value)
-    }
-
-    present(options, e) {
-
-        this.label.textContent = options.label;
-
-        this._scaleFactor = options.scaleFactor;
-        const [ minS, maxS, valueS ] = [ options.min, options.max, options.value ].map(number => (Math.floor(this._scaleFactor * number)).toString());
-
-        this._input.min = minS;
-        this._input.max = maxS;
-        this._input.value = valueS;
-
-        const numer = parseFloat(valueS);
-        const denom = this._scaleFactor;
-        const number = numer/denom;
-        this._output.value = `${number.toFixed(2)}`;
-
-        this.callback = options.callback || options.click;
-
-        show(this.container);
-        this.clampLocation(e.clientX, e.clientY);
-
-    }
-
-    clampLocation(clientX, clientY) {
-
-        const {width: w, height: h} = this.container.getBoundingClientRect();
-        const wh = window.innerHeight;
-        const ww = window.innerWidth;
-
-        const y = Math.min(wh - h, clientY);
-        const x = Math.min(ww - w, clientX);
-        this.container.style.left = `${x}px`;
-        this.container.style.top = `${y}px`;
-
-    }
-}
-
 class InputDialog {
 
     constructor(parent) {
@@ -24508,6 +24389,29 @@ function decodeSNP(tokens, header) {
 
 }
 
+function decodeShoebox(tokens, header, maxColumnCount = Number.MAX_SAFE_INTEGER) {
+
+    if (tokens.length < 4) return undefined
+
+    const chr = tokens[0];
+    const start = parseInt(tokens[1]);
+    const end = tokens.length > 2 ? parseInt(tokens[2]) : start + 1;
+    if (isNaN(start) || isNaN(end)) {
+        return new DecodeError(`Unparsable bed record.`)
+    }
+    const feature = new UCSCBedFeature({chr: chr, start: start, end: end, score: 1000});
+
+    const values = [];
+    for(let i = 3; i< tokens.length; i++) {
+        values.push(Number.parseInt(tokens[i]));
+    }
+    feature.values = values;
+
+
+    return feature
+}
+
+
 class UCSCBedFeature {
 
     constructor(properties) {
@@ -25872,6 +25776,10 @@ class FeatureParser {
                 this.decode = decodeGcnv;
                 this.delimiter = "\t";
                 break
+            case "shoebox":
+                this.decode = decodeShoebox;
+                this.delimiter = "\t";
+                break
             default:
                 const customFormat = getFormat(format);
                 if (customFormat !== undefined) {
@@ -31958,14 +31866,25 @@ class BWReader {
         this.config = config;
         this.bufferSize = BUFFER_SIZE;
         this.loader = isDataURL(this.path) ?
-            new DataBuffer(this.path) : igvxhr;
+            new DataBuffer(decodeDataURI$1(this.path).buffer) :
+            igvxhr;
 
-        if (config.searchTrix) {
-            this._trix = new Trix(`${config.searchTrix}x`, config.searchTrix);
+        const trixURL = config.trixURL || config.searchTrix;
+        if (trixURL) {
+            this._trix = new Trix(`${trixURL}x`, trixURL);
         }
 
     }
 
+    /**
+     * Preload all the data for this bb file
+     * @returns {Promise<void>}
+     */
+    async preload() {
+        const data = await igvxhr.loadArrayBuffer(this.path);
+        this.loader = new DataBuffer(data);
+    }
+
     async readWGFeatures(bpPerPixel, windowFunction) {
         await this.loadHeader();
         const chrIdx1 = 0;
@@ -32631,8 +32550,8 @@ function decodeZoomData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, ch
 
 class DataBuffer {
 
-    constructor(dataURI) {
-        this.data = decodeDataURI$1(dataURI).buffer;
+    constructor(data) {
+        this.data = data;
     }
 
     /**
@@ -38019,6 +37938,16 @@ class Hub {
                 const groupsTxtURL = baseURL + genome.getProperty("groups");
                 groups = await loadStanzas(groupsTxtURL);
             }
+
+            // If the genome has a chromSizes file, and it is not too large, set the chromSizesURL property.  This will
+            // enable whole genome view and the chromosome pulldown
+            if (genome.hasProperty("chromSizes")) {
+                const chromSizesURL = baseURL + genome.getProperty("chromSizes");
+                const l = await getContentLength(chromSizesURL);
+                if (l !== null && Number.parseInt(l) < 1000000) {
+                    genome.setProperty("chromSizesURL", chromSizesURL);
+                }
+            }
         }
 
         // TODO -- categorize extra "user" supplied and other tracks in some distinctive way before including them
@@ -38121,10 +38050,15 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
             name: name,
             twoBitURL: this.baseURL + this.genomeStanza.getProperty("twoBitPath"),
             nameSet: "ucsc",
-            wholeGenomeView: false,
-            showChromosomeWidget: false
         };
 
+        if (this.genomeStanza.hasProperty("chromSizesURL")) {
+            config.chromSizesURL = this.genomeStanza.getProperty("chromSizesURL");
+        } else {
+            config.wholeGenomeView = false;
+            config.showChromosomeWidget = false;
+        }
+
         if (this.genomeStanza.hasProperty("defaultPos")) {
             const hubLocus = this.genomeStanza.getProperty("defaultPos");
             // Strip out coordinates => whole chromosome view
@@ -38325,7 +38259,7 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
             config.searchIndex = t.getProperty("searchIndex");
         }
         if (t.hasProperty("searchTrix")) {
-            config.searchTrix = this.baseURL + t.getProperty("searchTrix");
+            config.trixURL = this.baseURL + t.getProperty("searchTrix");
         }
 
         if (t.hasProperty("group")) {
@@ -38412,6 +38346,26 @@ class Stanza {
     }
 }
 
+
+/**
+ * Return the content length of the resource.  If the content length cannot be determined return null;
+ * @param url
+ * @returns {Promise<number|string>}
+ */
+async function getContentLength(url) {
+    try {
+        const response = await fetch(url, {method: 'HEAD'});
+        const headers = response.headers;
+        if (headers.has("content-length")) {
+            return headers.get("content-length")
+        } else {
+            return null
+        }
+    } catch (e) {
+        return null
+    }
+}
+
 /**
  * Parse a UCSC  file
  * @param url
@@ -41960,7 +41914,7 @@ const hideAllMenuPopups = parent => {
 
 class NavbarButton {
 
-    constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
+    constructor(parent, browser, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
 
         this.browser = browser;
 
@@ -42017,7 +41971,7 @@ class NavbarButton {
     }
 
     configureTextButton(textContent) {
-
+        console.log(`text ${this.title}`);
         this.button.classList.add('igv-navbar-text-button');
 
         const tempDiv = document.createElement('div');
@@ -42032,6 +41986,7 @@ class NavbarButton {
     }
 
     configureIconButton() {
+        console.log(`icon ${this.title}`);
         this.button.classList.add('igv-navbar-icon-button');
     }
 
@@ -42071,11 +42026,6 @@ class NavbarButton {
             this.hide();
         }
     }
-
-    static currentNavbarButtonClass(browser) {
-        const el = browser.$navigation.get(0).querySelector('.igv-navbar-text-button');
-        return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
-    }
 }
 
 const overlayTrackImage =
@@ -42284,6 +42234,19 @@ class MergedTrack extends TrackBase {
         return this._autoscale
     }
 
+    set autoscaleGroup(g) {
+        if(this.tracks) {
+            for(let t of this.tracks) t.autoscaleGroup = g;
+        }
+    }
+
+    get autoscaleGroup() {
+        if(this.tracks && this.tracks.length > 0) {
+            const g = this.tracks[0].autoscaleGroup;
+            return (this.tracks.some(t => g !== t.autoscaleGroup)) ? undefined : g
+        }
+    }
+
     /**
      * Set the data range of all constitutive numeric tracks.  This method is called from the menu item, i.e. an explicit
      * setting, so it should disable autoscale as well.
@@ -42648,9 +42611,9 @@ const numericTracks = (tracks) => {
 };
 
 class OverlayTrackButton extends NavbarButton {
-    constructor(browser, parent) {
+    constructor(parent, browser) {
 
-        super(browser, parent, 'Overlay Tracks', buttonLabel, overlayTrackImage, overlayTrackImageHover, false);
+        super(parent, browser, 'Overlay Tracks', buttonLabel, overlayTrackImage, overlayTrackImageHover, false);
 
         this.button.addEventListener('mouseenter', () => this.setState(true));
         this.button.addEventListener('mouseleave', () => this.setState(false));
@@ -42673,15 +42636,15 @@ function trackOverlayClickHandler(e) {
 
     if (true === isOverlayTrackCriteriaMet(this.browser)) {
 
-        const tracks = this.browser.getSelectedTrackViews().map(({ track }) => track);
+        const tracks = this.browser.getSelectedTrackViews().map(({track}) => track);
         for (const track of tracks) {
             track.selected = false;
         }
 
-        // Flatten any merged tracks.  Must do this before there removal
+        // Flatten any merged tracks.  Must do this before their removal
         const flattenedTracks = [];
-        for(let t of tracks) {
-            if("merged" === t.type) {
+        for (let t of tracks) {
+            if ("merged" === t.type) {
                 flattenedTracks.push(...t.tracks);
             } else {
                 flattenedTracks.push(t);
@@ -42694,17 +42657,20 @@ function trackOverlayClickHandler(e) {
                 type: 'merged',
                 autoscale: false,
                 alpha: 0.5, //fudge * (1.0/tracks.length),
-                height: Math.max(...tracks.map(({ height }) => height)),
-                order: Math.min(...tracks.map(({ order }) => order)),
+                height: Math.max(...tracks.map(({height}) => height)),
+                order: Math.min(...tracks.map(({order}) => order)),
             };
 
         const mergedTrack = new MergedTrack(config, this.browser, flattenedTracks);
 
         for (const track of tracks) {
-            this.browser.removeTrack(track);
+            const idx = this.browser.trackViews.indexOf(track.trackView);
+            this.browser.trackViews.splice(idx, 1);
+            track.trackView.dispose();
         }
 
         this.browser.addTrack(config, mergedTrack);
+        mergedTrack.trackView.updateViews();
 
     }
 
@@ -42716,9 +42682,9 @@ function isOverlayTrackCriteriaMet(browser) {
 
     if (selected && selected.length > 1) {
 
-        const criteriaSet = new Set([ 'wig', 'merged' ]);
+        const criteriaSet = new Set(['wig', 'merged']);
 
-        const list = selected.filter(({ track }) => criteriaSet.has(track.type));
+        const list = selected.filter(({track}) => criteriaSet.has(track.type));
 
         return list.length > 1
 
@@ -42833,6 +42799,8 @@ class TrackView {
     createAxis(browser, track) {
 
         const axis = div();
+        this.axis = axis;
+
         browser.columnContainer.querySelector('.igv-axis-column').appendChild(axis);
 
         axis.dataset.tracktype = track.type;
@@ -42850,12 +42818,12 @@ class TrackView {
 
         if (false === multiTrackSelectExclusionTypes.has(this.track.type)) {
 
-            const trackSelectionContainer = div();
-            axis.appendChild(trackSelectionContainer);
+            this.trackSelectionContainer = div();
+            axis.appendChild(this.trackSelectionContainer);
 
             const html = `<input type="checkbox" name="track-select">`;
             const input = document.createRange().createContextualFragment(html).firstChild;
-            trackSelectionContainer.appendChild(input);
+            this.trackSelectionContainer.appendChild(input);
             input.checked = this.track.selected || false;
 
             input.addEventListener('change', event => {
@@ -42863,10 +42831,10 @@ class TrackView {
                 event.stopPropagation();
                 this.track.selected = event.target.checked;
                 this.setDragHandleSelectionState(event.target.checked);
-                this.browser.overlayTrackButton.setVisibility( isOverlayTrackCriteriaMet(this.browser) );
+                this.browser.overlayTrackButton.setVisibility(isOverlayTrackCriteriaMet(this.browser));
             });
 
-            this.setTrackSelectionState(axis, false);
+            this.enableTrackSelection(false);
 
         }
 
@@ -43676,13 +43644,19 @@ class TrackView {
         return Math.max(...this.viewports.map(viewport => viewport.getContentHeight()))
     }
 
-    setTrackSelectionState(axis, doEnableMultiSelection) {
+    enableTrackSelection(doEnableMultiSelection) {
 
-        const container = axis.querySelector('div');
+        const container = this.trackSelectionContainer;
+
+        if (!container || multiTrackSelectExclusionTypes.has(this.track.type)) {
+            return
+        }
 
         if (false !== doEnableMultiSelection) {
             container.style.display = 'grid';
         } else {
+            // If disabling selection set track selection state to false
+            this.track.selected = false;
 
             const trackSelectInput = container.querySelector('[name=track-select]');
             trackSelectInput.checked = this.track.selected;
@@ -43708,13 +43682,11 @@ class TrackView {
             dragHandle.classList.remove('igv-track-drag-handle-selected-color');
             dragHandle.classList.add('igv-track-drag-handle-color');
         }
-
     }
 
 }
 
 
-
 function renderSVGAxis(context, track, axisCanvas, deltaX, deltaY) {
 
     if (typeof track.paintAxis === 'function') {
@@ -43828,13 +43800,13 @@ class ConstantColorScale {
  *
  */
 
-const defaultColorScaleConfig = {threshold: 2000, r: 0, g: 0, b: 255};
+const defaultColorScaleConfig$1 = {threshold: 2000, r: 0, g: 0, b: 255};
 
 class HicColorScale {
 
     constructor(scale) {
 
-        scale = scale || defaultColorScaleConfig;
+        scale = scale || defaultColorScaleConfig$1;
         this.threshold = scale.threshold;
         this.r = scale.r;
         this.g = scale.g;
@@ -54037,6 +54009,10 @@ async function inferFileFormatFromContents(config) {
     if (firstLine.startsWith("##gff-version")) {
         return "gff"
     }
+    if(firstLine.startsWith("##fileformat=")) {
+        return firstLine.substring(13).toLowerCase();   // Non standard extension of VCF convention
+    }
+
 
     // QTL test must preceed GWAS test as GWAS files will also pass the QTL test
     if (QTLParser.isQTL(firstLine)) {
@@ -57273,10 +57249,6 @@ class AlignmentTrack extends TrackBase {
 
         function clickHandler() {
             this.alignmentTrack.colorBy = menuItem.key;
-            if ('strand' !== this.alignmentTrack.groupBy) {
-                this.alignmentTrack.groupBy = 'strand';
-                this.alignmentTrack.repackAlignments();
-            }
             this.trackView.repaintViews();
         }
 
@@ -67865,6 +67837,7 @@ async function searchFeatures(browser, name) {
     const searchConfig = browser.searchConfig || DEFAULT_SEARCH_CONFIG;
     let feature;
 
+    name = name.toUpperCase();
     const searchableTracks = browser.tracks.filter(t => t.searchable);
     for (let track of searchableTracks) {
         const feature = await track.search(name);
@@ -70203,6 +70176,343 @@ class SpliceJunctionTrack extends TrackBase {
     }
 }
 
+/*
+ *  The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2017 The Regents of the University of California
+ *
+ * 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 defaultColorScaleConfig = {min: 0, max: 3000, color: "rgb(0,0,255)"};
+
+class ShoeboxColorScale {
+
+    constructor(scale) {
+
+        scale = scale || defaultColorScaleConfig;
+        this.max = scale.max;
+        this.min = scale.min || 0;
+        this.cache = [];
+        this.nbins = 1000;
+        this.binsize = (this.max - this.min) / this.nbins;
+        this.updateColor(scale.color || "rgb(0,0,255)");
+
+    }
+
+    updateColor(color) {
+        const comps = color.substring(4).replace(")", "").split(",");
+        if (comps.length === 3) {
+            this.r = Number.parseInt(comps[0].trim());
+            this.g = Number.parseInt(comps[1].trim());
+            this.b = Number.parseInt(comps[2].trim());
+        }
+        this.cache = [];
+    }
+
+    setMinMax(min, max) {
+        this.min = min;
+        this.max = max;
+        this.cache = [];
+        this.binsize = (this.max - this.min) / this.nbins;
+    }
+
+    getColor(value) {
+        const low = 0;
+        if (value < this.min) return "white"
+
+        const bin = Math.floor((Math.min(this.max, value) - this.min) / this.binsize);
+        if (undefined === this.cache[bin]) {
+            const alpha = (IGVMath.clamp(value, low, this.max) - low) / (this.max - low);
+            this.cache[bin] = `rgba(${this.r},${this.g},${this.b}, ${alpha})`;
+        }
+        return this.cache[bin]
+    }
+
+    /**
+     *
+     * @returns {{min: (*|number), color: string, max}}
+     */
+    toJson() {
+        return {
+            min: this.min,
+            max: this.max,
+            color: `rgb(${this.r},${this.g},${this.b})`
+        }
+    }
+
+    // For short-term backward compatibility
+    static parse(str) {
+
+        const tokens = str.split(",");
+
+        const cs = {
+            min: Number.parseFloat(tokens[0]),
+            max: Number.parseFloat(tokens[1]),
+            color: `${tokens[2]},${tokens[3]},${tokens[4]}`
+        };
+        return new ShoeboxColorScale(cs)
+    }
+
+}
+
+class ShoeboxTrack extends TrackBase {
+
+    static defaults = {
+        height: 300,
+        rowHeight: 3,
+        max: 3000,
+        visibilityWindow: 10000
+    }
+
+    constructor(config, browser) {
+        super(config, browser);
+    }
+
+    init(config) {
+        super.init(config);
+
+        this.type = "shoebox";
+        this.height = config.height || 300;
+        this.rowHeight = config.rowHeight || 3;
+        this.max = config.max || 3000;
+
+        // Hardcoded -- todo get from track line
+        this.sampleKeys = [];
+        for (let i = 1; i <= 100; i++) {
+            this.sampleKeys.push(i);
+        }
+
+        // Create featureSource
+        const configCopy = Object.assign({}, this.config);
+        configCopy.format = 'shoebox';   // bit of a hack
+        this.featureSource = FeatureSource(configCopy, this.browser.genome);
+    }
+
+    async postInit() {
+        if (typeof this.featureSource.getHeader === "function") {
+            this.header = await this.featureSource.getHeader();
+            if (this.disposed) return   // This track was removed during async load
+        }
+        // Set properties from track line
+        if (this.header) {
+            this.setTrackProperties(this.header);
+        }
+
+        // Must do the following after setting track properties as they can be overriden via a track line
+
+        // Color settings
+        if (this.config.colorScale && this.config.colorScale.max && this.config.colorScale.color) {   // Minimal validation
+            this.colorScale = new ShoeboxColorScale(this.config.colorScale);
+
+        } else {
+            const min = this.dataRange.min;
+            const max = this.dataRange.max;
+            this.colorScale = new ShoeboxColorScale({min, max, color: this.color});
+        }
+    }
+
+    get color() {
+        return this._color || "rgb(0,0,255)"
+    }
+
+    set color(color) {
+        this._color = color;
+        if (this.colorScale) {
+            this.colorScale.updateColor(color);
+        }
+    }
+
+    menuItemList() {
+
+        const menuItems = [];
+
+
+        menuItems.push('<hr/>');
+
+        // Data range
+        let object = $$1('<div>');
+        object.text('Set data range');
+
+        function dialogPresentationHandler() {
+
+            if (this.trackView.track.selected) {
+                this.browser.dataRangeDialog.configure(this.trackView.browser.getSelectedTrackViews());
+            } else {
+                this.browser.dataRangeDialog.configure(this.trackView);
+            }
+            this.browser.dataRangeDialog.present($$1(this.browser.columnContainer));
+        }
+
+        menuItems.push({object, dialog: dialogPresentationHandler});
+
+        return menuItems
+    }
+
+    setDataRange({min, max}) {
+        this.dataRange.min = min;
+        this.dataRange.max = max;
+        this.colorScale.min = min;
+        this.colorScale.max = max;
+        this.trackView.repaintViews();
+    }
+
+    hasSamples() {
+        return true   // by definition
+    }
+
+    getSamples() {
+        return {
+            names: this.sampleKeys,
+            height: this.rowHeight,
+            yOffset: 0
+        }
+    }
+
+    async getFeatures(chr, start, end, bpPerPixel) {
+        const visibilityWindow = this.visibilityWindow;
+        return this.featureSource.getFeatures({chr, start, end, bpPerPixel, visibilityWindow})
+    }
+
+
+    draw({context, pixelTop, pixelWidth, pixelHeight, features, bpPerPixel, bpStart}) {
+
+
+        IGVGraphics.fillRect(context, 0, pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
+
+        if (features && features.length > 0) {
+
+            const rowHeight = this.rowHeight;
+            const pixelBottom = pixelTop + pixelHeight;
+            const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
+
+            const h = rowHeight;
+
+            for (let f of features) {
+
+                // Test for overlap with in-view region
+                if (f.end < bpStart || f.start > bpEnd) continue
+
+                // Pixel x values
+                const xLeft = Math.round((f.start - bpStart) / bpPerPixel);
+                const xRight = Math.round((f.end - bpStart) / bpPerPixel);
+                const w = Math.max(1, xRight - xLeft);
+
+                // Loop through value array
+                let row = 0;
+
+                for (let i = f.values.length - 1; i >= 0; i--) {
+
+                    const v = f.values[i];
+
+                    const y = row * rowHeight;
+
+
+                    const bottom = y + rowHeight;
+
+                    if (bottom < pixelTop || y > pixelBottom) {
+                        continue
+                    }
+
+                    const color = this.colorScale.getColor(v);
+
+                    context.fillStyle = color;
+
+                    context.fillRect(xLeft, y, w, h);
+
+                    row++;
+                }
+            }
+        }
+
+    }
+
+    /**
+     * Optional method to compute pixel height to accomodate the list of features.
+     *
+     * @param features
+     * @returns {number}
+     */
+    computePixelHeight(features) {
+        if (!features || features.length === 0) return 0
+        return features[0].values.length * this.rowHeight
+    }
+
+
+    clickedFeatures(clickState) {
+
+        const allFeatures = super.clickedFeatures(clickState);
+        const y = clickState.y;
+        return allFeatures.filter(function (feature) {
+            const rect = feature.pixelRect;
+            return rect && y >= rect.y && y <= (rect.y + rect.h)
+        })
+
+    }
+
+    hoverText(clickState) {
+        const features = this.clickedFeatures(clickState);
+        if (features && features.length > 0) {
+            return `${features[0].sample}: ${features[0].value}`
+        }
+    }
+
+    popupData(clickState, featureList) {
+
+        if (featureList === undefined) featureList = this.clickedFeatures(clickState);
+
+        const items = [];
+
+        for (let feature of featureList) {
+
+            // Double line divider between features
+            if (items.length > 0) {
+                items.push('<hr/>');
+                items.push('<hr/>');
+            }
+
+            // hack for whole genome features, which save the original feature as "_f"
+            const f = feature._f || feature;
+
+            const data = (typeof f.popupData === 'function') ?
+                f.popupData(this.type, this.browser.genome.id) :
+                this.extractPopupData(f);
+            Array.prototype.push.apply(items, data);
+
+        }
+
+        return items
+    }
+
+    get supportsWholeGenome() {
+        return false
+    }
+
+    getState() {
+
+        const config = super.getState();
+        config.colorScale = this.colorScale.toJson();
+        return config
+
+    }
+
+}
+
 //import CNVPytorTrack from "./CNVpytor/cnvpytorTrack.js"
 
 
@@ -70214,7 +70524,7 @@ const trackFunctions =
         ['seg', (config, browser) => new SegTrack(config, browser)],
         ['mut', (config, browser) => new SegTrack(config, browser)],
         ['maf', (config, browser) => new SegTrack(config, browser)],
-        ['shoebox', (config, browser) => new SegTrack(config, browser)],
+        ['shoebox', (config, browser) => new ShoeboxTrack(config, browser)],
         ['wig', (config, browser) => new WigTrack(config, browser)],
         ['merged', (config, browser) => new MergedTrack(config, browser)],
         ['alignment', (config, browser) => new BAMTrack(config, browser)],
@@ -70706,94 +71016,11 @@ function createReferenceFrameList(loci, genome, browserFlanking, minimumBases, v
     })
 }
 
-const _version = "3.0.8";
+const _version = "3.0.9";
 function version() {
     return _version
 }
 
-/*
- * 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 navbarResponsiveClasses = {};
-
-const responsiveThreshold = 8;
-let textButtonContainerWidth = undefined;
-
-function navbarDidResize(browser, width) {
-
-    const currentClass = NavbarButton.currentNavbarButtonClass(browser);
-    if ('igv-navbar-text-button' === currentClass) {
-        textButtonContainerWidth = browser.$navigation.get(0).querySelector('.igv-navbar-right-container').getBoundingClientRect().width;
-    }
-
-    const responsiveClasses = getResponsiveClasses(browser, width);
-
-    $$1(browser.zoomWidget.zoomContainer).removeClass();
-    $$1(browser.zoomWidget.zoomContainer).addClass(responsiveClasses.zoomContainer);
-
-    browser.fireEvent('navbar-resize', [ responsiveClasses.navbarButton ]);
-}
-
-function getResponsiveClasses(browser, navbarWidth) {
-
-    const isWGV =
-        (browser.isMultiLocusWholeGenomeView()) ||
-        (browser.referenceFrameList && GenomeUtils.isWholeGenomeView(browser.referenceFrameList[0].chr));
-
-    isWGV ? browser.windowSizePanel.hide() : browser.windowSizePanel.show();
-
-    const { x: leftContainerX, width: leftContainerWidth } = browser.$navigation.get(0).querySelector('.igv-navbar-left-container').getBoundingClientRect();
-    const leftContainerExtent = leftContainerX + leftContainerWidth;
-    const { x:rightContainerX} = browser.$navigation.get(0).querySelector('.igv-navbar-right-container').getBoundingClientRect();
-
-    const delta = rightContainerX - leftContainerExtent;
-
-    const currentClass = NavbarButton.currentNavbarButtonClass(browser);
-
-    // console.log(`Current class ${ currentClass } Delta: ${ StringUtils.numberFormatter(Math.floor(delta))}`)
-
-    if ('igv-navbar-text-button' === currentClass && delta < responsiveThreshold) {
-        navbarResponsiveClasses.navbarButton = 'igv-navbar-icon-button';
-    } else if (textButtonContainerWidth && 'igv-navbar-icon-button' === currentClass) {
-        const length = navbarWidth - leftContainerExtent;
-        if (length - textButtonContainerWidth > responsiveThreshold) {
-            navbarResponsiveClasses.navbarButton = 'igv-navbar-text-button';
-        }
-
-    }
-
-
-    if (isWGV) {
-        navbarResponsiveClasses.zoomContainer = 'igv-zoom-widget-hidden';
-    } else {
-        navbarResponsiveClasses.zoomContainer = navbarWidth > 860 ? 'igv-zoom-widget' : 'igv-zoom-widget-900';
-    }
-
-    return navbarResponsiveClasses
-}
-
 /*
  * The MIT License (MIT)
  *
@@ -70841,7 +71068,7 @@ class ChromosomeSelectWidget {
         });
 
         this.showAllChromosomes = browser.config.showAllChromosomes !== false;   // i.e. default to true
-
+        this.genome = browser.genome;
     }
 
     show() {
@@ -70852,10 +71079,16 @@ class ChromosomeSelectWidget {
         this.container.style.display = 'none';
     }
 
+    setValue(chrName) {
+        this.select.value = this.genome.getChromosomeDisplayName(chrName);
+    }
+
     update(genome) {
 
+        this.genome = genome;
+
         // Start with explicit chromosome name list
-        const list = genome.wgChromosomeNames || [];
+        const list = genome.wgChromosomeNames.map(nm => genome.getChromosomeDisplayName(nm)) || [];
 
         if (this.showAllChromosomes && genome.chromosomeNames.length > 1) {
             const exclude = new Set(list);
@@ -70866,6 +71099,7 @@ class ChromosomeSelectWidget {
                     break
                 }
                 if (!exclude.has(nm)) {
+                    nm = genome.getChromosomeDisplayName(nm);
                     list.push(nm);
                 }
             }
@@ -70946,6 +71180,99 @@ class WindowSizePanel {
     }
 }
 
+const multiSelectImage =
+    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>multi select</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="multi-select">
+            <rect id="backdrop-copy-3" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <g id="row-copy-3" transform="translate(81, 427)" fill="#737373">
+                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke="#737373" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
+            </g>
+            <g id="row-copy-2" transform="translate(82, 277)">
+                <rect id="Rectangle" fill-opacity="0.33" fill="#CFCECE" x="133" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke-opacity="0.32659528" stroke="#CFCECE" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
+            </g>
+            <g id="row-copy" transform="translate(81, 119)" fill="#737373">
+                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-17" stroke="#737373" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
+const multiSelectImageHover =
+    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>multi select hover</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="multi-select-hover">
+            <rect id="backdrop-copy-4" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <g id="row-copy-3" transform="translate(81, 427)" fill="#FFFFFF">
+                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke="#FFFFFF" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
+            </g>
+            <g id="row-copy-2" transform="translate(82, 277)">
+                <rect id="Rectangle" fill-opacity="0.33" fill="#CFCECE" x="133" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke-opacity="0.33" stroke="#CFCECE" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
+            </g>
+            <g id="row-copy" transform="translate(81, 119)" fill="#FFFFFF">
+                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-17" stroke="#FFFFFF" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
+class MultiTrackSelectButton extends NavbarButton {
+
+    constructor(parent, browser, navbar, enableMultiTrackSelection) {
+
+        super(parent, browser, 'Select Tracks', buttonLabel, multiSelectImage, multiSelectImageHover, false);
+
+        this.navbar = navbar;
+        this.enableMultiTrackSelection = false;  // Initial state
+        this.button.addEventListener('mouseenter', event => {
+            if (false === enableMultiTrackSelection) {
+                this.setState(true);
+            }
+        });
+
+        this.button.addEventListener('mouseleave', event => {
+            if (false === enableMultiTrackSelection) {
+                this.setState(false);
+            }
+        });
+
+        const mouseClickHandler = () => {
+            // Toggle the selection state
+            this.setMultiTrackSelection(!this.enableMultiTrackSelection);
+        };
+
+        this.boundMouseClickHandler = mouseClickHandler.bind(this);
+
+        this.button.addEventListener('click', this.boundMouseClickHandler);
+
+    }
+
+    setMultiTrackSelection(enableMultiTrackSelection) {
+
+        this.enableMultiTrackSelection = enableMultiTrackSelection;
+        this.setState(this.enableMultiTrackSelection);
+
+        // If enableMultiTrackSelection is false hide the Overly button
+        if (false === this.enableMultiTrackSelection) {
+            this.navbar.overlayTrackButton.setVisibility(false);
+        }
+
+        for (const trackView of this.browser.trackViews) {
+            trackView.enableTrackSelection(enableMultiTrackSelection);
+        }
+
+    }
+
+}
+
 class CursorGuide {
 
     constructor(columnContainer, browser) {
@@ -71127,9 +71454,9 @@ const cursorImageHover =
 
 class CursorGuideButton extends NavbarButton {
 
-    constructor(browser, parent) {
+    constructor(parent, browser) {
 
-        super(browser, parent, 'Crosshairs', buttonLabel, cursorImage, cursorImageHover, browser.doShowCursorGuide);
+        super(parent, browser, 'Crosshairs', buttonLabel, cursorImage, cursorImageHover, browser.doShowCursorGuide);
 
         this.button.addEventListener('mouseenter', () => {
             if (false === browser.doShowCursorGuide) {
@@ -71215,9 +71542,9 @@ const centerlineImageHover =
 
 class CenterLineButton extends NavbarButton {
 
-    constructor(browser, parent) {
+    constructor(parent, browser) {
 
-        super(browser, parent, 'Center Line', buttonLabel, centerlineImage, centerlineImageHover, browser.config.showCenterGuide);
+        super(parent, browser, 'Center Line', buttonLabel, centerlineImage, centerlineImageHover, browser.config.showCenterGuide);
 
         this.button.addEventListener('mouseenter', () => {
             if (false === browser.doShowCenterLine) {
@@ -71306,7 +71633,7 @@ class TrackLabelControl extends NavbarButton {
 
     constructor(parent, browser) {
 
-        super(browser, parent, 'Track Labels', buttonLabel, trackLabelsImage, trackLabelsImageHover, browser.config.showTrackLabels);
+        super(parent, browser, 'Track Labels', buttonLabel, trackLabelsImage, trackLabelsImageHover, browser.config.showTrackLabels);
 
         this.button.addEventListener('mouseenter', () => {
             if (false === browser.doShowTrackLabels) {
@@ -71336,28 +71663,28 @@ class TrackLabelControl extends NavbarButton {
 
 }
 
-const sampleNameImage =
+const roiImage =
     `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>sample names</title>
+    <title>roi</title>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="sample-names" stroke="#737373">
-            <rect id="Rectangle-Copy-13" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <line x1="80" y1="465" x2="541" y2="464.5" id="Line-3-Copy-3" stroke-width="32"></line>
-            <line x1="80" y1="312.5" x2="542" y2="313" id="Line-3" stroke-width="32"></line>
-            <line x1="80" y1="158" x2="541" y2="158" id="Line-3-Copy" stroke-width="32"></line>
+        <g id="roi">
+            <rect id="Rectangle-Copy-23" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <text id="ROI" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="258" font-weight="bold" fill="#737373">
+                <tspan x="81.445" y="389">ROI</tspan>
+            </text>
         </g>
     </g>
 </svg>`;
 
-const sampleNameImageHover =
+const roiImageHover =
     `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>sample names hover</title>
+    <title>roi hover</title>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="sample-names-hover">
-            <rect id="Rectangle-Copy-18" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <line x1="80" y1="465" x2="541" y2="464.5" id="Line-3-Copy-3" stroke="#FFFFFF" stroke-width="32" fill="#FFFFFF"></line>
-            <line x1="80" y1="312.5" x2="542" y2="313" id="Line-3" stroke="#FFFFFF" stroke-width="32" fill="#FFFFFF"></line>
-            <line x1="80" y1="158" x2="541" y2="158" id="Line-3-Copy" stroke="#FFFFFF" stroke-width="32" fill="#FFFFFF"></line>
+        <g id="roi-hover">
+            <rect id="Rectangle-Copy-24" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <text id="ROI" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="258" font-weight="bold" fill="#FFFFFF">
+                <tspan x="81.445" y="389">ROI</tspan>
+            </text>
         </g>
     </g>
 </svg>`;
@@ -71388,49 +71715,34 @@ const sampleNameImageHover =
  * THE SOFTWARE.
  */
 
-class SampleNameControl extends NavbarButton {
+class ROITableControl extends NavbarButton {
 
-    constructor(parent, browser) {
+    constructor(parent, browser)  {
 
-        super(browser, parent, 'Sample Names', sampleNameButtonLabel, sampleNameImage, sampleNameImageHover, browser.config.showSampleNames);
+        super(parent, browser, ['ROI', 'Regions of Interest Table'], buttonLabel, roiImage, roiImageHover, false);
 
         this.button.addEventListener('mouseenter', () => {
-            if (false === browser.showSampleNames) {
+            if (false === browser.doShowROITable) {
                 this.setState(true);
             }
         });
 
         this.button.addEventListener('mouseleave', () => {
-            if (false === browser.showSampleNames) {
+            if (false === browser.doShowROITable) {
                 this.setState(false);
             }
         });
 
-        this.button.addEventListener('click', () => {
-            this.performClickWithState(browser, undefined);
-        });
+        this.button.addEventListener('click', () => this.buttonHandler(!browser.doShowROITable));
 
-        if (true === browser.config.showSampleNameButton) {
-            this.show();
-        } else {
-            this.hide();
-        }
+        this.setVisibility(false);  // Hide initially, it will be un-hidden if ROIs are loaded
 
     }
 
-    performClickWithState(browser, doShowSampleNamesOrUndefined) {
-
-        browser.showSampleNames = undefined === doShowSampleNamesOrUndefined ? !browser.showSampleNames : doShowSampleNamesOrUndefined;
-
-        const column = browser.columnContainer.querySelector('.igv-sample-name-column');
-        column.style.display = false === browser.showSampleNames ? 'none' : 'flex';
-
-        this.setState(browser.showSampleNames);
-
-        browser.layoutChange();
-
+    buttonHandler(status) {
+        this.setState(status);
+        this.browser.setROITableVisibility(status);
     }
-
 }
 
 const sampleInfoImage =
@@ -71534,7 +71846,7 @@ class SampleInfoControl extends NavbarButton {
 
     constructor(parent, browser) {
 
-        super(browser, parent, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false);
+        super(parent, browser, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false);
 
         this.showSampleInfo = false;
 
@@ -71584,141 +71896,102 @@ class SampleInfoControl extends NavbarButton {
 
 }
 
-const sliderMin = 0;
-let sliderMax = 23;
-let sliderValueRaw = 0;
-
-const ZoomWidget = function (browser, parent) {
-
-    this.browser = browser;
-
-    this.zoomContainer = div({class: 'igv-zoom-widget'});
-    parent.appendChild(this.zoomContainer);
-
-    // zoom out
-    this.zoomOutButton = div();
-    this.zoomContainer.appendChild(this.zoomOutButton);
-    this.zoomOutButton.appendChild(createIcon('minus-circle'));
-    this.zoomOutButton.addEventListener('click', () => {
-        // browser.zoomWithScaleFactor(2.0)
-        browser.zoomOut();
-    });
-
-    // Range slider
-    const el = div();
-    this.zoomContainer.appendChild(el);
-    this.slider = document.createElement('input');
-    this.slider.type = 'range';
-
-    this.slider.min = `${sliderMin}`;
-    this.slider.max = `${sliderMax}`;
-
-    el.appendChild(this.slider);
-
-    this.slider.addEventListener('change', e => {
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const referenceFrame = browser.referenceFrameList[0];
-        const {bpLength} = referenceFrame.genome.getChromosome(referenceFrame.chr);
-        const {end, start} = referenceFrame;
+const sampleNameImage =
+    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>sample names</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="sample-names" stroke="#737373">
+            <rect id="Rectangle-Copy-13" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <line x1="80" y1="465" x2="541" y2="464.5" id="Line-3-Copy-3" stroke-width="32"></line>
+            <line x1="80" y1="312.5" x2="542" y2="313" id="Line-3" stroke-width="32"></line>
+            <line x1="80" y1="158" x2="541" y2="158" id="Line-3-Copy" stroke-width="32"></line>
+        </g>
+    </g>
+</svg>`;
 
-        const extent = end - start;
+const sampleNameImageHover =
+    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>sample names hover</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="sample-names-hover">
+            <rect id="Rectangle-Copy-18" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <line x1="80" y1="465" x2="541" y2="464.5" id="Line-3-Copy-3" stroke="#FFFFFF" stroke-width="32" fill="#FFFFFF"></line>
+            <line x1="80" y1="312.5" x2="542" y2="313" id="Line-3" stroke="#FFFFFF" stroke-width="32" fill="#FFFFFF"></line>
+            <line x1="80" y1="158" x2="541" y2="158" id="Line-3-Copy" stroke="#FFFFFF" stroke-width="32" fill="#FFFFFF"></line>
+        </g>
+    </g>
+</svg>`;
 
-        // bpLength/(end - start)
-        const scaleFactor = Math.pow(2, e.target.valueAsNumber);
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016 University of California San Diego
+ * Author: Jim Robinson
+ *
+ * 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.
+ */
 
-        // (end - start) = bpLength/scaleFactor
-        const zoomedExtent = bpLength / scaleFactor;
+class SampleNameControl extends NavbarButton {
 
-        // console.log(`zoom-widget - slider ${ e.target.value } scaleFactor ${ scaleFactor } extent-zoomed ${ StringUtils.numberFormatter(Math.round(zoomedExtent)) }`)
+    constructor(parent, browser) {
 
-        browser.zoomWithScaleFactor(zoomedExtent / extent);
+        super(parent, browser, 'Sample Names', sampleNameButtonLabel, sampleNameImage, sampleNameImageHover, browser.config.showSampleNames);
 
-    });
+        this.button.addEventListener('mouseenter', () => {
+            if (false === browser.showSampleNames) {
+                this.setState(true);
+            }
+        });
 
-    // zoom in
-    this.zoomInButton = div();
-    this.zoomContainer.appendChild(this.zoomInButton);
-    this.zoomInButton.appendChild(createIcon('plus-circle'));
-    this.zoomInButton.addEventListener('click', () => {
-        // browser.zoomWithScaleFactor(0.5)
-        browser.zoomIn();
-    });
+        this.button.addEventListener('mouseleave', () => {
+            if (false === browser.showSampleNames) {
+                this.setState(false);
+            }
+        });
 
-    browser.on('locuschange', (referenceFrameList) => {
+        this.button.addEventListener('click', () => {
+            this.performClickWithState(browser, undefined);
+        });
 
-        if (this.browser.isMultiLocusMode()) {
-            this.disable();
+        if (true === browser.config.showSampleNameButton) {
+            this.show();
         } else {
-            this.enable();
-            this.update(referenceFrameList);
+            this.hide();
         }
 
-    });
-
-};
-
-ZoomWidget.prototype.update = function (referenceFrameList) {
-
-    const referenceFrame = referenceFrameList[0];
-    const {bpLength} = referenceFrame.genome.getChromosome(referenceFrame.chr);
-    const {start, end} = referenceFrame;
-
-    sliderMax = Math.ceil(Math.log2(bpLength / this.browser.minimumBases()));
-
-    this.slider.max = `${sliderMax}`;
-
-    const scaleFactor = bpLength / (end - start);
-    sliderValueRaw = Math.log2(scaleFactor);
-    this.slider.value = `${Math.round(sliderValueRaw)}`;
-
-    // referenceFrame.description('zoom.update')
-
-    // console.log(`${ Date.now() } update - slider ${ this.slider.value } scaleFactor ${ Math.round(scaleFactor) } extent ${ StringUtils.numberFormatter(Math.round(extent)) }`)
-
-    // console.log(`update - sliderMin ${ sliderMin } sliderValue ${ this.slider.value } sliderMax ${ sliderMax } scaleFactor ${ scaleFactor.toFixed(3) } derived-scaleFactor ${ derivedScalefactor.toFixed(3) }`)
-
-};
-
-ZoomWidget.prototype.enable = function () {
-
-    // this.zoomInButton.style.color = appleCrayonPalette[ 'steel' ];
-    // this.zoomInButton.style.pointerEvents = 'auto';
-    //
-    // this.zoomOutButton.style.color = appleCrayonPalette[ 'steel' ];
-    // this.zoomOutButton.style.pointerEvents = 'auto';
-
-    this.slider.disabled = false;
-};
+    }
 
-ZoomWidget.prototype.disable = function () {
+    performClickWithState(browser, doShowSampleNamesOrUndefined) {
 
-    // this.zoomInButton.style.color = appleCrayonPalette[ 'silver' ];
-    // this.zoomInButton.style.pointerEvents = 'none';
-    //
-    // this.zoomOutButton.style.color = appleCrayonPalette[ 'silver' ];
-    // this.zoomOutButton.style.pointerEvents = 'none';
+        browser.showSampleNames = undefined === doShowSampleNamesOrUndefined ? !browser.showSampleNames : doShowSampleNamesOrUndefined;
 
-    this.slider.disabled = true;
-};
+        const column = browser.columnContainer.querySelector('.igv-sample-name-column');
+        column.style.display = false === browser.showSampleNames ? 'none' : 'flex';
 
-ZoomWidget.prototype.hide = function () {
-    this.zoomContainer.style.display = 'none';
-};
+        this.setState(browser.showSampleNames);
 
-ZoomWidget.prototype.show = function () {
-    this.zoomContainer.style.display = 'block';
-};
+        browser.layoutChange();
 
-ZoomWidget.prototype.hideSlider = function () {
-    this.slider.style.display = 'none';
-};
+    }
 
-ZoomWidget.prototype.showSlider = function () {
-    this.slider.style.display = 'block';
-};
+}
 
 class Dropdown {
     constructor(parent, shim) {
@@ -71861,7 +72134,7 @@ const imageSaveImageHoverSVG =
 class SaveImageControl extends NavbarButton {
     constructor(parent, browser) {
 
-        super(browser, parent, 'Save Image', buttonLabel, imageSaveImageSVG, imageSaveImageHoverSVG, false);
+        super(parent, browser, 'Save Image', buttonLabel, imageSaveImageSVG, imageSaveImageHoverSVG, false);
 
         this.button.addEventListener('mouseenter', () => this.setState(true));
 
@@ -71927,6 +72200,422 @@ class SaveImageControl extends NavbarButton {
 
 }
 
+/**
+ * User supplied button for the navbar
+ */
+
+const CustomButton = function (parent, browser, b) {
+
+    const button = div({class: 'igv-navbar-button'});
+    parent.append(button);
+    button.textContent = b.label;
+    button.addEventListener('click', () => b.callback(browser));
+};
+
+const sliderMin = 0;
+let sliderMax = 23;
+let sliderValueRaw = 0;
+
+class ZoomWidget {
+    constructor(config, browser, parent) {
+
+        this.browser = browser;
+
+        this.zoomContainer = div({class: 'igv-zoom-widget'});
+        parent.appendChild(this.zoomContainer);
+
+        // zoom out
+        this.zoomOutButton = div();
+        this.zoomContainer.appendChild(this.zoomOutButton);
+        this.zoomOutButton.appendChild(createIcon('minus-circle'));
+        this.zoomOutButton.addEventListener('click', () => {
+            // browser.zoomWithScaleFactor(2.0)
+            browser.zoomOut();
+        });
+
+        // Range slider
+        const el = div();
+        this.zoomContainer.appendChild(el);
+        this.slider = document.createElement('input');
+        this.slider.type = 'range';
+
+        this.slider.min = `${sliderMin}`;
+        this.slider.max = `${sliderMax}`;
+
+        el.appendChild(this.slider);
+
+        this.slider.addEventListener('change', e => {
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            const referenceFrame = browser.referenceFrameList[0];
+            const {bpLength} = referenceFrame.genome.getChromosome(referenceFrame.chr);
+            const {end, start} = referenceFrame;
+
+            const extent = end - start;
+
+            // bpLength/(end - start)
+            const scaleFactor = Math.pow(2, e.target.valueAsNumber);
+
+            // (end - start) = bpLength/scaleFactor
+            const zoomedExtent = bpLength / scaleFactor;
+
+            // console.log(`zoom-widget - slider ${ e.target.value } scaleFactor ${ scaleFactor } extent-zoomed ${ StringUtils.numberFormatter(Math.round(zoomedExtent)) }`)
+
+            browser.zoomWithScaleFactor(zoomedExtent / extent);
+
+        });
+
+        // zoom in
+        this.zoomInButton = div();
+        this.zoomContainer.appendChild(this.zoomInButton);
+        this.zoomInButton.appendChild(createIcon('plus-circle'));
+        this.zoomInButton.addEventListener('click', () => {
+            // browser.zoomWithScaleFactor(0.5)
+            browser.zoomIn();
+        });
+
+        browser.on('locuschange', (referenceFrameList) => {
+
+            if (this.browser.isMultiLocusMode()) {
+                this.disable();
+            } else {
+                this.enable();
+                this.update(referenceFrameList);
+            }
+
+        });
+
+    }
+
+    update(referenceFrameList) {
+
+        if (this.slider) {
+            const referenceFrame = referenceFrameList[0];
+            const {bpLength} = referenceFrame.genome.getChromosome(referenceFrame.chr);
+            const {start, end} = referenceFrame;
+
+            sliderMax = Math.ceil(Math.log2(bpLength / this.browser.minimumBases()));
+            this.slider.max = `${sliderMax}`;
+
+            const scaleFactor = bpLength / (end - start);
+            sliderValueRaw = Math.log2(scaleFactor);
+            this.slider.value = `${Math.round(sliderValueRaw)}`;
+        }
+    }
+
+
+    enable() {
+
+        // this.zoomInButton.style.color = appleCrayonPalette[ 'steel' ];
+        // this.zoomInButton.style.pointerEvents = 'auto';
+        //
+        // this.zoomOutButton.style.color = appleCrayonPalette[ 'steel' ];
+        // this.zoomOutButton.style.pointerEvents = 'auto';
+
+        if (this.slider) this.slider.disabled = false;
+    }
+
+    disable() {
+
+        // this.zoomInButton.style.color = appleCrayonPalette[ 'silver' ];
+        // this.zoomInButton.style.pointerEvents = 'none';
+        //
+        // this.zoomOutButton.style.color = appleCrayonPalette[ 'silver' ];
+        // this.zoomOutButton.style.pointerEvents = 'none';
+
+        if (this.slider) this.slider.disabled = true;
+    }
+
+    hide() {
+        this.zoomContainer.style.display = 'none';
+    }
+
+    show() {
+        this.zoomContainer.style.display = 'block';
+    }
+
+    hideSlider() {
+        if (this.slider) this.slider.style.display = 'none';
+    }
+
+    showSlider() {
+        if (this.slider) this.slider.style.display = 'block';
+    }
+}
+
+/*
+ * 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 ResponsiveNavbar {
+    constructor(config, browser) {
+
+        this.browser = browser;
+        this.config = config;
+
+        this.currentClass = 'igv-navbar-text-button';
+
+        // DOM element for
+        const $navBar = $$1('<div>', {class: 'igv-navbar'});
+        this.$navigation = $navBar;
+
+        const $navbarLeftContainer = $$1('<div>', {class: 'igv-navbar-left-container'});
+        $navBar.append($navbarLeftContainer);
+        this.navbarLeftContainer = $navbarLeftContainer.get(0);
+
+        // IGV logo
+        const $logo = $$1('<div>', {class: 'igv-logo'});
+        $navbarLeftContainer.append($logo);
+
+        const logoSvg = logo();
+        logoSvg.css("width", "34px");
+        logoSvg.css("height", "32px");
+        $logo.append(logoSvg);
+
+        this.$current_genome = $$1('<div>', {class: 'igv-current-genome'});
+        $navbarLeftContainer.append(this.$current_genome);
+        this.$current_genome.text('');
+
+        const $genomicLocation = $$1('<div>', {class: 'igv-navbar-genomic-location'});
+        $navbarLeftContainer.append($genomicLocation);
+
+        // chromosome select widget
+        this.chromosomeSelectWidget = new ChromosomeSelectWidget(browser, $genomicLocation.get(0));
+        if (config.showChromosomeWidget !== false) {
+            this.chromosomeSelectWidget.show();
+        } else {
+            this.chromosomeSelectWidget.hide();
+        }
+
+        const $locusSizeGroup = $$1('<div>', {class: 'igv-locus-size-group'});
+        $genomicLocation.append($locusSizeGroup);
+
+        const $searchContainer = $$1('<div>', {class: 'igv-search-container'});
+        $locusSizeGroup.append($searchContainer);
+
+        // browser.$searchInput = $('<input type="text" placeholder="Locus Search">');
+        this.$searchInput = $$1('<input>', {class: 'igv-search-input', type: 'text', placeholder: 'Locus Search'});
+        $searchContainer.append(this.$searchInput);
+        // Stop event propagation to prevent feature track keyboard navigation
+        this.$searchInput[0].addEventListener('keyup', (event) => {
+            event.stopImmediatePropagation();
+        });
+
+        this.$searchInput.change(() => browser.doSearch(this.$searchInput.val()));
+
+        const searchIconContainer = div({class: 'igv-search-icon-container'});
+        $searchContainer.append($$1(searchIconContainer));
+        searchIconContainer.appendChild(createIcon("search"));
+        searchIconContainer.addEventListener('click', () => browser.doSearch(this.$searchInput.val()));
+
+        this.windowSizePanel = new WindowSizePanel($locusSizeGroup.get(0), browser);
+
+        const $navbarRightContainer = $$1('<div>', {class: 'igv-navbar-right-container'});
+        $navBar.append($navbarRightContainer);
+        this.navbarRightContainer = $navbarRightContainer.get(0);
+
+        const $toggle_button_container = $$1('<div class="igv-navbar-toggle-button-container">');
+        $navbarRightContainer.append($toggle_button_container);
+        const toggleButtonContainer = $toggle_button_container.get(0);
+        this.toggle_button_container = toggleButtonContainer;  // TODO -- for circular view , refactor this
+
+        this.overlayTrackButton = new OverlayTrackButton(toggleButtonContainer, browser);
+        this.overlayTrackButton.setVisibility(false);
+
+        const showMultiSelect = config.showMultiSelectButton !== false;
+        this.multiTrackSelectButton = new MultiTrackSelectButton(toggleButtonContainer, browser, this, showMultiSelect);
+
+        this.cursorGuideButton = new CursorGuideButton(toggleButtonContainer, browser);
+
+        this.centerLineButton = new CenterLineButton(toggleButtonContainer, browser);
+
+        this.trackLabelControl = new TrackLabelControl(toggleButtonContainer, browser);
+
+        // ROI Control
+        this.roiTableControl = new ROITableControl(toggleButtonContainer, browser);
+
+        this.sampleInfoControl = new SampleInfoControl(toggleButtonContainer, browser);
+
+        this.sampleNameControl = new SampleNameControl(toggleButtonContainer, browser);
+
+        if (true === config.showSVGButton) {
+            this.saveImageControl = new SaveImageControl(toggleButtonContainer, browser);
+        }
+
+        if (config.customButtons) {
+            for (let b of config.customButtons) {
+                new CustomButton(toggleButtonContainer, browser, b);
+            }
+        }
+
+        this.zoomWidget = new ZoomWidget(config, browser, $navbarRightContainer.get(0));
+
+        if (false === config.showNavigation) {
+            this.$navigation.hide();
+        }
+
+
+
+    }
+
+    navbarDidResize() {
+
+
+        const navbarWidth = this.$navigation.width();
+        const currentClass = this.currentNavbarButtonClass();
+        if ('igv-navbar-text-button' === currentClass) {
+            this.textButtonContainerWidth = this.navbarRightContainer.getBoundingClientRect().width;
+        }
+        const browser = this.browser;
+        const isWGV =
+            (browser.isMultiLocusWholeGenomeView()) ||
+            (browser.referenceFrameList && GenomeUtils.isWholeGenomeView(browser.referenceFrameList[0].chr));
+
+        isWGV ? this.windowSizePanel.hide() : this.windowSizePanel.show();
+
+        const {
+            x: leftContainerX,
+            width: leftContainerWidth
+        } = this.navbarLeftContainer.getBoundingClientRect();
+        const leftContainerExtent = leftContainerX + leftContainerWidth;
+        const {x: rightContainerX} = this.navbarRightContainer.getBoundingClientRect();
+
+        const delta = rightContainerX - leftContainerExtent;
+
+        let navbarButtonClass;
+        const threshold = 8;
+        if ('igv-navbar-text-button' === currentClass && delta < threshold) {
+            navbarButtonClass = 'igv-navbar-icon-button';
+        } else if (this.textButtonContainerWidth && 'igv-navbar-icon-button' === currentClass) {
+            const length = navbarWidth - leftContainerExtent;
+            if (length - this.textButtonContainerWidth > threshold) {
+                navbarButtonClass = 'igv-navbar-text-button';
+            }
+        }
+        // Update all the buttons (buttons are listeners)
+        if(navbarButtonClass && currentClass !== navbarButtonClass) {
+            this.currentClass = navbarButtonClass;
+            this.browser.fireEvent('navbar-resize', [navbarButtonClass]);
+        }
+        
+        let zoomContainerClass;
+        if (isWGV) {
+            zoomContainerClass = 'igv-zoom-widget-hidden';
+        } else {
+            zoomContainerClass = navbarWidth > 860 ? 'igv-zoom-widget' : 'igv-zoom-widget-900';
+        }
+        $$1(this.zoomWidget.zoomContainer).removeClass();
+        $$1(this.zoomWidget.zoomContainer).addClass(zoomContainerClass);
+    }
+
+
+    setCenterLineButtonVisibility(isWholeGenomeView) {
+        if (isWholeGenomeView) {
+            this.centerLineButton.setVisibility(!isWholeGenomeView);
+        } else {
+            this.centerLineButton.setVisibility(this.config.showCenterGuideButton);
+        }
+    }
+
+    setCursorGuideVisibility(doShowCursorGuide) {
+        if (doShowCursorGuide) {
+            this.cursorGuide.show();
+        } else {
+            this.cursorGuide.hide();
+        }
+    }
+
+    updateGenome(genome) {
+
+        let genomeLabel = (genome.id && genome.id.length < 20 ? genome.id : `${genome.id.substring(0, 8)}...${genome.id.substring(genome.id.length - 8)}`);
+        this.$current_genome.text(genomeLabel);
+        this.$current_genome.attr('title', genome.description);
+
+        // chromosome select widget -- Show this IFF its not explicitly hidden AND the genome has pre-loaded chromosomes
+        const showChromosomeWidget =
+            this.config.showChromosomeWidget !== false &&
+            genome.showChromosomeWidget !== false &&
+            genome.chromosomeNames &&
+            genome.chromosomeNames.length > 1;
+
+        if (showChromosomeWidget) {
+            this.chromosomeSelectWidget.update(genome);
+            this.chromosomeSelectWidget.show();
+        } else {
+            this.chromosomeSelectWidget.hide();
+        }
+    }
+
+    updateLocus(loc, chrName) {
+        if(this.$searchInput) {
+            this.$searchInput.val(loc);
+        }
+        if (this.chromosomeSelectWidget) {
+            this.chromosomeSelectWidget.select.value = chrName;
+        }
+    }
+
+    currentNavbarButtonClass() {
+        return this.currentClass
+        //const el = this.$navigation.get(0).querySelector('.igv-navbar-text-button')
+        //return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
+    }
+
+    setEnableTrackSelection(b) {
+        this.multiTrackSelectButton.setMultiTrackSelection(b);
+    }
+    getEnableTrackSelection() {
+        return this.multiTrackSelectButton.enableMultiTrackSelection
+    }
+
+    hide() {
+        this.$navigation.hide();
+    }
+
+    show() {
+        this.$navigation.show();
+    }
+
+}
+
+
+function logo() {
+
+    return $$1(
+        '<svg width="690px" height="324px" viewBox="0 0 690 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+        '<title>IGV</title>' +
+        '<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">' +
+        '<g id="IGV" fill="#666666">' +
+        '<polygon id="Path" points="379.54574 8.00169252 455.581247 8.00169252 515.564813 188.87244 532.884012 253.529506 537.108207 253.529506 554.849825 188.87244 614.833392 8.00169252 689.60164 8.00169252 582.729511 320.722144 486.840288 320.722144"></polygon>' +
+        '<path d="M261.482414,323.793286 C207.975678,323.793286 168.339046,310.552102 142.571329,284.069337 C116.803612,257.586572 103.919946,217.158702 103.919946,162.784513 C103.919946,108.410325 117.437235,67.8415913 144.472217,41.0770945 C171.507199,14.3125977 212.903894,0.930550071 268.663545,0.930550071 C283.025879,0.930550071 298.232828,1.84616386 314.284849,3.6774189 C330.33687,5.50867394 344.839793,7.97378798 357.794056,11.072835 L357.794056,68.968378 C339.48912,65.869331 323.578145,63.5450806 310.060654,61.9955571 C296.543163,60.4460336 284.574731,59.6712835 274.154998,59.6712835 C255.850062,59.6712835 240.502308,61.4320792 228.111274,64.9537236 C215.720241,68.4753679 205.793482,74.2507779 198.330701,82.2801269 C190.867919,90.309476 185.587729,100.87425 182.48997,113.974767 C179.392212,127.075284 177.843356,143.345037 177.843356,162.784513 C177.843356,181.942258 179.251407,198.000716 182.067551,210.960367 C184.883695,223.920018 189.671068,234.41436 196.429813,242.443709 C203.188559,250.473058 212.059279,256.178037 223.042241,259.558815 C234.025202,262.939594 247.683295,264.629958 264.01693,264.629958 C268.241146,264.629958 273.098922,264.489094 278.590403,264.207362 C284.081883,263.925631 289.643684,263.50304 295.275972,262.939577 L295.275972,159.826347 L361.595831,159.826347 L361.595831,308.579859 C344.698967,313.087564 327.239137,316.750019 309.215815,319.567334 C291.192494,322.38465 275.281519,323.793286 261.482414,323.793286 L261.482414,323.793286 L261.482414,323.793286 Z" id="Path"></path>;' +
+        '<polygon id="Path" points="0.81355666 5.00169252 73.0472883 5.00169252 73.0472883 317.722144 0.81355666 317.722144"></polygon>' +
+        '</g> </g> </svg>'
+    )
+}
+
 const viewportColumnManager =
     {
         createColumns: (columnContainer, count) => {
@@ -72138,18 +72827,6 @@ CircularViewControl.prototype.hide = function () {
     this.button.style.display = 'none';
 };
 
-/**
- * User supplied button for the navbar
- */
-
-const CustomButton = function (parent, browser, b) {
-
-    const button = div({class: 'igv-navbar-button'});
-    parent.append(button);
-    button.textContent = b.label;
-    button.addEventListener('click', () => b.callback(browser));
-};
-
 const maxSequenceSize = 1000000;
 const maxBlatSize = 25000;
 
@@ -72914,88 +73591,6 @@ class TrackROISet {
     }
 }
 
-const roiImage =
-    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>roi</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="roi">
-            <rect id="Rectangle-Copy-23" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <text id="ROI" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="258" font-weight="bold" fill="#737373">
-                <tspan x="81.445" y="389">ROI</tspan>
-            </text>
-        </g>
-    </g>
-</svg>`;
-
-const roiImageHover =
-    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>roi hover</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="roi-hover">
-            <rect id="Rectangle-Copy-24" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <text id="ROI" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="258" font-weight="bold" fill="#FFFFFF">
-                <tspan x="81.445" y="389">ROI</tspan>
-            </text>
-        </g>
-    </g>
-</svg>`;
-
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2016 University of California San Diego
- * Author: Jim Robinson
- *
- * 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 ROITableControl extends NavbarButton {
-
-    constructor(parent, browser)  {
-
-        super(browser, parent, [ 'ROI', 'Regions of Interest Table' ], buttonLabel, roiImage, roiImageHover, false);
-
-        this.button.addEventListener('mouseenter', () => {
-            if (false === browser.doShowROITable) {
-                this.setState(true);
-            }
-        });
-
-        this.button.addEventListener('mouseleave', () => {
-            if (false === browser.doShowROITable) {
-                this.setState(false);
-            }
-        });
-
-        this.button.addEventListener('click', () => this.buttonHandler(!browser.doShowROITable));
-
-        this.setVisibility(false);  // Hide initially, it will be un-hidden if ROIs are loaded
-
-    }
-
-    buttonHandler(status) {
-        this.setState(status);
-        this.browser.setROITableVisibility(status);
-    }
-}
-
 async function translateSession(juiceboxSession) {
 
     const jbBrowser = juiceboxSession.browsers[0];
@@ -73032,101 +73627,6 @@ async function translateSession(juiceboxSession) {
 
 }
 
-const multiSelectImage =
-    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>multi select</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="multi-select">
-            <rect id="backdrop-copy-3" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="row-copy-3" transform="translate(81, 427)" fill="#737373">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" stroke="#737373" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
-            </g>
-            <g id="row-copy-2" transform="translate(82, 277)">
-                <rect id="Rectangle" fill-opacity="0.33" fill="#CFCECE" x="133" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" stroke-opacity="0.32659528" stroke="#CFCECE" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
-            </g>
-            <g id="row-copy" transform="translate(81, 119)" fill="#737373">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-17" stroke="#737373" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
-            </g>
-        </g>
-    </g>
-</svg>`;
-
-const multiSelectImageHover =
-    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>multi select hover</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="multi-select-hover">
-            <rect id="backdrop-copy-4" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="row-copy-3" transform="translate(81, 427)" fill="#FFFFFF">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" stroke="#FFFFFF" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
-            </g>
-            <g id="row-copy-2" transform="translate(82, 277)">
-                <rect id="Rectangle" fill-opacity="0.33" fill="#CFCECE" x="133" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" stroke-opacity="0.33" stroke="#CFCECE" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
-            </g>
-            <g id="row-copy" transform="translate(81, 119)" fill="#FFFFFF">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-17" stroke="#FFFFFF" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
-            </g>
-        </g>
-    </g>
-</svg>`;
-
-class MultiTrackSelectButton extends NavbarButton {
-
-    constructor(browser, parent, enableMultiTrackSelection) {
-
-        super(browser, parent, 'Select Tracks', buttonLabel, multiSelectImage, multiSelectImageHover, enableMultiTrackSelection = false);
-        this.enableMultiTrackSelection = enableMultiTrackSelection;
-        this.button.addEventListener('mouseenter', event => {
-            if (false === enableMultiTrackSelection) {
-                this.setState(true);
-            }
-        });
-
-        this.button.addEventListener('mouseleave', event => {
-            if (false === enableMultiTrackSelection) {
-                this.setState(false);
-            }
-        });
-
-        const mouseClickHandler = () => {
-            this.setMultiTrackSelection(!this.enableMultiTrackSelection);
-        };
-
-        this.boundMouseClickHandler = mouseClickHandler.bind(this);
-
-        this.button.addEventListener('click', this.boundMouseClickHandler);
-
-        this.setVisibility(true);
-
-    }
-
-    setMultiTrackSelection(enableMultiTrackSelection) {
-        this.enableMultiTrackSelection = enableMultiTrackSelection;
-        for (const trackView of this.browser.trackViews) {
-            if (false === multiTrackSelectExclusionTypes.has(trackView.track.type)) {
-                trackView.setTrackSelectionState(trackView.axis, this.enableMultiTrackSelection);
-
-                // If closing the selection boxes set track selected property to false
-                if (!this.enableMultiTrackSelection) {
-                    trackView.track.selected = false;
-                }
-            }
-        }
-        this.setState(this.enableMultiTrackSelection);
-
-        // If enableMultiTrackSelection is false hide Overlay button
-        if (false === this.enableMultiTrackSelection) {
-            this.browser.overlayTrackButton.setVisibility(false);
-        }
-    }
-}
-
 /**
  * Chromosome alias source backed by a UCSC bigbed file
  *
@@ -73146,6 +73646,13 @@ class ChromAliasBB {
         this.reader = new BWReader(config, genome);
     }
 
+    async preload(chrNames) {
+        await this.reader.preload();
+        for(let nm of chrNames) {
+            await this.search(nm);
+        }
+    }
+
     /**
      * Return the cached canonical chromosome name for the alias.  If none found return the alias.
      *
@@ -73221,6 +73728,10 @@ class ChromAliasFile {
         this.genome = genome;
     }
 
+    async preload() {
+        return this.loadAliases();
+    }
+
     /**
      * Return the canonical chromosome name for the alias.  If none found return the alias
      *
@@ -73273,6 +73784,9 @@ class ChromAliasFile {
                     aliasRecord[key] = tokens[i];
                     this.aliasRecordCache.set(tokens[i], aliasRecord);
                 }
+
+                this.aliasRecordCache.set(chr.toLowerCase(), aliasRecord);
+                this.aliasRecordCache.set(chr.toUpperCase(), aliasRecord);
             }
         }
     }
@@ -73444,6 +73958,9 @@ class ChromAliasDefaults {
         this.update(id, chromosomeNames);
     }
 
+    async preload() {
+        // no-op
+    }
 
     /**
      * Return the canonical chromosome name for the alias.  If none found return the alias
@@ -73545,6 +74062,8 @@ class ChromAliasDefaults {
                     } else if (Number.isInteger(Number(name))) {
                         record["ucsc"] = "chr" + name;
                     }
+
+
                 }
             }
 
@@ -73552,7 +74071,10 @@ class ChromAliasDefaults {
                 for (let a of Object.values(rec)) {
                     this.aliasRecordCache.set(a, rec);
                 }
+                this.aliasRecordCache.set(rec.chr.toLowerCase(), rec);
+                this.aliasRecordCache.set(rec.chr.toUpperCase(), rec);
             }
+
         }
     }
 
@@ -73620,7 +74142,7 @@ class Genome {
 
         if (config.chromAliasBbURL) {
             this.chromAlias = new ChromAliasBB(config.chromAliasBbURL, Object.assign({}, config), this);
-            if(!this.chromosomeNames) {
+            if (!this.chromosomeNames) {
                 this.chromosomeNames = await this.chromAlias.getChromosomeNames();
             }
         } else if (config.aliasURL) {
@@ -73631,17 +74153,17 @@ class Genome {
 
         if (config.cytobandBbURL) {
             this.cytobandSource = new CytobandFileBB(config.cytobandBbURL, Object.assign({}, config), this);
-            if(!this.chromosomeNames) {
+            if (!this.chromosomeNames) {
                 this.chromosomeNames = await this.cytobandSource.getChromosomeNames();
             }
         } else if (config.cytobandURL) {
             this.cytobandSource = new CytobandFile(config.cytobandURL, Object.assign({}, config));
-            if(!this.chromosomeNames) {
+            if (!this.chromosomeNames) {
                 this.chromosomeNames = await this.cytobandSource.getChromosomeNames();
             }
-            if(this.chromosomes.size === 0) {
+            if (this.chromosomes.size === 0) {
                 const c = await this.cytobandSource.getChromosomes();
-                for(let chromosome of c) {
+                for (let chromosome of c) {
                     this.chromosomes.set(c.name, c);
                 }
             }
@@ -73659,6 +74181,7 @@ class Genome {
             } else {
                 this.#wgChromosomeNames = trimSmallChromosomes(this.chromosomes);
             }
+            await this.chromAlias.preload(this.#wgChromosomeNames);
         }
 
         // Optionally create the psuedo chromosome "all" to support whole genome view
@@ -73725,15 +74248,15 @@ class Genome {
     async loadChromosome(chr) {
 
         if (this.chromAlias) {
-           const chromAliasRecord = await this.chromAlias.search(chr);
-            if(chromAliasRecord) {
+            const chromAliasRecord = await this.chromAlias.search(chr);
+            if (chromAliasRecord) {
                 chr = chromAliasRecord.chr;
             }
         }
 
         if (!this.chromosomes.has(chr)) {
             let chromosome;
-            const  sequenceRecord = await this.sequence.getSequenceRecord(chr);
+            const sequenceRecord = await this.sequence.getSequenceRecord(chr);
             if (sequenceRecord) {
                 chromosome = new Chromosome(chr, 0, sequenceRecord.bpLength);
             }
@@ -73743,6 +74266,7 @@ class Genome {
 
         return this.chromosomes.get(chr)
     }
+
     async getAliasRecord(chr) {
         if (this.chromAlias) {
             return this.chromAlias.search(chr)
@@ -73762,7 +74286,7 @@ class Genome {
     }
 
     get wgChromosomeNames() {
-        return this.#wgChromosomeNames ?  this.#wgChromosomeNames.slice() : undefined
+        return this.#wgChromosomeNames ? this.#wgChromosomeNames.slice() : undefined
     }
 
     get showChromosomeWidget() {
@@ -73866,7 +74390,7 @@ class Genome {
      * @param end
      */
     getSequenceInterval(chr, start, end) {
-        if(typeof this.sequence.getSequenceInterval === 'function') {
+        if (typeof this.sequence.getSequenceInterval === 'function') {
             return this.sequence.getSequenceInterval(chr, start, end)
         } else {
             return undefined
@@ -74035,6 +74559,125 @@ brewer.push("rgb(188, 128, 189)");
 brewer.push("rgb(204, 235, 197)");
 brewer.push("rgb(255, 237, 111)");
 
+class SliderDialog {
+
+    constructor(parent) {
+
+        this.parent = parent;
+
+        // dialog container
+        this.container = div({class: 'igv-ui-generic-dialog-container'});
+        parent.appendChild(this.container);
+
+        // dialog header
+        const header = div({class: 'igv-ui-generic-dialog-header'});
+        this.container.appendChild(header);
+
+        // dialog label
+        this.label = div({class: 'igv-ui-generic-dialog-one-liner'});
+        this.container.appendChild(this.label);
+        this.label.text = 'Unlabeled';
+
+        // input container
+        this.input_container = div({class: 'igv-ui-generic-dialog-input'});
+        this.container.appendChild(this.input_container);
+
+        // input element
+        let html = `<input type="range" id="igv-slider-dialog-input" name="igv-slider-dialog-input" />`;
+        this._input = document.createRange().createContextualFragment(html).firstChild;
+        this.input_container.appendChild(this._input);
+
+        // output element
+        html = `<output id="igv-slider-dialog-output" name="igv-slider-dialog-output" for="igv-slider-dialog-input"></output>`;
+        this._output = document.createRange().createContextualFragment(html).firstChild;
+        this.input_container.appendChild(this._output);
+
+
+        // ok | cancel
+        const buttons = div({class: 'igv-ui-generic-dialog-ok-cancel'});
+        this.container.appendChild(buttons);
+
+        // ok
+        this.ok = div();
+        buttons.appendChild(this.ok);
+        this.ok.textContent = 'OK';
+
+        // cancel
+        this.cancel = div();
+        buttons.appendChild(this.cancel);
+        this.cancel.textContent = 'Cancel';
+
+        hide(this.container);
+
+        this._input.addEventListener('input', () => {
+            const number = parseFloat(this._input.value)/this._scaleFactor;
+            this.callback(number);
+            this._output.value = `${number.toFixed(2)}`;
+        }, false);
+
+        this.ok.addEventListener('click', () => {
+            if (typeof this.callback === 'function') {
+                const number = parseFloat(this._input.value)/this._scaleFactor;
+                this.callback(number);
+                this.callback = undefined;
+            }
+            this._input.value = undefined;
+            hide(this.container);
+        });
+
+        const cancel = () => {
+            this._input.value = undefined;
+            hide(this.container);
+        };
+
+        this.cancel.addEventListener('click', cancel);
+
+        attachDialogCloseHandlerWithParent(header, cancel);
+        makeDraggable(this.container, header);
+
+    }
+
+    get value() {
+        return purify.sanitize(this._input.value)
+    }
+
+    present(options, e) {
+
+        this.label.textContent = options.label;
+
+        this._scaleFactor = options.scaleFactor;
+        const [ minS, maxS, valueS ] = [ options.min, options.max, options.value ].map(number => (Math.floor(this._scaleFactor * number)).toString());
+
+        this._input.min = minS;
+        this._input.max = maxS;
+        this._input.value = valueS;
+
+        const numer = parseFloat(valueS);
+        const denom = this._scaleFactor;
+        const number = numer/denom;
+        this._output.value = `${number.toFixed(2)}`;
+
+        this.callback = options.callback || options.click;
+
+        show(this.container);
+        this.clampLocation(e.clientX, e.clientY);
+
+    }
+
+    clampLocation(clientX, clientY) {
+
+        const {width: w, height: h} = this.container.getBoundingClientRect();
+        const wh = window.innerHeight;
+        const ww = window.innerWidth;
+
+        const y = Math.min(wh - h, clientY);
+        const x = Math.min(ww - w, clientX);
+        this.container.style.left = `${x}px`;
+        this.container.style.top = `${y}px`;
+
+    }
+}
+
 // css - $igv-scrollbar-outer-width: 14px;
 const igv_scrollbar_outer_width = 14;
 
@@ -74124,7 +74767,6 @@ class Browser {
                 this.sampleNameControl.setState(this.showSampleNames);
                 this.sampleNameControl.hide();
 
-
                 this.layoutChange();
             }
         });
@@ -74143,7 +74785,7 @@ class Browser {
 
         this.sampleInfo = new SampleInfo(this);
 
-        this.setControls(config);
+        this.createStandardControls(config);
 
         // Region of interest
         this.roiManager = new ROIManager(this);
@@ -74201,121 +74843,18 @@ class Browser {
         }
     }
 
-    setControls(config) {
-
-        const $navBar = this.createStandardControls(config);
-        $navBar.insertBefore($$1(this.columnContainer));
-        this.$navigation = $navBar;
-
-        if (false === config.showControls) {
-            $navBar.hide();
-        }
-
-    }
-
     createStandardControls(config) {
 
-        const $navBar = $$1('<div>', {class: 'igv-navbar'});
-        this.$navigation = $navBar;
-
-        const $navbarLeftContainer = $$1('<div>', {class: 'igv-navbar-left-container'});
-        $navBar.append($navbarLeftContainer);
-
-        // IGV logo
-        const $logo = $$1('<div>', {class: 'igv-logo'});
-        $navbarLeftContainer.append($logo);
-
-        const logoSvg = logo();
-        logoSvg.css("width", "34px");
-        logoSvg.css("height", "32px");
-        $logo.append(logoSvg);
-
-        this.$current_genome = $$1('<div>', {class: 'igv-current-genome'});
-        $navbarLeftContainer.append(this.$current_genome);
-        this.$current_genome.text('');
-
-        const $genomicLocation = $$1('<div>', {class: 'igv-navbar-genomic-location'});
-        $navbarLeftContainer.append($genomicLocation);
-
-        // chromosome select widget
-        this.chromosomeSelectWidget = new ChromosomeSelectWidget(this, $genomicLocation.get(0));
-        if (config.showChromosomeWidget !== false) {
-            this.chromosomeSelectWidget.show();
-        } else {
-            this.chromosomeSelectWidget.hide();
-        }
-
-        const $locusSizeGroup = $$1('<div>', {class: 'igv-locus-size-group'});
-        $genomicLocation.append($locusSizeGroup);
-
-        const $searchContainer = $$1('<div>', {class: 'igv-search-container'});
-        $locusSizeGroup.append($searchContainer);
-
-        // browser.$searchInput = $('<input type="text" placeholder="Locus Search">');
-        this.$searchInput = $$1('<input>', {class: 'igv-search-input', type: 'text', placeholder: 'Locus Search'});
-        $searchContainer.append(this.$searchInput);
-        // Stop event propagation to prevent feature track keyboard navigation
-        this.$searchInput[0].addEventListener('keyup', (event) => {
-            event.stopImmediatePropagation();
-        });
-
-        this.$searchInput.change(() => this.doSearch(this.$searchInput.val()));
-
-        const searchIconContainer = div({class: 'igv-search-icon-container'});
-        $searchContainer.append($$1(searchIconContainer));
-
-        searchIconContainer.appendChild(createIcon("search"));
-
-        searchIconContainer.addEventListener('click', () => this.doSearch(this.$searchInput.val()));
-
-        this.windowSizePanel = new WindowSizePanel($locusSizeGroup.get(0), this);
-
-        const $navbarRightContainer = $$1('<div>', {class: 'igv-navbar-right-container'});
-        $navBar.append($navbarRightContainer);
-
-        const $toggle_button_container = $$1('<div class="igv-navbar-toggle-button-container">');
-        $navbarRightContainer.append($toggle_button_container);
-        this.$toggle_button_container = $toggle_button_container;
-
-        this.overlayTrackButton = new OverlayTrackButton(this, $toggle_button_container.get(0));
-        this.overlayTrackButton.setVisibility(false);
-
-        this.multiTrackSelectButton = new MultiTrackSelectButton(this, $toggle_button_container.get(0));
-
-        this.cursorGuide = new CursorGuide(this.columnContainer, this);
-
-        this.cursorGuideButton = new CursorGuideButton(this, $toggle_button_container.get(0));
-
-        this.centerLineButton = new CenterLineButton(this, $toggle_button_container.get(0));
-
         this.setTrackLabelVisibility(config.showTrackLabels);
-        this.trackLabelControl = new TrackLabelControl($toggle_button_container.get(0), this);
 
-        // ROI Control
-        this.roiTableControl = new ROITableControl($toggle_button_container.get(0), this);
-
-        this.sampleInfoControl = new SampleInfoControl($toggle_button_container.get(0), this);
+        this.navbar = new ResponsiveNavbar(config, this);
 
-        this.sampleNameControl = new SampleNameControl($toggle_button_container.get(0), this);
-
-        if (true === config.showSVGButton) {
-            this.saveImageControl = new SaveImageControl($toggle_button_container.get(0), this);
-        }
+        this.navbar.$navigation.insertBefore($$1(this.columnContainer));
 
-        if (config.customButtons) {
-            for (let b of config.customButtons) {
-                new CustomButton($toggle_button_container.get(0), this, b);
-            }
-        }
-
-        this.zoomWidget = new ZoomWidget(this, $navbarRightContainer.get(0));
-
-        if (false === config.showNavigation) {
-            this.$navigation.hide();
+        if (false === config.showControls) {
+            this.navbar.hide();
         }
-
-        this.sliderDialog = new SliderDialog(this.root);
-        this.sliderDialog.container.id = `igv-slider-dialog-${guid$2()}`;
+        this.cursorGuide = new CursorGuide(this.columnContainer, this);
 
         this.inputDialog = new InputDialog(this.root);
         this.inputDialog.container.id = `igv-input-dialog-${guid$2()}`;
@@ -74326,7 +74865,8 @@ class Browser {
         this.genericColorPicker = new GenericColorPicker({parent: this.columnContainer, width: 432});
         this.genericColorPicker.container.id = `igv-track-color-picker-${guid$2()}`;
 
-        return $navBar
+        this.sliderDialog = new SliderDialog(this.root);
+        this.sliderDialog.container.id = `igv-slider-dialog-${guid$2()}`;
 
     }
 
@@ -74557,10 +75097,10 @@ class Browser {
             session = await translateSession(session);
         }
 
-        this.sampleInfoControl.setButtonVisibility(false);
+        this.navbar.sampleInfoControl.setButtonVisibility(false);
 
         this.showSampleNames = session.showSampleNames || false;
-        this.sampleNameControl.setState(this.showSampleNames === true);
+        this.navbar.sampleNameControl.setState(this.showSampleNames === true);
 
         if (session.sampleNameViewportWidth) {
             this.sampleNameViewportWidth = session.sampleNameViewportWidth;
@@ -74680,9 +75220,9 @@ class Browser {
             await rtv.updateViews();
         }
 
-        // If any tracks are selected show the selectino buttons
+        // If any tracks are selected show the selection buttons
         if (this.trackViews.some(tv => tv.track.selected)) {
-            this.multiTrackSelectButton.setMultiTrackSelection(true);
+            this.navbar.setEnableTrackSelection(true);
         }
 
         this.updateUIWithReferenceFrameList();
@@ -74723,7 +75263,8 @@ class Browser {
 
         this.removeAllTracks();   // Do this first, before new genome is set
         this.roiManager.clearROIs();
-        this.multiTrackSelectButton.setMultiTrackSelection(false);
+
+        this.navbar.setEnableTrackSelection(false);
 
         let genome;
         if (genomeConfig.gbkURL) {
@@ -74736,8 +75277,7 @@ class Browser {
 
         this.genome = genome;
 
-        this.updateNavbarDOMWithGenome(genome);
-
+        this.navbar.updateGenome(genome);
 
         let locus = initialLocus || genome.initialLocus;
         if (Array.isArray(locus)) {
@@ -74768,26 +75308,6 @@ class Browser {
         }
     }
 
-    updateNavbarDOMWithGenome(genome) {
-        let genomeLabel = (genome.id && genome.id.length < 20 ? genome.id : `${genome.id.substring(0, 8)}...${genome.id.substring(genome.id.length - 8)}`);
-        this.$current_genome.text(genomeLabel);
-        this.$current_genome.attr('title', genome.description);
-
-        // chromosome select widget -- Show this IFF its not explicitly hidden AND the genome has pre-loaded chromosomes
-        const showChromosomeWidget =
-            this.config.showChromosomeWidget !== false &&
-            this.genome.showChromosomeWidget !== false &&
-            genome.chromosomeNames &&
-            genome.chromosomeNames.length > 1;
-
-        if (showChromosomeWidget) {
-            this.chromosomeSelectWidget.update(genome);
-            this.chromosomeSelectWidget.show();
-        } else {
-            this.chromosomeSelectWidget.hide();
-        }
-    }
-
     /**
      * Load a genome, defined by a string ID or a json-like configuration object. This includes a fasta reference
      * as well as optional cytoband and annotation tracks.
@@ -74872,16 +75392,16 @@ class Browser {
 
         (this.isMultiLocusWholeGenomeView() || GenomeUtils.isWholeGenomeView(referenceFrameList[0].chr));
 
-        navbarDidResize(this, this.$navigation.width());
+        this.navbar.navbarDidResize();
 
         toggleTrackLabels(this.trackViews, this.doShowTrackLabels);
 
         if (this.doShowCenterLine && GenomeUtils.isWholeGenomeView(referenceFrameList[0].chr)) {
-            this.centerLineButton.boundMouseClickHandler();
+            this.navbar.centerLineButton.boundMouseClickHandler();
         }
 
         if (this.doShowCursorGuide && GenomeUtils.isWholeGenomeView(referenceFrameList[0].chr)) {
-            this.cursorGuideButton.boundMouseClickHandler();
+            this.navbar.cursorGuideButton.boundMouseClickHandler();
         }
 
         this.setCenterLineAndCenterLineButtonVisibility(GenomeUtils.isWholeGenomeView(referenceFrameList[0].chr));
@@ -74891,9 +75411,9 @@ class Browser {
     setCenterLineAndCenterLineButtonVisibility(isWholeGenomeView) {
 
         if (isWholeGenomeView) {
-            this.centerLineButton.setVisibility(!isWholeGenomeView);
+            this.navbar.centerLineButton.setVisibility(false);
         } else {
-            this.centerLineButton.setVisibility(this.config.showCenterGuideButton);
+            this.navbar.centerLineButton.setVisibility(this.config.showCenterGuideButton);
         }
 
         for (let centerLine of this.centerLineList) {
@@ -75099,7 +75619,7 @@ class Browser {
         this.reorderTracks();
         this.fireEvent('trackorderchanged', [this.getTrackOrder()]);
 
-        this.multiTrackSelectButton.setMultiTrackSelection(this.multiTrackSelectButton.enableMultiTrackSelection);
+        newTrack.trackView.enableTrackSelection(this.navbar.getEnableTrackSelection());
 
         return newTrack
 
@@ -75467,8 +75987,7 @@ class Browser {
         }
 
         if (this.referenceFrameList) {
-            this.isMultiLocusWholeGenomeView() || GenomeUtils.isWholeGenomeView(this.referenceFrameList[0].chr);
-            navbarDidResize(this, this.$navigation.width());
+            this.navbar.navbarDidResize();
         }
 
         resize.call(this);
@@ -75550,13 +76069,11 @@ class Browser {
             referenceFrame.end = referenceFrame.start + referenceFrame.bpPerPixel * width;
         }
 
-        if (this.chromosomeSelectWidget) {
-            this.chromosomeSelectWidget.select.value = referenceFrameList.length === 1 ? this.referenceFrameList[0].chr : '';
-        }
+        const chrName = referenceFrameList.length === 1 ? this.referenceFrameList[0].chr : '';
 
         const loc = this.referenceFrameList.map(rf => rf.getLocusString()).join(' ');
 
-        this.$searchInput.val(loc);
+        this.navbar.updateLocus(loc, chrName);
 
         this.fireEvent('locuschange', [this.referenceFrameList]);
     }
@@ -75831,7 +76348,7 @@ class Browser {
     async loadSampleInfo(config) {
 
         await this.sampleInfo.loadSampleInfoFile(config.url);
- 
+
         for (const {sampleInfoViewport} of this.trackViews) {
             sampleInfoViewport.setWidth(this.getSampleInfoColumnWidth());
         }
@@ -76287,7 +76804,7 @@ class Browser {
     createCircularView(container, show) {
         show = show === true;   // convert undefined to boolean
         this.circularView = createCircularView(container, this);
-        this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
+        this.circularViewControl = new CircularViewControl(this.navbar.toggle_button_container, this);
         this.circularView.setAssembly({
             name: this.genome.id,
             id: this.genome.id,
@@ -76307,6 +76824,30 @@ class Browser {
             this.circularViewControl.setState(isVisible);
         }
     }
+
+
+
+    // Navbar delegates
+    get sampleInfoControl() {
+        return this.navbar.sampleInfoControl
+    }
+
+    get overlayTrackButton() {
+        return this.navbar.overlayTrackButton
+    }
+
+    get roiTableControl() {
+        return this.navbar.roiTableControl
+    }
+
+    get sampleInfoControl() {
+        return this.navbar.sampleInfoControl
+    }
+
+    get sampleNameControl() {
+        return this.navbar.sampleNameControl
+    }
+
 }
 
 function getFileExtension(input) {
@@ -76516,21 +77057,6 @@ async function keyUpHandler(event) {
     }
 }
 
-
-function logo() {
-
-    return $$1(
-        '<svg width="690px" height="324px" viewBox="0 0 690 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-        '<title>IGV</title>' +
-        '<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">' +
-        '<g id="IGV" fill="#666666">' +
-        '<polygon id="Path" points="379.54574 8.00169252 455.581247 8.00169252 515.564813 188.87244 532.884012 253.529506 537.108207 253.529506 554.849825 188.87244 614.833392 8.00169252 689.60164 8.00169252 582.729511 320.722144 486.840288 320.722144"></polygon>' +
-        '<path d="M261.482414,323.793286 C207.975678,323.793286 168.339046,310.552102 142.571329,284.069337 C116.803612,257.586572 103.919946,217.158702 103.919946,162.784513 C103.919946,108.410325 117.437235,67.8415913 144.472217,41.0770945 C171.507199,14.3125977 212.903894,0.930550071 268.663545,0.930550071 C283.025879,0.930550071 298.232828,1.84616386 314.284849,3.6774189 C330.33687,5.50867394 344.839793,7.97378798 357.794056,11.072835 L357.794056,68.968378 C339.48912,65.869331 323.578145,63.5450806 310.060654,61.9955571 C296.543163,60.4460336 284.574731,59.6712835 274.154998,59.6712835 C255.850062,59.6712835 240.502308,61.4320792 228.111274,64.9537236 C215.720241,68.4753679 205.793482,74.2507779 198.330701,82.2801269 C190.867919,90.309476 185.587729,100.87425 182.48997,113.974767 C179.392212,127.075284 177.843356,143.345037 177.843356,162.784513 C177.843356,181.942258 179.251407,198.000716 182.067551,210.960367 C184.883695,223.920018 189.671068,234.41436 196.429813,242.443709 C203.188559,250.473058 212.059279,256.178037 223.042241,259.558815 C234.025202,262.939594 247.683295,264.629958 264.01693,264.629958 C268.241146,264.629958 273.098922,264.489094 278.590403,264.207362 C284.081883,263.925631 289.643684,263.50304 295.275972,262.939577 L295.275972,159.826347 L361.595831,159.826347 L361.595831,308.579859 C344.698967,313.087564 327.239137,316.750019 309.215815,319.567334 C291.192494,322.38465 275.281519,323.793286 261.482414,323.793286 L261.482414,323.793286 L261.482414,323.793286 Z" id="Path"></path>;' +
-        '<polygon id="Path" points="0.81355666 5.00169252 73.0472883 5.00169252 73.0472883 317.722144 0.81355666 317.722144"></polygon>' +
-        '</g> </g> </svg>'
-    )
-}
-
 function toggleTrackLabels(trackViews, isVisible) {
 
     for (let {viewports} of trackViews) {
@@ -76625,7 +77151,7 @@ async function createBrowser(parentDiv, config) {
     }
 
     browser.stopSpinner();
-    navbarDidResize(browser, browser.$navigation.width());
+    browser.navbar.navbarDidResize();
 
     return browser