loom-browser 0.0.4 → 0.0.5

package/dist/loom-react.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useContext, useCallback } from 'react';
 import { BigWig } from '@gmod/bbi';
 import { RemoteFile } from 'generic-filehandle2';
@@ -1337,6 +1337,35 @@ function parseLocus(str, cumOffsets) {
         return null;
     return { chr, start, end };
 }
+/**
+ * Format a Locus object as a human-readable string with thousands separators.
+ * e.g., { chr: 'chr17', start: 7668000, end: 7688000 } → "chr17:7,668,000-7,688,000"
+ */
+function formatLocus(locus) {
+    if (isWholeGenomeView(locus))
+        return 'All Chromosomes';
+    return `${locus.chr}:${Math.round(locus.start).toLocaleString()}-${Math.round(locus.end).toLocaleString()}`;
+}
+/**
+ * Format a base pair length as a human-readable string.
+ * e.g., 20000 → "20 kb", 2500000 → "2.5 Mb", 500 → "500 bp"
+ */
+function formatBpLength(bp) {
+    bp = Math.abs(bp);
+    if (bp >= 1e9) {
+        const val = bp / 1e9;
+        return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)} Gb`;
+    }
+    if (bp >= 1e6) {
+        const val = bp / 1e6;
+        return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)} Mb`;
+    }
+    if (bp >= 1e3) {
+        const val = bp / 1e3;
+        return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)} kb`;
+    }
+    return `${Math.round(bp)} bp`;
+}
 /**
  * Clamp a locus to valid chromosome bounds.
  *
@@ -11210,6 +11239,13 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
         this.events.on(BrowserEvent.DataLoaded, ({ track }) => {
             this.updateAxisContent(track);
         });
+        // Repaint axis canvases when theme changes (track canvases update via
+        // track.setTheme(), but axis sidebar is managed here in GenomeBrowser).
+        this.events.on(BrowserEvent.ThemeChanged, () => {
+            for (const mt of this.managedTracks) {
+                this.updateAxisContent(mt.track);
+            }
+        });
         // Re-render ROI overlays when ROIs change or viewport moves
         this.events.on(BrowserEvent.ROIAdded, () => this.renderROIOverlays());
         this.events.on(BrowserEvent.ROIRemoved, () => this.renderROIOverlays());
@@ -11412,9 +11448,10 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
         const { axisDiv } = entry;
         const rawInfo = (_a = track.getAxisInfo) === null || _a === void 0 ? void 0 : _a.call(track);
         if (!rawInfo) {
-            // No axis info — clear content and hide border (e.g., ruler tracks)
+            // No axis info — keep the column for alignment but clear content
             axisDiv.innerHTML = "";
             axisDiv.style.borderRight = "none";
+            axisDiv.style.backgroundColor = this.theme.palette.background;
             entry.axisCanvas = null;
             return;
         }
@@ -12578,7 +12615,7 @@ const LoomBrowser = forwardRef(function LoomBrowser(props, ref) {
         detachRemote() { var _a; (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.detachRemote(); },
     }), [browser]);
     const ctxValue = useMemo(() => ({ browser }), [browser]);
-    return (jsxs(GenomeBrowserContext.Provider, { value: ctxValue, children: [jsx("div", { ref: containerRef, className: className, style: style }), browser && children] }));
+    return (jsx(GenomeBrowserContext.Provider, { value: ctxValue, children: jsxs("div", { className: className, style: style, children: [browser && children, jsx("div", { ref: containerRef })] }) }));
 });
 
 /**
@@ -12722,6 +12759,646 @@ function GtxTrack({ url, experimentId, config, height, background, windowFunctio
     return null;
 }
 
+/**
+ * <loom-chromosome-select> — Chromosome dropdown for quick navigation.
+ *
+ * Lists main chromosomes (chr1-22, X, Y, M) plus "All" for whole genome view.
+ * Updates automatically when the browser locus changes.
+ */
+const template$5 = document.createElement('template');
+template$5.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+select {
+    font: var(--loom-font, 12px Arial, sans-serif);
+    color: var(--loom-text-color, #333);
+    background: var(--loom-input-bg, white);
+    border: var(--loom-input-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    height: var(--loom-input-height, 22px);
+    padding: 0 4px;
+    box-sizing: border-box;
+    outline: none;
+    cursor: pointer;
+    transition: border-color 0.15s;
+}
+select:focus {
+    border: var(--loom-input-focus-border, 1px solid #4A90D9);
+}
+</style>
+<select></select>
+`;
+class LoomChromosomeSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.unsubscribe = null;
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$5.content.cloneNode(true));
+        this.select = this.shadowRoot.querySelector('select');
+        this.select.addEventListener('change', () => {
+            if (!this._browser)
+                return;
+            const value = this.select.value;
+            if (value === 'all') {
+                this._browser.search('all');
+            }
+            else {
+                const chromSizes = this._browser.chromSizes;
+                if (chromSizes && chromSizes[value] != null) {
+                    this._browser.setLocus({ chr: value, start: 0, end: chromSizes[value] });
+                }
+            }
+        });
+    }
+    set browser(b) {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this._browser = b;
+        if (b) {
+            this.populate(b);
+            this.updateSelection(b.locus.chr);
+            this.unsubscribe = b.on(BrowserEvent.LocusChange, ({ locus }) => {
+                this.updateSelection(locus.chr);
+            });
+        }
+    }
+    get browser() {
+        return this._browser;
+    }
+    populate(browser) {
+        this.select.innerHTML = '';
+        const chromSizes = browser.chromSizes;
+        if (!chromSizes)
+            return;
+        // "All" option for whole genome view
+        if (browser.cumulativeOffsets) {
+            const opt = document.createElement('option');
+            opt.value = 'all';
+            opt.textContent = 'All';
+            this.select.appendChild(opt);
+        }
+        // Main chromosomes in order
+        const names = mainChromosomeNames(chromSizes);
+        for (const name of names) {
+            const opt = document.createElement('option');
+            opt.value = name;
+            opt.textContent = name;
+            this.select.appendChild(opt);
+        }
+    }
+    updateSelection(chr) {
+        if (isWholeGenomeView({ chr, start: 0, end: 0 })) {
+            this.select.value = 'all';
+        }
+        else {
+            this.select.value = chr;
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}
+
+/**
+ * <loom-locus-input> — Locus search/display input.
+ *
+ * Shows the current locus as a formatted string. User can type a new locus
+ * and press Enter to navigate. Updates automatically on locuschange events.
+ */
+const template$4 = document.createElement('template');
+template$4.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+input {
+    font: var(--loom-font, 12px Arial, sans-serif);
+    color: var(--loom-text-color, #333);
+    background: var(--loom-input-bg, white);
+    border: var(--loom-input-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    width: var(--loom-input-width, 220px);
+    height: var(--loom-input-height, 22px);
+    padding: 0 8px;
+    box-sizing: border-box;
+    outline: none;
+    transition: border-color 0.15s;
+}
+input:focus {
+    border: var(--loom-input-focus-border, 1px solid #4A90D9);
+}
+input::placeholder {
+    color: var(--loom-text-muted, #737373);
+}
+.search-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--loom-button-size, 24px);
+    height: var(--loom-button-size, 24px);
+    background: var(--loom-button-bg, white);
+    border: var(--loom-button-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    cursor: pointer;
+    color: var(--loom-icon-color, #555);
+    transition: background 0.15s;
+    padding: 0;
+    line-height: 1;
+}
+.search-btn:hover {
+    background: var(--loom-button-hover, #e8e8e8);
+}
+.search-btn svg {
+    width: var(--loom-icon-size, 14px);
+    height: var(--loom-icon-size, 14px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+</style>
+<div class="container">
+    <input type="text" placeholder="Locus Search" spellcheck="false" />
+    <button class="search-btn" title="Go to locus">
+        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
+    </button>
+</div>
+`;
+class LoomLocusInput extends HTMLElement {
+    constructor() {
+        super();
+        this.unsubscribe = null;
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$4.content.cloneNode(true));
+        this.input = this.shadowRoot.querySelector('input');
+        this.input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                this.doSearch();
+            }
+        });
+        this.shadowRoot.querySelector('.search-btn').addEventListener('click', () => {
+            this.doSearch();
+        });
+    }
+    set browser(b) {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this._browser = b;
+        if (b) {
+            this.updateDisplay(b.locus);
+            this.unsubscribe = b.on(BrowserEvent.LocusChange, ({ locus }) => {
+                this.updateDisplay(locus);
+            });
+        }
+    }
+    get browser() {
+        return this._browser;
+    }
+    updateDisplay(locus) {
+        if (document.activeElement !== this.input && this.shadowRoot.activeElement !== this.input) {
+            this.input.value = formatLocus(locus);
+        }
+    }
+    doSearch() {
+        if (!this._browser)
+            return;
+        const value = this.input.value.trim();
+        if (value) {
+            this._browser.search(value);
+        }
+        this.input.blur();
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}
+
+/**
+ * <loom-zoom-controls> — Zoom in/out buttons.
+ */
+const template$3 = document.createElement('template');
+template$3.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.container {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--loom-button-size, 24px);
+    height: var(--loom-button-size, 24px);
+    background: var(--loom-button-bg, white);
+    border: var(--loom-button-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    cursor: pointer;
+    color: var(--loom-icon-color, #555);
+    transition: background 0.15s;
+    padding: 0;
+    line-height: 1;
+}
+button:hover {
+    background: var(--loom-button-hover, #e8e8e8);
+}
+button:active {
+    transform: scale(0.95);
+}
+button svg {
+    width: var(--loom-icon-size, 14px);
+    height: var(--loom-icon-size, 14px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+</style>
+<div class="container">
+    <button class="zoom-out" title="Zoom out">
+        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+    </button>
+    <button class="zoom-in" title="Zoom in">
+        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+    </button>
+</div>
+`;
+class LoomZoomControls extends HTMLElement {
+    constructor() {
+        super();
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$3.content.cloneNode(true));
+        this.shadowRoot.querySelector('.zoom-out').addEventListener('click', () => {
+            var _a;
+            (_a = this._browser) === null || _a === void 0 ? void 0 : _a.zoomOut();
+        });
+        this.shadowRoot.querySelector('.zoom-in').addEventListener('click', () => {
+            var _a;
+            (_a = this._browser) === null || _a === void 0 ? void 0 : _a.zoomIn();
+        });
+    }
+    set browser(b) {
+        this._browser = b;
+    }
+    get browser() {
+        return this._browser;
+    }
+}
+
+/**
+ * <loom-window-size> — Read-only display of current viewport bp range.
+ */
+const template$2 = document.createElement('template');
+template$2.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.label {
+    font: var(--loom-font-small, 11px Arial, sans-serif);
+    color: var(--loom-text-muted, #737373);
+    white-space: nowrap;
+    user-select: none;
+}
+</style>
+<span class="label"></span>
+`;
+class LoomWindowSize extends HTMLElement {
+    constructor() {
+        super();
+        this.unsubscribe = null;
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$2.content.cloneNode(true));
+        this.label = this.shadowRoot.querySelector('.label');
+    }
+    set browser(b) {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this._browser = b;
+        if (b) {
+            this.update(b.locus);
+            this.unsubscribe = b.on(BrowserEvent.LocusChange, ({ locus }) => {
+                this.update(locus);
+            });
+        }
+    }
+    get browser() {
+        return this._browser;
+    }
+    update(locus) {
+        this.label.textContent = formatBpLength(locus.end - locus.start);
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}
+
+/**
+ * <loom-export-controls> — SVG/PNG export buttons.
+ *
+ * Adds "Save SVG" and "Save PNG" buttons to the shell navbar.
+ * Calls GenomeBrowser.saveSVGtoFile() and savePNGtoFile() respectively.
+ */
+const template$1 = document.createElement('template');
+template$1.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.container {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--loom-button-size, 24px);
+    height: var(--loom-button-size, 24px);
+    background: var(--loom-button-bg, white);
+    border: var(--loom-button-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    cursor: pointer;
+    color: var(--loom-icon-color, #555);
+    transition: background 0.15s;
+    padding: 0;
+    line-height: 1;
+}
+button:hover {
+    background: var(--loom-button-hover, #e8e8e8);
+}
+button:active {
+    transform: scale(0.95);
+}
+button svg {
+    width: var(--loom-icon-size, 14px);
+    height: var(--loom-icon-size, 14px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+</style>
+<div class="container">
+    <button class="save-svg" title="Save as SVG">
+        <svg viewBox="0 0 24 24">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+    </button>
+    <button class="save-png" title="Save as PNG">
+        <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/>
+            <polyline points="21 15 16 10 5 21"/>
+        </svg>
+    </button>
+</div>
+`;
+class LoomExportControls extends HTMLElement {
+    constructor() {
+        super();
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$1.content.cloneNode(true));
+        this.shadowRoot.querySelector('.save-svg').addEventListener('click', () => {
+            var _a;
+            (_a = this._browser) === null || _a === void 0 ? void 0 : _a.saveSVGtoFile();
+        });
+        this.shadowRoot.querySelector('.save-png').addEventListener('click', () => {
+            var _a;
+            void ((_a = this._browser) === null || _a === void 0 ? void 0 : _a.savePNGtoFile());
+        });
+    }
+    set browser(b) {
+        this._browser = b;
+    }
+    get browser() {
+        return this._browser;
+    }
+}
+
+/**
+ * <loom-navbar> — Horizontal navigation bar composing locus input, window size, and zoom controls.
+ */
+// Ensure child custom elements are registered
+if (!customElements.get('loom-chromosome-select')) {
+    customElements.define('loom-chromosome-select', LoomChromosomeSelect);
+}
+if (!customElements.get('loom-locus-input')) {
+    customElements.define('loom-locus-input', LoomLocusInput);
+}
+if (!customElements.get('loom-zoom-controls')) {
+    customElements.define('loom-zoom-controls', LoomZoomControls);
+}
+if (!customElements.get('loom-window-size')) {
+    customElements.define('loom-window-size', LoomWindowSize);
+}
+if (!customElements.get('loom-export-controls')) {
+    customElements.define('loom-export-controls', LoomExportControls);
+}
+const template = document.createElement('template');
+template.innerHTML = /* html */ `
+<style>
+:host {
+    display: block;
+}
+.navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--loom-navbar-height, 32px);
+    padding: var(--loom-navbar-padding, 0 8px);
+    background: var(--loom-navbar-bg, #f3f3f3);
+    border-bottom: var(--loom-border, 1px solid #ccc);
+    box-sizing: border-box;
+    gap: var(--loom-gap, 8px);
+}
+.left {
+    display: flex;
+    align-items: center;
+    gap: var(--loom-gap, 8px);
+    flex: 1;
+    min-width: 0;
+}
+.right {
+    display: flex;
+    align-items: center;
+    gap: var(--loom-gap, 8px);
+    flex-shrink: 0;
+}
+</style>
+<div class="navbar">
+    <div class="left">
+        <loom-chromosome-select></loom-chromosome-select>
+        <loom-locus-input></loom-locus-input>
+        <loom-window-size></loom-window-size>
+    </div>
+    <div class="right">
+        <loom-export-controls></loom-export-controls>
+        <loom-zoom-controls></loom-zoom-controls>
+    </div>
+</div>
+`;
+class LoomNavbar extends HTMLElement {
+    constructor() {
+        super();
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+        this.chromSelect = this.shadowRoot.querySelector('loom-chromosome-select');
+        this.locusInput = this.shadowRoot.querySelector('loom-locus-input');
+        this.zoomControls = this.shadowRoot.querySelector('loom-zoom-controls');
+        this.windowSize = this.shadowRoot.querySelector('loom-window-size');
+        this.exportControls = this.shadowRoot.querySelector('loom-export-controls');
+    }
+    set browser(b) {
+        this._browser = b;
+        this.chromSelect.browser = b;
+        this.locusInput.browser = b;
+        this.zoomControls.browser = b;
+        this.windowSize.browser = b;
+        this.exportControls.browser = b;
+    }
+    get browser() {
+        return this._browser;
+    }
+}
+
+/**
+ * Ensures all Loom UI web components are registered as custom elements.
+ * Safe to call multiple times — each element is only registered once.
+ */
+let registered = false;
+function ensureRegistered() {
+    if (registered || typeof customElements === 'undefined')
+        return;
+    registered = true;
+    const elements = [
+        ['loom-chromosome-select', LoomChromosomeSelect],
+        ['loom-locus-input', LoomLocusInput],
+        ['loom-zoom-controls', LoomZoomControls],
+        ['loom-window-size', LoomWindowSize],
+        ['loom-export-controls', LoomExportControls],
+        ['loom-navbar', LoomNavbar],
+    ];
+    for (const [name, ctor] of elements) {
+        if (!customElements.get(name)) {
+            customElements.define(name, ctor);
+        }
+    }
+}
+
+function ChromosomeSelect({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-chromosome-select", { ref: ref });
+}
+
+function LocusInput({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-locus-input", { ref: ref });
+}
+
+function ZoomControls({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-zoom-controls", { ref: ref });
+}
+
+function WindowSize({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-window-size", { ref: ref });
+}
+
+function ExportControls({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-export-controls", { ref: ref });
+}
+
+function Navbar({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-navbar", { ref: ref });
+}
+
 /**
  * <loom-context-menu> — Right-click context menu Web Component.
  *
@@ -13287,4 +13964,4 @@ var LoomInputDialog$1 = /*#__PURE__*/Object.freeze({
     LoomInputDialog: LoomInputDialog
 });
 
-export { BedTrack, GeneTrack, GenomeBrowserContext, GtxTrack, InteractionTrack, LoomBrowser, RulerTrack, SequenceTrack, WigTrack, useBrowserEvent, useGenomeBrowser, useLocus };
+export { BedTrack, ChromosomeSelect, ExportControls, GeneTrack, GenomeBrowserContext, GtxTrack, InteractionTrack, LocusInput, LoomBrowser, Navbar, RulerTrack, SequenceTrack, WigTrack, WindowSize, ZoomControls, useBrowserEvent, useGenomeBrowser, useLocus };