loom-browser 0.0.3 → 0.0.5

package/dist/loom.js

@@ -1296,6 +1296,11 @@
             }
             return results;
         }
+        setTheme(theme) {
+            this._config = resolveAnnotationConfig(theme);
+            this.background = theme.palette.background;
+            this.render();
+        }
         serializeConfig(theme) {
             const defaults = resolveAnnotationConfig(theme);
             const overrides = {};
@@ -1617,6 +1622,10 @@
                 renderRulerTrack(ctx, this.config, rc);
             }
         }
+        setTheme(theme) {
+            this._config = resolveRulerConfig(theme);
+            this.render();
+        }
         serializeConfig(theme) {
             const defaults = resolveRulerConfig(theme);
             const overrides = {};
@@ -2671,6 +2680,11 @@
             }
             return [];
         }
+        setTheme(theme) {
+            const dataRange = this._config.dataRange;
+            this._config = { ...resolveWigConfig(theme), dataRange };
+            this.render();
+        }
         serializeConfig(theme) {
             const defaults = resolveWigConfig(theme);
             const overrides = {};
@@ -5254,6 +5268,11 @@
         doRender(ctx, _width, _height, rc) {
             renderSequenceTrack(ctx, this._sequence, this._config, rc);
         }
+        setTheme(theme) {
+            this._config = resolveSequenceConfig(theme);
+            this._theme = theme;
+            this.render();
+        }
         serializeConfig(theme) {
             const defaults = resolveSequenceConfig(theme);
             const overrides = {};
@@ -9475,6 +9494,10 @@
                 data.push({ name: 'Type', value: feature.type });
             return data;
         }
+        setTheme(theme) {
+            this._config = resolveInteractionConfig(theme);
+            this.render();
+        }
         /** Serialize config for session save/restore, diffed against theme defaults. */
         serializeConfig(theme) {
             const resolved = resolveInteractionConfig(resolveTheme(theme));
@@ -10447,6 +10470,7 @@
         ROIChanged: 'roichanged',
         ROIClick: 'roiclick',
         ROIContextMenu: 'roicontextmenu',
+        ThemeChanged: 'themechange',
     };
     /** Generate a unique track ID: "{type}-{counter}" or "track-{counter}" if type is unknown. */
     let nextTrackId = 0;
@@ -10454,6 +10478,7 @@
         return `${type !== null && type !== void 0 ? type : 'track'}-${nextTrackId++}`;
     }
     class HeadlessGenomeBrowser {
+        get theme() { return this._theme; }
         get locus() { return this._locus; }
         get viewportWidth() { return this._viewportWidth; }
         /** Agent-friendly state projection manager. Lazily created on first access. */
@@ -10479,7 +10504,7 @@
             this.workerProvider = options.workerProvider;
             this.popupProvider = (_g = options.popupProvider) !== null && _g !== void 0 ? _g : undefined;
             this.contextMenuProvider = (_h = options.contextMenuProvider) !== null && _h !== void 0 ? _h : undefined;
-            this.theme = resolveTheme(options.theme);
+            this._theme = resolveTheme(options.theme);
             if (options.stateProjection)
                 this._state = options.stateProjection;
         }
@@ -11219,6 +11244,14 @@
             }
             return track;
         }
+        /** Apply a new render theme to the browser and all existing tracks. */
+        setTheme(theme) {
+            this._theme = resolveTheme(theme);
+            for (const mt of this.managedTracks) {
+                mt.track.setTheme(this._theme);
+            }
+            this.events.emit(BrowserEvent.ThemeChanged, { theme: this._theme });
+        }
         /** Clean up event listeners, abort in-flight requests, clear tracks and ROIs. */
         dispose() {
             this.events.removeAllListeners();
@@ -12069,6 +12102,13 @@
             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());
@@ -12271,9 +12311,10 @@
             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;
             }
@@ -13932,6 +13973,102 @@ button svg {
         }
     }
 
+    /**
+     * Built-in RenderTheme presets.
+     *
+     * These are Partial<RenderTheme> objects — pass them to resolveTheme() to get
+     * a fully resolved theme with defaults filled in.
+     *
+     * Usage:
+     *   import {resolveTheme} from './renderTheme'
+     *   import {modernRenderTheme} from './renderThemePresets'
+     *   const theme = resolveTheme(modernRenderTheme)
+     */
+    /** Modern theme — blue/pink palette, rounded exons, system font. */
+    const modernRenderTheme = {
+        palette: {
+            primary: '#4A90D9',
+            secondary: '#D94A7A',
+            accent: '#4A90D9',
+            background: '#ffffff',
+            foreground: '#333333',
+            muted: '#B0B0B0',
+        },
+        fontFamily: 'Inter, system-ui, sans-serif',
+        annotation: {
+            utrColor: '#A8C8E8',
+            altUtrColor: '#E8A8BE',
+            borderColor: 'rgba(0, 0, 0, 0.15)',
+            borderWidth: 0.5,
+            borderRadius: 3,
+            arrowInExonColor: 'rgba(255, 255, 255, 0.7)',
+            labelFont: 'italic 10px Inter, system-ui, sans-serif',
+            featureHeight: 12,
+            expandedRowHeight: 28,
+            margin: 8,
+        },
+        wig: {
+            overflowColor: '#FF6B6B',
+        },
+        sequence: {
+            frameColor1: 'hsl(220, 15%, 90%)',
+            frameColor2: 'hsl(220, 15%, 95%)',
+            startCodonColor: 'hsl(160, 55%, 42%)',
+            stopCodonColor: 'hsl(0, 60%, 55%)',
+            useFillText: true,
+            frameLabelColor: '#444444',
+            codonLabelColor: '#ffffff',
+            frameFont: '600 10px Inter, system-ui, sans-serif',
+            codonBorderRadius: 3,
+        },
+    };
+    /** Dark theme — adapted for dark backgrounds, high contrast. */
+    const darkRenderTheme = {
+        palette: {
+            primary: '#6CB4EE',
+            secondary: '#EE6C9E',
+            accent: '#6a9fd9',
+            background: '#1a1a2e',
+            foreground: '#e0e0e0',
+            muted: '#555555',
+        },
+        nucleotideColors: {
+            A: '#4ade80',
+            C: '#60a5fa',
+            G: '#facc15',
+            T: '#f87171',
+            N: '#666666',
+        },
+        annotation: {
+            utrColor: '#3D6B8E',
+            altUtrColor: '#8E3D5E',
+            borderColor: 'rgba(255, 255, 255, 0.12)',
+            borderWidth: 0.5,
+            borderRadius: 3,
+            arrowInExonColor: 'rgba(0, 0, 0, 0.4)',
+            labelBackground: '#1a1a2e',
+            labelFont: 'italic 10px sans-serif',
+            featureHeight: 12,
+            expandedRowHeight: 28,
+            margin: 8,
+        },
+        wig: {
+            overflowColor: '#FF6B6B',
+        },
+        sequence: {
+            background: '#1a1a2e',
+            frameColor1: 'hsl(230, 15%, 28%)',
+            frameColor2: 'hsl(230, 15%, 22%)',
+            startCodonColor: 'hsl(160, 50%, 35%)',
+            stopCodonColor: 'hsl(0, 55%, 45%)',
+            useFillText: true,
+            frameLabelColor: '#c8c8c8',
+            codonLabelColor: '#ffffff',
+            frameFont: '600 10px sans-serif',
+            codonBorderRadius: 3,
+        },
+    };
+
     /**
      * <loom-browser> — Top-level shell combining navbar + GenomeBrowser.
      *
@@ -14039,6 +14176,19 @@ button svg {
             var _a;
             return (_a = this._browser) === null || _a === void 0 ? void 0 : _a.on(event, handler);
         }
+        /** Switch both the UI shell theme and the render theme in one call. */
+        setTheme(shellTheme) {
+            this.applyTheme(shellTheme);
+            this.setAttribute('theme', shellTheme);
+            if (this._browser) {
+                const shellToRenderTheme = {
+                    modern: modernRenderTheme,
+                    dark: darkRenderTheme,
+                };
+                const mapped = shellToRenderTheme[shellTheme];
+                this._browser.setTheme(mapped !== null && mapped !== void 0 ? mapped : {});
+            }
+        }
         disconnectedCallback() {
             if (this._browser) {
                 this._browser.dispose();
@@ -14055,12 +14205,31 @@ button svg {
         if (!customElements.get('loom-browser')) {
             customElements.define('loom-browser', LoomBrowserShell);
         }
+        const { shellTheme, ruler, genes, sequence, ...browserOptions } = options;
+        // Auto-map shellTheme to matching RenderTheme when theme is not explicitly set
+        if (shellTheme && !browserOptions.theme) {
+            const shellToRenderTheme = {
+                modern: modernRenderTheme,
+                dark: darkRenderTheme,
+            };
+            const mapped = shellToRenderTheme[shellTheme];
+            if (mapped) {
+                browserOptions.theme = mapped;
+            }
+        }
         const shell = document.createElement('loom-browser');
-        if (options.shellTheme) {
-            shell.setAttribute('theme', options.shellTheme);
+        if (shellTheme) {
+            shell.setAttribute('theme', shellTheme);
         }
         container.appendChild(shell);
-        shell.initialize(options);
+        const browser = shell.initialize(browserOptions);
+        // Add default tracks
+        if (ruler !== false)
+            browser.addRuler();
+        if (genes !== false)
+            browser.addGeneTrack({ maxTrackHeight: 150 });
+        if (sequence === true)
+            browser.addSequenceTrack();
         return shell;
     }
 
@@ -14652,148 +14821,6 @@ tr.border-top td {
             customElements.define('loom-browser', LoomBrowserShell);
     }
 
-    /**
-     * Built-in RenderTheme presets.
-     *
-     * These are Partial<RenderTheme> objects — pass them to resolveTheme() to get
-     * a fully resolved theme with defaults filled in.
-     *
-     * Usage:
-     *   import {resolveTheme} from './renderTheme'
-     *   import {modernRenderTheme} from './renderThemePresets'
-     *   const theme = resolveTheme(modernRenderTheme)
-     */
-    /** Modern theme — blue/pink palette, rounded exons, system font. */
-    const modernRenderTheme = {
-        palette: {
-            primary: '#4A90D9',
-            secondary: '#D94A7A',
-            accent: '#4A90D9',
-            background: '#ffffff',
-            foreground: '#333333',
-            muted: '#B0B0B0',
-        },
-        fontFamily: 'Inter, system-ui, sans-serif',
-        annotation: {
-            utrColor: '#A8C8E8',
-            altUtrColor: '#E8A8BE',
-            borderColor: 'rgba(0, 0, 0, 0.15)',
-            borderWidth: 0.5,
-            borderRadius: 3,
-            arrowInExonColor: 'rgba(255, 255, 255, 0.7)',
-            labelFont: 'italic 10px Inter, system-ui, sans-serif',
-            featureHeight: 12,
-            expandedRowHeight: 28,
-            margin: 8,
-        },
-        wig: {
-            overflowColor: '#FF6B6B',
-        },
-        sequence: {
-            frameColor1: 'hsl(220, 15%, 90%)',
-            frameColor2: 'hsl(220, 15%, 95%)',
-            startCodonColor: 'hsl(160, 55%, 42%)',
-            stopCodonColor: 'hsl(0, 60%, 55%)',
-            useFillText: true,
-            frameLabelColor: '#444444',
-            codonLabelColor: '#ffffff',
-            frameFont: '600 10px Inter, system-ui, sans-serif',
-            codonBorderRadius: 3,
-        },
-    };
-    /** Dark theme — adapted for dark backgrounds, high contrast. */
-    const darkRenderTheme = {
-        palette: {
-            primary: '#6CB4EE',
-            secondary: '#EE6C9E',
-            accent: '#6a9fd9',
-            background: '#1a1a2e',
-            foreground: '#e0e0e0',
-            muted: '#555555',
-        },
-        nucleotideColors: {
-            A: '#4ade80',
-            C: '#60a5fa',
-            G: '#facc15',
-            T: '#f87171',
-            N: '#666666',
-        },
-        annotation: {
-            utrColor: '#3D6B8E',
-            altUtrColor: '#8E3D5E',
-            borderColor: 'rgba(255, 255, 255, 0.12)',
-            borderWidth: 0.5,
-            borderRadius: 3,
-            arrowInExonColor: 'rgba(0, 0, 0, 0.4)',
-            labelBackground: '#1a1a2e',
-            labelFont: 'italic 10px sans-serif',
-            featureHeight: 12,
-            expandedRowHeight: 28,
-            margin: 8,
-        },
-        wig: {
-            overflowColor: '#FF6B6B',
-        },
-        sequence: {
-            background: '#1a1a2e',
-            frameColor1: 'hsl(230, 15%, 28%)',
-            frameColor2: 'hsl(230, 15%, 22%)',
-            startCodonColor: 'hsl(160, 50%, 35%)',
-            stopCodonColor: 'hsl(0, 55%, 45%)',
-            useFillText: true,
-            frameLabelColor: '#c8c8c8',
-            codonLabelColor: '#ffffff',
-            frameFont: '600 10px sans-serif',
-            codonBorderRadius: 3,
-        },
-    };
-
-    /**
-     * Preset render themes for annotation tracks.
-     *
-     * Each theme is a Partial<AnnotationRenderConfig> that can be spread over defaults.
-     * Usage: { ...defaultAnnotationRenderConfig(), ...modernTheme }
-     */
-    /** Modern theme — softer colors, rounded exons, strand-based coloring. */
-    const modernTheme = {
-        color: '#4A90D9',
-        altColor: '#D94A7A',
-        utrColor: '#A8C8E8',
-        altUtrColor: '#E8A8BE',
-        borderColor: 'rgba(0, 0, 0, 0.15)',
-        borderWidth: 0.5,
-        borderRadius: 3,
-        intronColor: '#B0B0B0',
-        intronLineWidth: 1,
-        arrowColor: '#999999',
-        arrowInExonColor: 'rgba(255, 255, 255, 0.7)',
-        labelColor: '#333333',
-        labelFont: 'italic 10px sans-serif',
-        featureHeight: 12,
-        expandedRowHeight: 28,
-        margin: 8,
-    };
-    /** Dark theme — modern theme adapted for dark backgrounds. */
-    const darkTheme = {
-        color: '#6CB4EE',
-        altColor: '#EE6C9E',
-        utrColor: '#3D6B8E',
-        altUtrColor: '#8E3D5E',
-        borderColor: 'rgba(255, 255, 255, 0.12)',
-        borderWidth: 0.5,
-        borderRadius: 3,
-        intronColor: '#555555',
-        intronLineWidth: 1,
-        arrowColor: '#666666',
-        arrowInExonColor: 'rgba(0, 0, 0, 0.4)',
-        labelColor: '#C8C8C8',
-        labelBackground: '#1a1a2e',
-        labelFont: 'italic 10px sans-serif',
-        featureHeight: 12,
-        expandedRowHeight: 28,
-        margin: 8,
-    };
-
     /**
      * Preset render themes for wig tracks.
      *
@@ -15004,7 +15031,6 @@ tr.border-top td {
     exports.createTrackFromSession = createTrackFromSession;
     exports.darkRenderTheme = darkRenderTheme;
     exports.darkSequenceTheme = darkSequenceTheme;
-    exports.darkTheme = darkTheme;
     exports.darkWigTheme = darkWigTheme;
     exports.dataSourceCacheKey = dataSourceCacheKey;
     exports.decodeBed = decodeBed;
@@ -15073,7 +15099,6 @@ tr.border-top td {
     exports.matchesSelector = matchesSelector;
     exports.modernRenderTheme = modernRenderTheme;
     exports.modernSequenceTheme = modernSequenceTheme;
-    exports.modernTheme = modernTheme;
     exports.modernThemeCSS = modernThemeCSS;
     exports.modernWigTheme = modernWigTheme;
     exports.numericDataMenuItems = numericDataMenuItems;