loom-browser 0.0.3 → 0.0.5

package/dist/loom.esm.js

@@ -1294,6 +1294,11 @@ class AnnotationTrackCanvas extends BaseTrackCanvas {
         }
         return results;
     }
+    setTheme(theme) {
+        this._config = resolveAnnotationConfig(theme);
+        this.background = theme.palette.background;
+        this.render();
+    }
     serializeConfig(theme) {
         const defaults = resolveAnnotationConfig(theme);
         const overrides = {};
@@ -1615,6 +1620,10 @@ class RulerTrackCanvas extends BaseTrackCanvas {
             renderRulerTrack(ctx, this.config, rc);
         }
     }
+    setTheme(theme) {
+        this._config = resolveRulerConfig(theme);
+        this.render();
+    }
     serializeConfig(theme) {
         const defaults = resolveRulerConfig(theme);
         const overrides = {};
@@ -2669,6 +2678,11 @@ class WigTrackCanvas extends BaseTrackCanvas {
         }
         return [];
     }
+    setTheme(theme) {
+        const dataRange = this._config.dataRange;
+        this._config = { ...resolveWigConfig(theme), dataRange };
+        this.render();
+    }
     serializeConfig(theme) {
         const defaults = resolveWigConfig(theme);
         const overrides = {};
@@ -5252,6 +5266,11 @@ class SequenceTrackCanvas extends BaseTrackCanvas {
     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 = {};
@@ -9473,6 +9492,10 @@ class InteractionTrackCanvas extends BaseTrackCanvas {
             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));
@@ -10445,6 +10468,7 @@ const BrowserEvent = {
     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;
@@ -10452,6 +10476,7 @@ function generateTrackId(type) {
     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. */
@@ -10477,7 +10502,7 @@ class HeadlessGenomeBrowser {
         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;
     }
@@ -11217,6 +11242,14 @@ class HeadlessGenomeBrowser {
         }
         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();
@@ -12067,6 +12100,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());
@@ -12269,9 +12309,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;
         }
@@ -13930,6 +13971,102 @@ class LoomNavbar extends HTMLElement {
     }
 }
 
+/**
+ * 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.
  *
@@ -14037,6 +14174,19 @@ class LoomBrowserShell extends HTMLElement {
         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();
@@ -14053,12 +14203,31 @@ function createShell(container, options) {
     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;
 }
 
@@ -14650,148 +14819,6 @@ if (typeof customElements !== 'undefined') {
         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.
  *
@@ -14930,4 +14957,4 @@ function createFeatureSource(config, workerProvider) {
     return { dataSource, trackType, format };
 }
 
-export { AnnotationTrackCanvas, BaseTrackCanvas, BigWigDataSource, BigWigReader, BinaryParser, BrowserEvent, BufferedRangeReader, C2S, ChromAliasDefaults, CommandDispatcher, CommandError, DOMCanvasProvider, DefaultContextMenuProvider, DefaultPopupProvider, EventEmitter, FeatureCache, GeneDataSource, GenomeBrowser, GtxDataSource, GtxReader, HeadlessGenomeBrowser, InteractionTrackCanvas, IntervalTree, LoomBrowserShell, LoomChromosomeSelect, LoomContextMenu, LoomExportControls, LoomInputDialog, LoomLocusInput, LoomNavbar, LoomPopup, LoomWindowSize, LoomZoomControls, MainThreadProvider, NodeWorkerProvider, READY_STATE_OPEN, ROISet, ROI_DEFAULT_COLOR, ROI_USER_DEFINED_COLOR, RemoteConnection, RulerTrackCanvas, SESSION_VERSION, SequenceDataSource, SequenceTrackCanvas, StateProjection, TabixReader, TextFeatureSource, WebWorkerProvider, WigTrackCanvas, addCaseAliases, assembleGFFTranscripts, bufferLocus, cacheCoversViewport, clampLocus, classicThemeCSS, clearBigWigCache, clearGtxCache, commonContextMenuItems, complementBase, complementSequence, computeCumulativeOffsets, computeWigDataRange, createCachedSequence, createDataSource, createFeatureSource, createGenome, createGenomeSync, createShell, createTrackFromConfig, createTrackFromSession, darkRenderTheme, darkSequenceTheme, darkTheme, darkWigTheme, dataSourceCacheKey, decodeBed, decodeBedGraph, decodeBedpe, decodeBroadPeak, decodeGFF3, decodeGFFAttribute, decodeGTF, decodeGappedPeak, decodeGenePred, decodeGenePredExt, decodeInteract, decodeNarrowPeak, decodeRefGeneJson, decodeRefflat, defaultAnnotationRenderConfig, defaultCanvasProvider, defaultInteractionRenderConfig, defaultNucleotideColors, defaultRenderTheme, defaultRulerRenderConfig, defaultSequenceRenderConfig, defaultWigRenderConfig, drawLetterGlyph, fetchBigWigFeatures, fetchBigWigWGFeatures, fetchGeneFeatures, fetchGtxFeatures, fetchGtxMultiFeatures, fetchGtxWGFeatures, fetchRange, fetchSequence, findUTRs, fixBedPE, formatBpLength, formatLocus, fromIgvSession, generateROIId, genomeToChromCoord, getChromLength, getDecoder, getThemeCSS, getTrackCreator, hg38ChromSizes, hg38Genome, inferFormatFromPath, inferIndexURL, inferTrackType, isBinaryFormat, isCoding, isExon, isHiccups, isIntron, isLikelyIndexed, isMainChromosome, isTranscript, isTranscriptPart, isUTR, isWholeGenomeView, knownFileExtensions, knownTrackTypes, lineWigTheme, mainChromosomeNames, mainThreadProvider, matchesSelector, modernRenderTheme, modernSequenceTheme, modernTheme, modernThemeCSS, modernWigTheme, numericDataMenuItems, packFeatures, parseChromSizes, parseColorString, parseFeatures, parseGFFAttributes, parseHeader, parseLocus, parseStrand, positionString, prettyPrintNumber, registerTrackCreator, registerTypeAlias, renderAnnotationTrack, renderDynSeqFeature, renderInteractionTrack, renderLabelAxis, renderQuantitativeAxis, renderROIOverlays, renderRulerTrack, renderSequenceTrack, renderWholeGenomeRuler, renderWigTrack, resolveAnnotationConfig, resolveInteractionConfig, resolveRulerConfig, resolveSequenceConfig, resolveTheme, resolveWigConfig, reverseComplementSequence, roiContextMenuItems, selectTracks, summarizeWigData, toIgvSession, toTrackSelector, translateSequence, translationDict, warmWigTheme };
+export { AnnotationTrackCanvas, BaseTrackCanvas, BigWigDataSource, BigWigReader, BinaryParser, BrowserEvent, BufferedRangeReader, C2S, ChromAliasDefaults, CommandDispatcher, CommandError, DOMCanvasProvider, DefaultContextMenuProvider, DefaultPopupProvider, EventEmitter, FeatureCache, GeneDataSource, GenomeBrowser, GtxDataSource, GtxReader, HeadlessGenomeBrowser, InteractionTrackCanvas, IntervalTree, LoomBrowserShell, LoomChromosomeSelect, LoomContextMenu, LoomExportControls, LoomInputDialog, LoomLocusInput, LoomNavbar, LoomPopup, LoomWindowSize, LoomZoomControls, MainThreadProvider, NodeWorkerProvider, READY_STATE_OPEN, ROISet, ROI_DEFAULT_COLOR, ROI_USER_DEFINED_COLOR, RemoteConnection, RulerTrackCanvas, SESSION_VERSION, SequenceDataSource, SequenceTrackCanvas, StateProjection, TabixReader, TextFeatureSource, WebWorkerProvider, WigTrackCanvas, addCaseAliases, assembleGFFTranscripts, bufferLocus, cacheCoversViewport, clampLocus, classicThemeCSS, clearBigWigCache, clearGtxCache, commonContextMenuItems, complementBase, complementSequence, computeCumulativeOffsets, computeWigDataRange, createCachedSequence, createDataSource, createFeatureSource, createGenome, createGenomeSync, createShell, createTrackFromConfig, createTrackFromSession, darkRenderTheme, darkSequenceTheme, darkWigTheme, dataSourceCacheKey, decodeBed, decodeBedGraph, decodeBedpe, decodeBroadPeak, decodeGFF3, decodeGFFAttribute, decodeGTF, decodeGappedPeak, decodeGenePred, decodeGenePredExt, decodeInteract, decodeNarrowPeak, decodeRefGeneJson, decodeRefflat, defaultAnnotationRenderConfig, defaultCanvasProvider, defaultInteractionRenderConfig, defaultNucleotideColors, defaultRenderTheme, defaultRulerRenderConfig, defaultSequenceRenderConfig, defaultWigRenderConfig, drawLetterGlyph, fetchBigWigFeatures, fetchBigWigWGFeatures, fetchGeneFeatures, fetchGtxFeatures, fetchGtxMultiFeatures, fetchGtxWGFeatures, fetchRange, fetchSequence, findUTRs, fixBedPE, formatBpLength, formatLocus, fromIgvSession, generateROIId, genomeToChromCoord, getChromLength, getDecoder, getThemeCSS, getTrackCreator, hg38ChromSizes, hg38Genome, inferFormatFromPath, inferIndexURL, inferTrackType, isBinaryFormat, isCoding, isExon, isHiccups, isIntron, isLikelyIndexed, isMainChromosome, isTranscript, isTranscriptPart, isUTR, isWholeGenomeView, knownFileExtensions, knownTrackTypes, lineWigTheme, mainChromosomeNames, mainThreadProvider, matchesSelector, modernRenderTheme, modernSequenceTheme, modernThemeCSS, modernWigTheme, numericDataMenuItems, packFeatures, parseChromSizes, parseColorString, parseFeatures, parseGFFAttributes, parseHeader, parseLocus, parseStrand, positionString, prettyPrintNumber, registerTrackCreator, registerTypeAlias, renderAnnotationTrack, renderDynSeqFeature, renderInteractionTrack, renderLabelAxis, renderQuantitativeAxis, renderROIOverlays, renderRulerTrack, renderSequenceTrack, renderWholeGenomeRuler, renderWigTrack, resolveAnnotationConfig, resolveInteractionConfig, resolveRulerConfig, resolveSequenceConfig, resolveTheme, resolveWigConfig, reverseComplementSequence, roiContextMenuItems, selectTracks, summarizeWigData, toIgvSession, toTrackSelector, translateSequence, translationDict, warmWigTheme };