loom-browser 0.0.7 → 0.0.8

package/dist/loom.js

@@ -5047,8 +5047,11 @@
             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();
@@ -5056,6 +5059,8 @@
                     };
                     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;
@@ -5095,6 +5100,7 @@
                 };
                 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();
@@ -5359,10 +5365,12 @@
             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;
@@ -5393,6 +5401,14 @@
             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
@@ -5407,10 +5423,12 @@
             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;
@@ -6131,6 +6149,16 @@
         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
@@ -7221,15 +7249,18 @@
         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.
@@ -9837,6 +9868,15 @@
         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,
@@ -10874,6 +10914,19 @@
             && 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',
@@ -10934,6 +10987,8 @@
             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();
@@ -11298,6 +11353,17 @@
             }
             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 = [];
@@ -11839,6 +11905,11 @@
         }
         /** 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();
@@ -11982,12 +12053,16 @@
                     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;
@@ -12014,12 +12089,20 @@
                 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;
@@ -12892,8 +12975,16 @@
                     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