loom-browser 0.0.5 → 0.0.6

package/dist/loom-react.esm.js

@@ -8231,6 +8231,72 @@ class SequenceDataSource {
     }
 }
 
+/**
+ * DataSource backed by an in-memory feature array.
+ *
+ * Wraps a pre-loaded feature array in a FeatureCache for spatial queries,
+ * enabling inline features to flow through the same data lifecycle as
+ * URL-based data sources.
+ *
+ * Layer 1 (Data + Layout): no DOM, no canvas.
+ */
+/**
+ * DataSource that serves features from an in-memory array.
+ *
+ * Features are indexed in a FeatureCache on construction for efficient
+ * spatial queries. Calling `setFeatures()` replaces the cache entirely.
+ */
+class MemoryDataSource {
+    constructor(features) {
+        this.cache = new FeatureCache(features);
+    }
+    /** Replace the in-memory features and rebuild the spatial index. */
+    setFeatures(features) {
+        this.cache = new FeatureCache(features);
+    }
+    /** Set a chromosome name resolver for alias resolution. */
+    setChromNameResolver(resolver) {
+        this._resolveChromName = resolver;
+    }
+    /** Set cumulative offsets for whole genome view coordinate transformation. */
+    setCumulativeOffsets(offsets) {
+        this._cumulativeOffsets = offsets;
+    }
+    async fetch(locus, _bpPerPixel, _signal) {
+        if (isWholeGenomeView(locus) && this._cumulativeOffsets) {
+            return this.fetchWG();
+        }
+        const chr = this._resolveChromName
+            ? this._resolveChromName(locus.chr)
+            : locus.chr;
+        return this.cache.queryFeatures(chr, locus.start, locus.end);
+    }
+    fetchWG() {
+        const offsets = this._cumulativeOffsets;
+        const chrNames = mainChromosomeNames(Object.fromEntries(offsets.chromosomeNames.map(name => { var _a; return [name, (_a = offsets.offsets[name]) !== null && _a !== void 0 ? _a : 0]; })));
+        const wgFeatures = [];
+        const allByChrom = this.cache.getAllFeatures();
+        for (const chr of chrNames) {
+            const features = allByChrom[chr];
+            if (!features)
+                continue;
+            const offset = offsets.offsets[chr];
+            if (offset === undefined)
+                continue;
+            for (const f of features) {
+                wgFeatures.push({
+                    ...f,
+                    chr: 'all',
+                    start: offset + f.start,
+                    end: offset + f.end,
+                });
+            }
+        }
+        wgFeatures.sort((a, b) => a.start - b.start);
+        return wgFeatures;
+    }
+}
+
 /**
  * Stateless renderer for interaction (arc/BEDPE) tracks.
  *
@@ -8801,6 +8867,11 @@ function createDataSource(config, workerProvider) {
                 indexed: config.indexed,
                 workerProvider,
             });
+        case 'memory':
+            // Memory data sources are created directly with features by the caller.
+            // This path is only hit during session restore, where in-memory features
+            // are not available — return an empty MemoryDataSource as a placeholder.
+            return new MemoryDataSource([]);
     }
 }
 // ─── Built-in track creators ─────────────────────────────────────────────────
@@ -8979,6 +9050,9 @@ function dataSourceCacheKey(config) {
             return `ucsc:${(_b = config.genome) !== null && _b !== void 0 ? _b : ''}:${(_c = config.track) !== null && _c !== void 0 ? _c : ''}`;
         case 'text':
             return `text:${config.url}:${(_d = config.format) !== null && _d !== void 0 ? _d : ''}:${(_e = config.indexURL) !== null && _e !== void 0 ? _e : ''}`;
+        case 'memory':
+            // Each memory data source is unique — no deduplication.
+            return `memory:${Math.random()}`;
     }
 }
 
@@ -10089,6 +10163,60 @@ class HeadlessGenomeBrowser {
             this.managedTracks[this.managedTracks.length - 1].metadata = options.metadata;
         return track;
     }
+    /** Add a BigWig-style signal track backed by in-memory features (no URL required). */
+    addWigTrackWithFeatures(features, options) {
+        const { canvas } = this.canvasProvider.createCanvas(0, 0);
+        const track = new WigTrackCanvas(canvas, {
+            locus: this._locus,
+            features: [],
+            config: options === null || options === void 0 ? void 0 : options.config,
+            height: options === null || options === void 0 ? void 0 : options.height,
+            background: options === null || options === void 0 ? void 0 : options.background,
+            theme: this.theme,
+            canvasProvider: this.canvasProvider,
+            name: options === null || options === void 0 ? void 0 : options.name,
+            sequenceProvider: this.sequenceProvider,
+        });
+        const dataSource = new MemoryDataSource(features);
+        if (this.cumulativeOffsets) {
+            dataSource.setCumulativeOffsets(this.cumulativeOffsets);
+        }
+        if (this.genome) {
+            dataSource.setChromNameResolver(alias => this.genome.getChromosomeName(alias));
+        }
+        const dataSourceConfig = { type: 'memory' };
+        this.addTrack(track, dataSource, dataSourceConfig, options === null || options === void 0 ? void 0 : options.maxTrackHeight);
+        if (options === null || options === void 0 ? void 0 : options.metadata)
+            this.managedTracks[this.managedTracks.length - 1].metadata = options.metadata;
+        return track;
+    }
+    /** Add a BED/annotation track backed by in-memory features (no URL required). Features must include `chr`. */
+    addBedTrackWithFeatures(features, options) {
+        const { canvas } = this.canvasProvider.createCanvas(0, 0);
+        const track = new AnnotationTrackCanvas(canvas, {
+            locus: this._locus,
+            features: [],
+            config: options === null || options === void 0 ? void 0 : options.config,
+            height: options === null || options === void 0 ? void 0 : options.height,
+            background: options === null || options === void 0 ? void 0 : options.background,
+            theme: this.theme,
+            canvasProvider: this.canvasProvider,
+            workerProvider: this.workerProvider,
+            name: options === null || options === void 0 ? void 0 : options.name,
+        });
+        const dataSource = new MemoryDataSource(features);
+        if (this.cumulativeOffsets) {
+            dataSource.setCumulativeOffsets(this.cumulativeOffsets);
+        }
+        if (this.genome) {
+            dataSource.setChromNameResolver(alias => this.genome.getChromosomeName(alias));
+        }
+        const dataSourceConfig = { type: 'memory' };
+        this.addTrack(track, dataSource, dataSourceConfig, options === null || options === void 0 ? void 0 : options.maxTrackHeight);
+        if (options === null || options === void 0 ? void 0 : options.metadata)
+            this.managedTracks[this.managedTracks.length - 1].metadata = options.metadata;
+        return track;
+    }
     /** Add a DNA/RNA sequence track. Data fetching is handled automatically via the genome's sequence provider. */
     addSequenceTrack(options) {
         const trackConfig = { type: 'sequence', config: options === null || options === void 0 ? void 0 : options.config };
@@ -12472,6 +12600,23 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
 
 const GenomeBrowserContext = createContext(null);
 
+/** Infer the shell theme from a RenderTheme's palette. */
+function inferShellTheme(theme) {
+    var _a;
+    const bg = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.background;
+    if (!bg)
+        return 'modern';
+    // Simple luminance check: dark backgrounds → dark shell theme
+    const el = document.createElement('canvas');
+    const ctx = el.getContext('2d');
+    ctx.fillStyle = bg;
+    const hex = ctx.fillStyle; // normalized to #rrggbb
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance < 0.5 ? 'dark' : 'modern';
+}
 const LoomBrowser = forwardRef(function LoomBrowser(props, ref) {
     const { defaultLocus, locus, onLocusChange, theme, genome, interactive, wheelZoom, workerProvider, popupProvider, contextMenuProvider, ruler, genes, sequence, session, tracks: trackConfigs, remoteSocket, className, style, children, } = props;
     const containerRef = useRef(null);
@@ -12614,7 +12759,8 @@ const LoomBrowser = forwardRef(function LoomBrowser(props, ref) {
         attachRemote(socket) { var _a; (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.attachRemote(socket); },
         detachRemote() { var _a; (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.detachRemote(); },
     }), [browser]);
-    const ctxValue = useMemo(() => ({ browser }), [browser]);
+    const shellTheme = useMemo(() => inferShellTheme(theme), [theme]);
+    const ctxValue = useMemo(() => ({ browser, shellTheme }), [browser, shellTheme]);
     return (jsx(GenomeBrowserContext.Provider, { value: ctxValue, children: jsxs("div", { className: className, style: style, children: [browser && children, jsx("div", { ref: containerRef })] }) }));
 });
 
@@ -12723,8 +12869,15 @@ function RulerTrack({ config, maxTrackHeight }) {
     return null;
 }
 
-function WigTrack({ url, config, height, background, windowFunction, maxTrackHeight, name, metadata }) {
-    useTrackManager((browser) => browser.addWigTrack(url, { config, height, background, windowFunction, maxTrackHeight, name, metadata }), [url, windowFunction], (track) => { if (config)
+function WigTrack({ url, features, config, height, background, windowFunction, maxTrackHeight, name, metadata }) {
+    useTrackManager((browser) => {
+        if (features) {
+            return browser.addWigTrackWithFeatures(features, { config, height, background, maxTrackHeight, name, metadata });
+        }
+        if (!url)
+            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]);
     return null;
 }
@@ -12735,8 +12888,15 @@ function GeneTrack({ config, height, background, genome, track, maxTrackHeight,
     return null;
 }
 
-function BedTrack({ url, config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }) {
-    useTrackManager((browser) => browser.addBedTrack(url, { config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }), [url, format, indexURL, indexed], (track) => { if (config)
+function BedTrack({ url, features, config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }) {
+    useTrackManager((browser) => {
+        if (features) {
+            return browser.addBedTrackWithFeatures(features, { 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]);
     return null;
 }
@@ -13387,15 +13547,126 @@ function ExportControls({ browser: browserProp }) {
     return jsx("loom-export-controls", { ref: ref });
 }
 
-function Navbar({ browser: browserProp }) {
+/**
+ * CSS custom property themes for UI shell web components.
+ *
+ * Themes are injected as <style> blocks into Shadow DOM roots.
+ * Components reference CSS custom properties (--loom-*) for all visual styling.
+ */
+/** Classic theme — matches igv.js navbar look. */
+const classicThemeCSS = /* css */ `
+:host {
+    --loom-navbar-bg: #f3f3f3;
+    --loom-navbar-height: 32px;
+    --loom-navbar-padding: 0 8px;
+    --loom-font: 12px Arial, sans-serif;
+    --loom-font-small: 11px Arial, sans-serif;
+    --loom-text-color: #333;
+    --loom-text-muted: #737373;
+    --loom-border: 1px solid #ccc;
+    --loom-border-radius: 4px;
+    --loom-button-bg: white;
+    --loom-button-hover: #e8e8e8;
+    --loom-button-border: 1px solid #b0b0b0;
+    --loom-button-size: 24px;
+    --loom-input-bg: white;
+    --loom-input-border: 1px solid #b0b0b0;
+    --loom-input-focus-border: 1px solid #4A90D9;
+    --loom-input-width: 220px;
+    --loom-input-height: 22px;
+    --loom-accent: #4A90D9;
+    --loom-icon-color: #555;
+    --loom-icon-size: 14px;
+    --loom-gap: 8px;
+}
+`;
+/** Modern theme — softer colors, rounded corners, taller navbar. */
+const modernThemeCSS = /* css */ `
+:host {
+    --loom-navbar-bg: #fafbfc;
+    --loom-navbar-height: 40px;
+    --loom-navbar-padding: 0 12px;
+    --loom-font: 13px Inter, system-ui, -apple-system, sans-serif;
+    --loom-font-small: 11px Inter, system-ui, -apple-system, sans-serif;
+    --loom-text-color: #1a1a1a;
+    --loom-text-muted: #6b7280;
+    --loom-border: 1px solid rgba(0, 0, 0, 0.08);
+    --loom-border-radius: 8px;
+    --loom-button-bg: white;
+    --loom-button-hover: #f0f4ff;
+    --loom-button-border: 1px solid rgba(0, 0, 0, 0.1);
+    --loom-button-size: 28px;
+    --loom-input-bg: white;
+    --loom-input-border: 1px solid rgba(0, 0, 0, 0.12);
+    --loom-input-focus-border: 1px solid #4A90D9;
+    --loom-input-width: 260px;
+    --loom-input-height: 28px;
+    --loom-accent: #4A90D9;
+    --loom-icon-color: #6b7280;
+    --loom-icon-size: 16px;
+    --loom-gap: 10px;
+}
+`;
+/** Dark theme — dark backgrounds, light text, high contrast. */
+const darkThemeCSS = /* css */ `
+:host {
+    --loom-shell-bg: #16162a;
+    --loom-navbar-bg: #1a1a2e;
+    --loom-navbar-height: 36px;
+    --loom-navbar-padding: 0 10px;
+    --loom-font: 12px Arial, sans-serif;
+    --loom-font-small: 11px Arial, sans-serif;
+    --loom-text-color: #e0e0e0;
+    --loom-text-muted: #888;
+    --loom-border: 1px solid #333;
+    --loom-border-radius: 4px;
+    --loom-button-bg: #2a2a3e;
+    --loom-button-hover: #3a3a50;
+    --loom-button-border: 1px solid #444;
+    --loom-button-size: 24px;
+    --loom-input-bg: #2a2a3e;
+    --loom-input-border: 1px solid #444;
+    --loom-input-focus-border: 1px solid #6a9fd9;
+    --loom-input-width: 220px;
+    --loom-input-height: 22px;
+    --loom-accent: #6a9fd9;
+    --loom-icon-color: #b0b0b0;
+    --loom-icon-size: 14px;
+    --loom-gap: 8px;
+}
+`;
+function getThemeCSS(theme) {
+    if (theme === 'modern')
+        return modernThemeCSS;
+    if (theme === 'dark')
+        return darkThemeCSS;
+    return classicThemeCSS;
+}
+
+function Navbar({ browser: browserProp, theme: themeProp }) {
+    var _a;
+    const ctx = useContext(GenomeBrowserContext);
     const contextBrowser = useGenomeBrowser();
     const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const theme = (_a = themeProp !== null && themeProp !== void 0 ? themeProp : ctx === null || ctx === void 0 ? void 0 : ctx.shellTheme) !== null && _a !== void 0 ? _a : 'modern';
     const ref = useRef(null);
+    const styleRef = useRef(null);
     ensureRegistered();
     useEffect(() => {
         if (ref.current)
             ref.current.browser = browser;
     }, [browser]);
+    // Inject shell theme CSS into the navbar's shadow root
+    useEffect(() => {
+        const el = ref.current;
+        if (!(el === null || el === void 0 ? void 0 : el.shadowRoot))
+            return;
+        if (!styleRef.current) {
+            styleRef.current = document.createElement('style');
+            el.shadowRoot.prepend(styleRef.current);
+        }
+        styleRef.current.textContent = getThemeCSS(theme);
+    }, [theme]);
     return jsx("loom-navbar", { ref: ref });
 }