igv 3.0.8 → 3.0.9

package/dist/igv.js

@@ -18599,7 +18599,7 @@
 
     }
 
-    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']);
 
@@ -20942,125 +20942,6 @@
     }
     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) {
@@ -24514,6 +24395,29 @@
 
     }
 
+    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) {
@@ -25878,6 +25782,10 @@
                     this.decode = decodeGcnv;
                     this.delimiter = "\t";
                     break
+                case "shoebox":
+                    this.decode = decodeShoebox;
+                    this.delimiter = "\t";
+                    break
                 default:
                     const customFormat = getFormat(format);
                     if (customFormat !== undefined) {
@@ -31964,14 +31872,25 @@
             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;
@@ -32637,8 +32556,8 @@
 
     class DataBuffer {
 
-        constructor(dataURI) {
-            this.data = decodeDataURI$1(dataURI).buffer;
+        constructor(data) {
+            this.data = data;
         }
 
         /**
@@ -38025,6 +37944,16 @@
                     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
@@ -38127,10 +38056,15 @@
                 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
@@ -38331,7 +38265,7 @@
                 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")) {
@@ -38418,6 +38352,26 @@
         }
     }
 
+
+    /**
+     * 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
@@ -41966,7 +41920,7 @@
 
     class NavbarButton {
 
-        constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
+        constructor(parent, browser, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
 
             this.browser = browser;
 
@@ -42023,7 +41977,7 @@
         }
 
         configureTextButton(textContent) {
-
+            console.log(`text ${this.title}`);
             this.button.classList.add('igv-navbar-text-button');
 
             const tempDiv = document.createElement('div');
@@ -42038,6 +41992,7 @@
         }
 
         configureIconButton() {
+            console.log(`icon ${this.title}`);
             this.button.classList.add('igv-navbar-icon-button');
         }
 
@@ -42077,11 +42032,6 @@
                 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 =
@@ -42290,6 +42240,19 @@
             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.
@@ -42654,9 +42617,9 @@
     };
 
     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));
@@ -42679,15 +42642,15 @@
 
         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);
@@ -42700,17 +42663,20 @@
                     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();
 
         }
 
@@ -42722,9 +42688,9 @@
 
         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
 
@@ -42839,6 +42805,8 @@
         createAxis(browser, track) {
 
             const axis = div();
+            this.axis = axis;
+
             browser.columnContainer.querySelector('.igv-axis-column').appendChild(axis);
 
             axis.dataset.tracktype = track.type;
@@ -42856,12 +42824,12 @@
 
             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 => {
@@ -42869,10 +42837,10 @@
                     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);
 
             }
 
@@ -43682,13 +43650,19 @@
             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;
@@ -43714,13 +43688,11 @@
                 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') {
@@ -43834,13 +43806,13 @@
      *
      */
 
-    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;
@@ -54043,6 +54015,10 @@
         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)) {
@@ -57279,10 +57255,6 @@
 
             function clickHandler() {
                 this.alignmentTrack.colorBy = menuItem.key;
-                if ('strand' !== this.alignmentTrack.groupBy) {
-                    this.alignmentTrack.groupBy = 'strand';
-                    this.alignmentTrack.repackAlignments();
-                }
                 this.trackView.repaintViews();
             }
 
@@ -67871,6 +67843,7 @@
         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);
@@ -70209,6 +70182,343 @@
         }
     }
 
+    /*
+     *  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"
 
 
@@ -70220,7 +70530,7 @@
             ['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)],
@@ -70712,94 +71022,11 @@
         })
     }
 
-    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)
      *
@@ -70847,7 +71074,7 @@
             });
 
             this.showAllChromosomes = browser.config.showAllChromosomes !== false;   // i.e. default to true
-
+            this.genome = browser.genome;
         }
 
         show() {
@@ -70858,10 +71085,16 @@
             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);
@@ -70872,6 +71105,7 @@
                         break
                     }
                     if (!exclude.has(nm)) {
+                        nm = genome.getChromosomeDisplayName(nm);
                         list.push(nm);
                     }
                 }
@@ -70952,6 +71186,99 @@
         }
     }
 
+    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) {
@@ -71133,9 +71460,9 @@
 
     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) {
@@ -71221,9 +71548,9 @@
 
     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) {
@@ -71312,7 +71639,7 @@
 
         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) {
@@ -71342,28 +71669,28 @@
 
     }
 
-    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>`;
@@ -71394,49 +71721,34 @@
      * 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 =
@@ -71540,7 +71852,7 @@
 
         constructor(parent, browser) {
 
-            super(browser, parent, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false);
+            super(parent, browser, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false);
 
             this.showSampleInfo = false;
 
@@ -71590,141 +71902,102 @@
 
     }
 
-    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) {
@@ -71867,7 +72140,7 @@
     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));
 
@@ -71933,6 +72206,422 @@
 
     }
 
+    /**
+     * 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) => {
@@ -72144,18 +72833,6 @@
         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;
 
@@ -72920,88 +73597,6 @@
         }
     }
 
-    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];
@@ -73038,101 +73633,6 @@
 
     }
 
-    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
      *
@@ -73152,6 +73652,13 @@
             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.
          *
@@ -73227,6 +73734,10 @@
             this.genome = genome;
         }
 
+        async preload() {
+            return this.loadAliases();
+        }
+
         /**
          * Return the canonical chromosome name for the alias.  If none found return the alias
          *
@@ -73279,6 +73790,9 @@
                         aliasRecord[key] = tokens[i];
                         this.aliasRecordCache.set(tokens[i], aliasRecord);
                     }
+
+                    this.aliasRecordCache.set(chr.toLowerCase(), aliasRecord);
+                    this.aliasRecordCache.set(chr.toUpperCase(), aliasRecord);
                 }
             }
         }
@@ -73450,6 +73964,9 @@
             this.update(id, chromosomeNames);
         }
 
+        async preload() {
+            // no-op
+        }
 
         /**
          * Return the canonical chromosome name for the alias.  If none found return the alias
@@ -73551,6 +74068,8 @@
                         } else if (Number.isInteger(Number(name))) {
                             record["ucsc"] = "chr" + name;
                         }
+
+
                     }
                 }
 
@@ -73558,7 +74077,10 @@
                     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);
                 }
+
             }
         }
 
@@ -73626,7 +74148,7 @@
 
             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) {
@@ -73637,17 +74159,17 @@
 
             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);
                     }
                 }
@@ -73665,6 +74187,7 @@
                 } else {
                     this.#wgChromosomeNames = trimSmallChromosomes(this.chromosomes);
                 }
+                await this.chromAlias.preload(this.#wgChromosomeNames);
             }
 
             // Optionally create the psuedo chromosome "all" to support whole genome view
@@ -73731,15 +74254,15 @@
         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);
                 }
@@ -73749,6 +74272,7 @@
 
             return this.chromosomes.get(chr)
         }
+
         async getAliasRecord(chr) {
             if (this.chromAlias) {
                 return this.chromAlias.search(chr)
@@ -73768,7 +74292,7 @@
         }
 
         get wgChromosomeNames() {
-            return this.#wgChromosomeNames ?  this.#wgChromosomeNames.slice() : undefined
+            return this.#wgChromosomeNames ? this.#wgChromosomeNames.slice() : undefined
         }
 
         get showChromosomeWidget() {
@@ -73872,7 +74396,7 @@
          * @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
@@ -74041,6 +74565,125 @@
     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;
 
@@ -74130,7 +74773,6 @@
                     this.sampleNameControl.setState(this.showSampleNames);
                     this.sampleNameControl.hide();
 
-
                     this.layoutChange();
                 }
             });
@@ -74149,7 +74791,7 @@
 
             this.sampleInfo = new SampleInfo(this);
 
-            this.setControls(config);
+            this.createStandardControls(config);
 
             // Region of interest
             this.roiManager = new ROIManager(this);
@@ -74207,121 +74849,18 @@
             }
         }
 
-        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()}`;
@@ -74332,7 +74871,8 @@
             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()}`;
 
         }
 
@@ -74563,10 +75103,10 @@
                 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;
@@ -74686,9 +75226,9 @@
                 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();
@@ -74729,7 +75269,8 @@
 
             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) {
@@ -74742,8 +75283,7 @@
 
             this.genome = genome;
 
-            this.updateNavbarDOMWithGenome(genome);
-
+            this.navbar.updateGenome(genome);
 
             let locus = initialLocus || genome.initialLocus;
             if (Array.isArray(locus)) {
@@ -74774,26 +75314,6 @@
             }
         }
 
-        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.
@@ -74878,16 +75398,16 @@
 
             (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));
@@ -74897,9 +75417,9 @@
         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) {
@@ -75105,7 +75625,7 @@
             this.reorderTracks();
             this.fireEvent('trackorderchanged', [this.getTrackOrder()]);
 
-            this.multiTrackSelectButton.setMultiTrackSelection(this.multiTrackSelectButton.enableMultiTrackSelection);
+            newTrack.trackView.enableTrackSelection(this.navbar.getEnableTrackSelection());
 
             return newTrack
 
@@ -75473,8 +75993,7 @@
             }
 
             if (this.referenceFrameList) {
-                this.isMultiLocusWholeGenomeView() || GenomeUtils.isWholeGenomeView(this.referenceFrameList[0].chr);
-                navbarDidResize(this, this.$navigation.width());
+                this.navbar.navbarDidResize();
             }
 
             resize.call(this);
@@ -75556,13 +76075,11 @@
                 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]);
         }
@@ -75837,7 +76354,7 @@
         async loadSampleInfo(config) {
 
             await this.sampleInfo.loadSampleInfoFile(config.url);
-     
+
             for (const {sampleInfoViewport} of this.trackViews) {
                 sampleInfoViewport.setWidth(this.getSampleInfoColumnWidth());
             }
@@ -76293,7 +76810,7 @@
         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,
@@ -76313,6 +76830,30 @@
                 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) {
@@ -76522,21 +77063,6 @@
         }
     }
 
-
-    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) {
@@ -76631,7 +77157,7 @@
         }
 
         browser.stopSpinner();
-        navbarDidResize(browser, browser.$navigation.width());
+        browser.navbar.navbarDidResize();
 
         return browser