loom-browser 0.0.7 → 0.0.8

package/dist/loom-react.esm.js

@@ -2555,10 +2555,12 @@ class BaseTrackCanvas {
         ctx.fillRect(0, 0, width, height);
         if (this._error) {
             this.renderError(ctx, width, height);
+            this.renderLabelOverlay(ctx, width, height);
             return;
         }
         if (this._zoomedOut) {
             this.renderZoomInNotice(ctx, width, height);
+            this.renderLabelOverlay(ctx, width, height);
             return;
         }
         const bpPerPixel = (this._locus.end - this._locus.start) / width;
@@ -2589,6 +2591,14 @@ class BaseTrackCanvas {
         ctx.textBaseline = 'middle';
         ctx.fillText('Zoom in to see features', width / 2, height / 2);
     }
+    /**
+     * Render the track name label overlay. Called after error/zoom-in notices
+     * so labels remain visible even when the track can't render data.
+     * No-op by default — subclasses with name labels should override.
+     */
+    renderLabelOverlay(_ctx, _width, _height) {
+        // No-op — subclasses override
+    }
     /**
      * Render this track onto an arbitrary context (e.g. Canvas2SVG for SVG export).
      * Skips DPR scaling and canvas-element lifecycle — draws directly at the given
@@ -2603,10 +2613,12 @@ class BaseTrackCanvas {
         ctx.fillRect(0, 0, width, height);
         if (this._error) {
             this.renderError(ctx, width, height);
+            this.renderLabelOverlay(ctx, width, height);
             return;
         }
         if (this._zoomedOut) {
             this.renderZoomInNotice(ctx, width, height);
+            this.renderLabelOverlay(ctx, width, height);
             return;
         }
         const bpPerPixel = (this._locus.end - this._locus.start) / width;
@@ -3415,15 +3427,18 @@ class WigTrackCanvas extends BaseTrackCanvas {
     getBackground() {
         return this.config.background;
     }
+    renderLabelOverlay(ctx, _width, height) {
+        if (this._name) {
+            renderTrackNameLabel(ctx, {
+                name: this._name,
+                background: this.config.background,
+                labelColor: this.config.labelColor,
+            }, height);
+        }
+    }
     doRender(ctx, _width, height, rc) {
         if (this.features.length === 0) {
-            if (this._name) {
-                renderTrackNameLabel(ctx, {
-                    name: this._name,
-                    background: this.config.background,
-                    labelColor: this.config.labelColor,
-                }, height);
-            }
+            this.renderLabelOverlay(ctx, _width, height);
             return;
         }
         // Apply value scaling (normalize then scaleFactor), matching igv.js getFeatures() order.
@@ -4026,6 +4041,16 @@ class AnnotationTrackCanvas extends BaseTrackCanvas {
     getBackground() {
         return this.background;
     }
+    renderLabelOverlay(ctx, _width, height) {
+        var _a;
+        if (this._name) {
+            renderTrackNameLabel(ctx, {
+                name: this._name,
+                background: this.background,
+                labelColor: (_a = this.config.labelColor) !== null && _a !== void 0 ? _a : '#333',
+            }, height);
+        }
+    }
     doRender(ctx, _width, _height, rc) {
         var _a;
         // Ensure label background matches track background so clearRect doesn't
@@ -8728,6 +8753,15 @@ class InteractionTrackCanvas extends BaseTrackCanvas {
     getBackground() {
         return this.config.background;
     }
+    renderLabelOverlay(ctx, _width, height) {
+        if (this._name) {
+            renderTrackNameLabel(ctx, {
+                name: this._name,
+                background: this._config.background,
+                labelColor: '#333',
+            }, height);
+        }
+    }
     doRender(ctx, _width, _height, rc) {
         renderInteractionTrack(ctx, this.features, this._config, rc, this._name ? {
             name: this._name,
@@ -9492,6 +9526,19 @@ function isDataSourceWorkerProvider(obj) {
         && typeof o.fetch === 'function'
         && typeof o.destroy === 'function';
 }
+/** Check if an error is an AbortError (from fetch abort, signal abort, or worker abort). */
+function isAbortError(err) {
+    if (err instanceof DOMException && err.name === 'AbortError')
+        return true;
+    if (err instanceof Error && err.name === 'AbortError')
+        return true;
+    // Worker-relayed abort errors may arrive as plain Error with the browser's
+    // abort message (e.g., "signal is aborted without reason") because the
+    // worker-side DOMException check can miss non-DOMException abort errors.
+    if (err instanceof Error && err.message.includes('aborted'))
+        return true;
+    return false;
+}
 const BrowserEvent = {
     LocusChange: 'locuschange',
     TrackAdded: 'trackadded',
@@ -9552,6 +9599,8 @@ class HeadlessGenomeBrowser {
         this.inflightFetches = new Map();
         /** Timer for debouncing data loads during rapid zoom/pan. */
         this.loadDebounceTimer = null;
+        /** Set to true by dispose() to suppress post-dispose promise handlers. */
+        this._disposed = false;
         /** When true, sortTracks() is a no-op. Used for batch track additions (e.g. loadSession). */
         this._deferSort = false;
         this.events = new EventEmitter();
@@ -9916,6 +9965,17 @@ class HeadlessGenomeBrowser {
         }
         return undefined;
     }
+    /** Remove a specific ROI set by instance. Returns true if found and removed. */
+    removeROISet(set) {
+        const idx = this.roiSets.indexOf(set);
+        if (idx < 0)
+            return false;
+        this.roiSets.splice(idx, 1);
+        for (const roi of set.features) {
+            this.events.emit(BrowserEvent.ROIRemoved, { roi, set });
+        }
+        return true;
+    }
     /** Remove all ROI sets. */
     clearROIs() {
         this.roiSets = [];
@@ -10457,6 +10517,11 @@ class HeadlessGenomeBrowser {
     }
     /** Clean up event listeners, abort in-flight requests, clear tracks and ROIs. */
     dispose() {
+        this._disposed = true;
+        if (this.loadDebounceTimer !== null) {
+            clearTimeout(this.loadDebounceTimer);
+            this.loadDebounceTimer = null;
+        }
         this.events.removeAllListeners();
         if (this.popupProvider)
             this.popupProvider.dispose();
@@ -10600,12 +10665,16 @@ class HeadlessGenomeBrowser {
                 this.events.emit(BrowserEvent.DataLoaded, { track: mt.track });
             })
                 .catch(err => {
-                // AbortErrors propagate from the source track's abort — ignore them
-                if (err instanceof DOMException && err.name === 'AbortError')
+                if (this._disposed || isAbortError(err))
                     return;
                 const error = err instanceof Error ? err : new Error(String(err));
-                console.error('[loom] Data fetch error (dedup):', error);
-                mt.track.setError(error);
+                if (mt.cache) {
+                    console.warn('[loom] Data fetch failed (dedup), showing cached data:', error.message);
+                }
+                else {
+                    console.error('[loom] Data fetch error (dedup):', error);
+                    mt.track.setError(error);
+                }
                 this.events.emit(BrowserEvent.DataError, { track: mt.track, error });
             });
             return;
@@ -10632,12 +10701,20 @@ class HeadlessGenomeBrowser {
             this.events.emit(BrowserEvent.DataLoaded, { track: mt.track });
         })
             .catch(err => {
-            if (!controller.signal.aborted) {
-                const error = err instanceof Error ? err : new Error(String(err));
+            if (this._disposed || controller.signal.aborted || isAbortError(err))
+                return;
+            const error = err instanceof Error ? err : new Error(String(err));
+            // If we have cached data, keep showing it (stale) rather than
+            // replacing it with an error message. Only show error if there's
+            // nothing to display at all.
+            if (mt.cache) {
+                console.warn('[loom] Data fetch failed, showing cached data:', error.message);
+            }
+            else {
                 console.error('[loom] Data fetch error:', error);
                 mt.track.setError(error);
-                this.events.emit(BrowserEvent.DataError, { track: mt.track, error });
             }
+            this.events.emit(BrowserEvent.DataError, { track: mt.track, error });
         })
             .finally(() => {
             var _a;
@@ -10696,8 +10773,11 @@ class WebWorkerPool {
         this.readyPromises = [];
         for (let i = 0; i < count; i++) {
             const worker = createWorker();
-            // Ready handshake
-            const readyPromise = new Promise((resolveReady) => {
+            // Ready handshake — rejects on worker error so awaiting fetches
+            // don't hang forever if the worker script fails to load.
+            let rejectReady;
+            const readyPromise = new Promise((resolveReady, rej) => {
+                rejectReady = rej;
                 const onReady = (e) => {
                     if (e.data.type === 'ready') {
                         resolveReady();
@@ -10705,6 +10785,8 @@ class WebWorkerPool {
                 };
                 worker.addEventListener('message', onReady, { once: true });
             });
+            // Prevent unhandled rejection warnings if worker fails before any fetch
+            readyPromise.catch(() => { });
             this.readyPromises.push(readyPromise);
             worker.onmessage = (e) => {
                 const msg = e.data;
@@ -10744,6 +10826,7 @@ class WebWorkerPool {
             };
             worker.onerror = (e) => {
                 const error = new Error(`Worker error: ${e.message}`);
+                rejectReady(error);
                 for (const { reject } of this.pending.values())
                     reject(error);
                 this.pending.clear();
@@ -11979,8 +12062,16 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
                 document.addEventListener("mousedown", this.handleDocMouseDown);
             }
         }
-        // Re-render tracks when container resizes (e.g. first layout in Shadow DOM)
-        this.resizeObserver = new ResizeObserver(() => this.render());
+        // Re-render tracks when container resizes (e.g. first layout in Shadow DOM).
+        // Also trigger data loads if width went from 0 → non-zero (common in React
+        // flex layouts where the container hasn't laid out when GenomeBrowser is created).
+        this.resizeObserver = new ResizeObserver(() => {
+            const prevWidth = this._viewportWidth;
+            this.render(); // updates _viewportWidth from container.clientWidth
+            if (prevWidth === 0 && this._viewportWidth > 0) {
+                this.loadAllTracksIfNeeded();
+            }
+        });
         this.resizeObserver.observe(container);
         // Axis content is updated in two places:
         // 1. After super.render() in render() — handles resize, pan, initial load
@@ -13428,6 +13519,7 @@ const LoomBrowser = forwardRef(function LoomBrowser(props, ref) {
         // ROI
         addROI(roi, setName) { return browserRef.current.addROI(roi, setName); },
         addROISet(config) { return browserRef.current.addROISet(config); },
+        removeROISet(set) { var _a, _b; return (_b = (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.removeROISet(set)) !== null && _b !== void 0 ? _b : false; },
         removeROI(roiId) { var _a, _b; return (_b = (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.removeROI(roiId)) !== null && _b !== void 0 ? _b : false; },
         updateROI(roiId, changes) { var _a; return (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.updateROI(roiId, changes); },
         clearROIs() { var _a; (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.clearROIs(); },
@@ -13511,12 +13603,15 @@ function useLocus() {
  * @param recreationDeps  When these change, the track is removed and re-added (new data source).
  * @param updateTrack  Called when only updateDeps change (in-place config update).
  * @param updateDeps  When these change (but recreationDeps don't), updateTrack is called.
+ * @param eventHandlers  Optional typed click/context-menu handlers scoped to this track.
  */
-function useTrackManager(addTrack, recreationDeps, updateTrack, updateDeps) {
+function useTrackManager(addTrack, recreationDeps, updateTrack, updateDeps, eventHandlers) {
     const browser = useGenomeBrowser();
     const trackRef = useRef(null);
     const prevRecreationDeps = useRef(recreationDeps);
     const isFirstRender = useRef(true);
+    const handlersRef = useRef(eventHandlers);
+    handlersRef.current = eventHandlers;
     // Add track on mount or when recreation deps change
     useEffect(() => {
         if (!browser)
@@ -13547,6 +13642,29 @@ function useTrackManager(addTrack, recreationDeps, updateTrack, updateDeps) {
         updateTrack(trackRef.current, browser);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, updateDeps);
+    // Subscribe to track click/context-menu events, filtered to this track
+    useEffect(() => {
+        if (!browser)
+            return;
+        function handleEvent(event, handler) {
+            if (!handler || event.track !== trackRef.current)
+                return;
+            handler({
+                features: event.features,
+                genomicLocation: event.genomicLocation,
+                x: event.x,
+                y: event.y,
+            });
+        }
+        const onClickListener = (e) => { var _a; return handleEvent(e, (_a = handlersRef.current) === null || _a === void 0 ? void 0 : _a.onClick); };
+        const onContextMenuListener = (e) => { var _a; return handleEvent(e, (_a = handlersRef.current) === null || _a === void 0 ? void 0 : _a.onContextMenu); };
+        browser.on(BrowserEvent.TrackClick, onClickListener);
+        browser.on(BrowserEvent.TrackContextMenu, onContextMenuListener);
+        return () => {
+            browser.off(BrowserEvent.TrackClick, onClickListener);
+            browser.off(BrowserEvent.TrackContextMenu, onContextMenuListener);
+        };
+    }, [browser]);
     return trackRef.current;
 }
 
@@ -13556,7 +13674,7 @@ function RulerTrack({ config, maxTrackHeight }) {
     return null;
 }
 
-function WigTrack({ url, features, config, height, background, windowFunction, maxTrackHeight, name, metadata }) {
+function WigTrack({ url, features, config, height, background, windowFunction, maxTrackHeight, name, metadata, onClick, onContextMenu }) {
     useTrackManager((browser) => {
         if (features) {
             return browser.addWigTrackWithFeatures(features, { config, height, background, maxTrackHeight, name, metadata });
@@ -13565,26 +13683,28 @@ function WigTrack({ url, features, config, height, background, windowFunction, m
             throw new Error('WigTrack requires either a `url` or `features` prop');
         return browser.addWigTrack(url, { config, height, background, windowFunction, maxTrackHeight, name, metadata });
     }, [url, features, windowFunction], (track) => { if (config)
-        track.setConfig(config); }, [config, height, background, name]);
+        track.setConfig(config); }, [config, height, background, name], { onClick, onContextMenu });
     return null;
 }
 
-function GeneTrack({ config, height, background, genome, track, maxTrackHeight, name, metadata }) {
+function GeneTrack({ config, height, background, genome, track, maxTrackHeight, name, metadata, onClick, onContextMenu }) {
     useTrackManager((browser) => browser.addGeneTrack({ config, height, background, genome, track, maxTrackHeight, name, metadata }), [genome, track], (t) => { if (config)
-        t.setConfig(config); }, [config, height, background, name]);
+        t.setConfig(config); }, [config, height, background, name], { onClick, onContextMenu });
     return null;
 }
 
-function BedTrack({ url, features, config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }) {
+function BedTrack({ url, features, config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata, colorBy, onClick, onContextMenu }) {
+    // Apply colorBy to in-memory features
+    const coloredFeatures = useMemo(() => features && colorBy ? features.map(f => ({ ...f, color: colorBy(f) })) : features, [features, colorBy]);
     useTrackManager((browser) => {
-        if (features) {
-            return browser.addBedTrackWithFeatures(features, { config, height, background, maxTrackHeight, name, metadata });
+        if (coloredFeatures) {
+            return browser.addBedTrackWithFeatures(coloredFeatures, { config, height, background, maxTrackHeight, name, metadata });
         }
         if (!url)
             throw new Error('BedTrack requires either a `url` or `features` prop');
         return browser.addBedTrack(url, { config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata });
-    }, [url, features, format, indexURL, indexed], (track) => { if (config)
-        track.setConfig(config); }, [config, height, background, name]);
+    }, [url, coloredFeatures, format, indexURL, indexed], (track) => { if (config)
+        track.setConfig(config); }, [config, height, background, name], { onClick, onContextMenu });
     return null;
 }
 
@@ -13594,15 +13714,43 @@ function SequenceTrack({ config, maxTrackHeight }) {
     return null;
 }
 
-function InteractionTrack({ url, config, background, format, indexURL, indexed, name, metadata }) {
+function InteractionTrack({ url, config, background, format, indexURL, indexed, name, metadata, onClick, onContextMenu }) {
     useTrackManager((browser) => browser.addInteractionTrack(url, { config, background, format, indexURL, indexed, name, metadata }), [url, format, indexURL, indexed], (track) => { if (config)
-        track.setConfig(config); }, [config, background, name]);
+        track.setConfig(config); }, [config, background, name], { onClick, onContextMenu });
     return null;
 }
 
-function GtxTrack({ url, experimentId, config, height, background, windowFunction, maxTrackHeight, name, metadata }) {
+function GtxTrack({ url, experimentId, config, height, background, windowFunction, maxTrackHeight, name, metadata, onClick, onContextMenu }) {
     useTrackManager((browser) => browser.addGtxTrack(url, { experimentId, config, height, background, windowFunction, maxTrackHeight, name, metadata }), [url, experimentId, windowFunction], (track) => { if (config)
-        track.setConfig(config); }, [config, height, background, name]);
+        track.setConfig(config); }, [config, height, background, name], { onClick, onContextMenu });
+    return null;
+}
+
+/**
+ * Declarative ROI set component. Renders nothing — manages ROIs on the
+ * GenomeBrowser via context. Add/remove `<ROISet>` children to control ROIs.
+ */
+function DeclarativeROISet({ rois, name = 'Declarative', color }) {
+    const browser = useGenomeBrowser();
+    const setRef = useRef(null);
+    useEffect(() => {
+        if (!browser)
+            return;
+        // Remove previous set if it exists
+        if (setRef.current) {
+            browser.removeROISet(setRef.current);
+            setRef.current = null;
+        }
+        const config = { name, color, features: rois };
+        const set = browser.addROISet(config);
+        setRef.current = set;
+        return () => {
+            if (setRef.current) {
+                browser.removeROISet(setRef.current);
+                setRef.current = null;
+            }
+        };
+    }, [browser, name, color, rois]);
     return null;
 }
 
@@ -14922,4 +15070,4 @@ var LoomInputDialog$1 = /*#__PURE__*/Object.freeze({
     LoomInputDialog: LoomInputDialog
 });
 
-export { BedTrack, ChromosomeSelect, ExportControls, GeneTrack, GenomeBrowserContext, GtxTrack, InteractionTrack, LocusInput, LoomBrowser, Navbar, RulerTrack, SequenceTrack, WigTrack, WindowSize, ZoomControls, useBrowserEvent, useGenomeBrowser, useLocus };
+export { BedTrack, ChromosomeSelect, ExportControls, GeneTrack, GenomeBrowserContext, GtxTrack, InteractionTrack, LocusInput, LoomBrowser, Navbar, DeclarativeROISet as ROISet, RulerTrack, SequenceTrack, WigTrack, WindowSize, ZoomControls, useBrowserEvent, useGenomeBrowser, useLocus };