@jbrowse/plugin-canvas 4.0.0

package/esm/CanvasFeatureRenderer/configSchema.js

@@ -0,0 +1,152 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from '@jbrowse/mobx-state-tree';
+function x() { }
+const CanvasFeatureRenderer = ConfigurationSchema('CanvasFeatureRenderer', {
+    color1: {
+        type: 'color',
+        description: 'the main color of each feature',
+        defaultValue: 'goldenrod',
+        contextVariable: ['feature'],
+    },
+    color2: {
+        type: 'color',
+        description: 'the secondary color of each feature, used for connecting lines, etc',
+        defaultValue: '#f0f',
+        contextVariable: ['feature'],
+    },
+    color3: {
+        type: 'color',
+        description: 'the tertiary color of each feature, often used for contrasting fills, like on UTRs',
+        defaultValue: '#357089',
+        contextVariable: ['feature'],
+    },
+    outline: {
+        type: 'color',
+        description: 'the outline for features',
+        defaultValue: '',
+        contextVariable: ['feature'],
+    },
+    height: {
+        type: 'number',
+        description: 'height in pixels of the main body of each feature',
+        defaultValue: 10,
+        contextVariable: ['feature'],
+    },
+    showLabels: {
+        type: 'boolean',
+        defaultValue: true,
+    },
+    showDescriptions: {
+        type: 'boolean',
+        defaultValue: true,
+    },
+    subfeatureLabels: {
+        type: 'stringEnum',
+        model: types.enumeration('subfeatureLabels', [
+            'none',
+            'below',
+            'overlay',
+        ]),
+        description: 'subfeature label display: "none" hides labels, "below" reserves extra space, "overlay" draws on top of feature',
+        defaultValue: 'none',
+    },
+    mouseover: {
+        type: 'string',
+        description: 'the mouseover tooltip label for features. Available variables: feature (the feature object), label (evaluated name), description (evaluated description)',
+        defaultValue: `jexl:get(feature,'_mouseover') || get(feature,'_mouseOver') || (label && description ? label + '<br/>' + description : (label || description || ''))`,
+        contextVariable: ['feature', 'label', 'description'],
+    },
+    subfeatureMouseover: {
+        type: 'string',
+        description: 'the mouseover tooltip label for subfeatures (e.g. transcripts). Available variables: feature (the subfeature object)',
+        defaultValue: `jexl:get(feature,'name') || get(feature,'id')`,
+        contextVariable: ['feature'],
+    },
+    labels: ConfigurationSchema('CanvasFeatureLabels', {
+        name: {
+            type: 'string',
+            description: 'the primary name of the feature to show, if space is available',
+            defaultValue: `jexl:get(feature,'name') || get(feature,'id')`,
+            contextVariable: ['feature'],
+        },
+        nameColor: {
+            type: 'color',
+            description: 'the color of the name label, if shown',
+            defaultValue: '#f0f',
+            contextVariable: ['feature'],
+        },
+        description: {
+            type: 'string',
+            description: 'the text description to show, if space is available',
+            defaultValue: `jexl:get(feature,'note') || get(feature,'description')`,
+            contextVariable: ['feature'],
+        },
+        descriptionColor: {
+            type: 'color',
+            description: 'the color of the description, if shown',
+            defaultValue: 'blue',
+            contextVariable: ['feature'],
+        },
+        fontSize: {
+            type: 'number',
+            description: 'height in pixels of the text to use for names and descriptions',
+            defaultValue: 12,
+            contextVariable: ['feature'],
+        },
+    }),
+    displayMode: {
+        type: 'stringEnum',
+        model: types.enumeration('displayMode', [
+            'normal',
+            'compact',
+            'reducedRepresentation',
+            'collapse',
+        ]),
+        description: 'Alternative display modes',
+        defaultValue: 'normal',
+    },
+    maxFeatureGlyphExpansion: {
+        type: 'number',
+        description: "maximum number of pixels on each side of a feature's bounding coordinates that a glyph is allowed to use",
+        defaultValue: 500,
+    },
+    maxHeight: {
+        type: 'integer',
+        description: 'the maximum height to be used in a rendering',
+        defaultValue: 5000,
+    },
+    subParts: {
+        type: 'string',
+        description: 'subparts for a glyph',
+        defaultValue: 'CDS,UTR,five_prime_UTR,three_prime_UTR',
+    },
+    impliedUTRs: {
+        type: 'boolean',
+        description: 'imply UTR from the exon and CDS differences',
+        defaultValue: false,
+    },
+    transcriptTypes: {
+        type: 'stringArray',
+        defaultValue: ['mRNA', 'transcript', 'primary_transcript'],
+    },
+    containerTypes: {
+        type: 'stringArray',
+        defaultValue: ['proteoform_orf'],
+    },
+    geneGlyphMode: {
+        type: 'stringEnum',
+        model: types.enumeration('geneGlyphMode', [
+            'all',
+            'longest',
+            'longestCoding',
+        ]),
+        description: 'Gene glyph display mode: "all" shows all transcripts, "longest" shows only the longest transcript, "longestCoding" shows only the longest coding transcript',
+        defaultValue: 'all',
+    },
+    displayDirectionalChevrons: {
+        type: 'boolean',
+        description: 'Display directional chevrons on intron lines to indicate strand direction',
+        defaultValue: true,
+    },
+}, { explicitlyTyped: true });
+export default CanvasFeatureRenderer;

package/esm/CanvasFeatureRenderer/configSchema2.d.ts

@@ -0,0 +1,136 @@
+declare const SvgFeatureRenderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    color1: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    color2: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    color3: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    outline: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    height: {
+        type: string;
+        description: string;
+        defaultValue: number;
+        contextVariable: string[];
+    };
+    showLabels: {
+        type: string;
+        defaultValue: boolean;
+    };
+    showDescriptions: {
+        type: string;
+        defaultValue: boolean;
+    };
+    subfeatureLabels: {
+        type: string;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        description: string;
+        defaultValue: string;
+    };
+    mouseover: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    subfeatureMouseover: {
+        type: string;
+        description: string;
+        defaultValue: string;
+        contextVariable: string[];
+    };
+    labels: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+        name: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        nameColor: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        description: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        descriptionColor: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        fontSize: {
+            type: string;
+            description: string;
+            defaultValue: number;
+            contextVariable: string[];
+        };
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
+    displayMode: {
+        type: string;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        description: string;
+        defaultValue: string;
+    };
+    maxFeatureGlyphExpansion: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    maxHeight: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+    subParts: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    impliedUTRs: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
+    };
+    transcriptTypes: {
+        type: string;
+        defaultValue: string[];
+    };
+    containerTypes: {
+        type: string;
+        defaultValue: string[];
+    };
+    geneGlyphMode: {
+        type: string;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+        description: string;
+        defaultValue: string;
+    };
+    displayDirectionalChevrons: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
+    };
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+export default SvgFeatureRenderer;

package/esm/CanvasFeatureRenderer/configSchema2.js

@@ -0,0 +1,5 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import configSchema from "./configSchema.js";
+function x() { }
+const SvgFeatureRenderer = ConfigurationSchema('SvgFeatureRenderer', {}, { explicitlyTyped: true, baseConfiguration: configSchema });
+export default SvgFeatureRenderer;

package/esm/CanvasFeatureRenderer/doAll.d.ts

@@ -0,0 +1,21 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
+import type { Feature } from '@jbrowse/core/util';
+import type { BaseLayout } from '@jbrowse/core/util/layouts';
+export declare function doAll({ layout, features, renderProps, pluginManager, }: {
+    pluginManager: PluginManager;
+    layout: BaseLayout<unknown>;
+    features: Map<string, Feature>;
+    renderProps: RenderArgsDeserialized;
+}): Promise<{
+    flatbush: ArrayBufferLike;
+    items: import("./types.ts").FlatbushItem[];
+    subfeatureFlatbush: ArrayBufferLike;
+    subfeatureInfos: import("./types.ts").SubfeatureInfo[];
+} & ({
+    canvasRecordedData: Record<string, unknown>;
+} | {
+    imageData: ImageBitmap;
+} | {
+    html: string;
+})>;

package/esm/CanvasFeatureRenderer/doAll.js

@@ -0,0 +1,42 @@
+import { renderToAbstractCanvas, updateStatus } from '@jbrowse/core/util';
+import { layoutFeatures } from "./layout/layoutFeatures.js";
+import { makeImageData } from "./makeImageData.js";
+import { fetchPeptideData } from "./peptides/peptideUtils.js";
+import { createRenderConfigContext } from "./renderConfig.js";
+export async function doAll({ layout, features, renderProps, pluginManager, }) {
+    const { statusCallback = () => { }, regions, bpPerPx, config } = renderProps;
+    const region = regions[0];
+    const width = Math.max(1, (region.end - region.start) / bpPerPx);
+    const configContext = createRenderConfigContext(config);
+    const layoutRecords = await updateStatus('Computing feature layout', statusCallback, async () => {
+        return layoutFeatures({
+            features,
+            bpPerPx,
+            region,
+            configContext,
+            layout,
+            pluginManager,
+        });
+    });
+    const height = Math.max(1, layout.getTotalHeight());
+    const peptideDataMap = await updateStatus('Fetching peptide data', statusCallback, async () => {
+        return fetchPeptideData(pluginManager, renderProps, features);
+    });
+    return updateStatus('Rendering features', statusCallback, async () => {
+        return renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
+            ctx,
+            layoutRecords,
+            canvasWidth: width,
+            renderArgs: {
+                ...renderProps,
+                features,
+                layout,
+                displayMode: configContext.displayMode,
+                peptideDataMap,
+                colorByCDS: renderProps.colorByCDS,
+                pluginManager,
+            },
+            configContext,
+        }));
+    });
+}

package/esm/CanvasFeatureRenderer/drawChevrons.d.ts

@@ -0,0 +1 @@
+export declare function drawChevrons(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, strand: number, color: string, spacing?: number, size?: number): void;

package/esm/CanvasFeatureRenderer/drawChevrons.js

@@ -0,0 +1,25 @@
+export function drawChevrons(ctx, x, y, width, strand, color, spacing = 40, size = 4) {
+    if (strand === 0 || width < spacing) {
+        return;
+    }
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    const halfSize = size / 2;
+    const numChevrons = Math.floor(width / spacing);
+    const startOffset = (width - numChevrons * spacing) / 2 + spacing / 2;
+    for (let i = 0; i < numChevrons; i++) {
+        const cx = x + startOffset + i * spacing;
+        if (strand === 1) {
+            ctx.moveTo(cx - halfSize, y - halfSize);
+            ctx.lineTo(cx + halfSize, y);
+            ctx.lineTo(cx - halfSize, y + halfSize);
+        }
+        else {
+            ctx.moveTo(cx + halfSize, y - halfSize);
+            ctx.lineTo(cx - halfSize, y);
+            ctx.lineTo(cx + halfSize, y + halfSize);
+        }
+    }
+    ctx.stroke();
+}

package/esm/CanvasFeatureRenderer/drawFeature.d.ts

@@ -0,0 +1,3 @@
+import type { DrawContext, FeatureLayout } from './types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+export declare function drawFeature(ctx: CanvasRenderingContext2D, layout: FeatureLayout, drawContext: DrawContext, pluginManager?: PluginManager): void;

package/esm/CanvasFeatureRenderer/drawFeature.js

@@ -0,0 +1,27 @@
+import { boxGlyph, builtinGlyphs, findPluggableGlyph } from "./glyphs/index.js";
+const glyphMap = Object.fromEntries(builtinGlyphs.map(g => [g.type, g]));
+export function drawFeature(ctx, layout, drawContext, pluginManager) {
+    const pluggableGlyph = findPluggableGlyph(layout.feature, pluginManager);
+    if (pluggableGlyph) {
+        pluggableGlyph.draw({
+            ctx,
+            feature: layout.feature,
+            featureLayout: layout,
+            region: drawContext.region,
+            bpPerPx: drawContext.bpPerPx,
+            config: drawContext.configContext.config,
+            theme: drawContext.theme,
+            reversed: drawContext.region.reversed ?? false,
+            topLevel: true,
+            canvasWidth: drawContext.canvasWidth,
+        });
+        return;
+    }
+    const glyph = glyphMap[layout.glyphType];
+    if (glyph) {
+        glyph.draw(ctx, layout, drawContext);
+    }
+    else {
+        boxGlyph.draw(ctx, layout, drawContext);
+    }
+}

package/esm/CanvasFeatureRenderer/filterSubparts.d.ts

@@ -0,0 +1,5 @@
+import { type Feature } from '@jbrowse/core/util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export declare function filterSubpart(feature: Feature, config: AnyConfigurationModel): boolean;
+export declare function makeUTRs(parent: Feature, subs: Feature[]): Feature[];
+export declare function getSubparts(f: Feature, config: AnyConfigurationModel): Feature[];

package/esm/CanvasFeatureRenderer/filterSubparts.js

@@ -0,0 +1,92 @@
+import { readConfObject } from '@jbrowse/core/configuration';
+import { SimpleFeature } from '@jbrowse/core/util';
+import { isUTR } from "./util.js";
+function makeSubpartsFilter(confKey, config) {
+    const filter = readConfObject(config, confKey);
+    const ret = typeof filter === 'string' ? filter.split(/\s*,\s*/) : filter;
+    const lowerRet = new Set(ret.map(t => t.toLowerCase()));
+    return (feature) => lowerRet.has(feature.get('type').toLowerCase());
+}
+export function filterSubpart(feature, config) {
+    return makeSubpartsFilter('subParts', config)(feature);
+}
+export function makeUTRs(parent, subs) {
+    const subparts = [...subs];
+    let codeStart = Number.POSITIVE_INFINITY;
+    let codeEnd = Number.NEGATIVE_INFINITY;
+    let haveLeftUTR;
+    let haveRightUTR;
+    const exons = [];
+    for (const subpart of subparts) {
+        const type = subpart.get('type');
+        if (/^cds/i.test(type)) {
+            if (codeStart > subpart.get('start')) {
+                codeStart = subpart.get('start');
+            }
+            if (codeEnd < subpart.get('end')) {
+                codeEnd = subpart.get('end');
+            }
+        }
+        else if (/exon/i.test(type)) {
+            exons.push(subpart);
+        }
+        else if (isUTR(subpart)) {
+            haveLeftUTR = subpart.get('start') === parent.get('start');
+            haveRightUTR = subpart.get('end') === parent.get('end');
+        }
+    }
+    if (!(exons.length &&
+        codeStart < Number.POSITIVE_INFINITY &&
+        codeEnd > Number.NEGATIVE_INFINITY)) {
+        return subparts;
+    }
+    exons.sort((a, b) => a.get('start') - b.get('start'));
+    const strand = parent.get('strand');
+    let start;
+    let end;
+    if (!haveLeftUTR) {
+        for (const [i, exon] of exons.entries()) {
+            start = exon.get('start');
+            if (start >= codeStart) {
+                break;
+            }
+            end = Math.min(codeStart, exon.get('end'));
+            const type = strand >= 0 ? 'five_prime_UTR' : 'three_prime_UTR';
+            subparts.unshift(new SimpleFeature({
+                parent,
+                id: `${parent.id()}_${type}_${i}`,
+                data: { start, end, strand, type },
+            }));
+        }
+    }
+    if (!haveRightUTR) {
+        for (let i = exons.length - 1; i >= 0; i--) {
+            end = exons[i].get('end');
+            if (end <= codeEnd) {
+                break;
+            }
+            start = Math.max(codeEnd, exons[i].get('start'));
+            const type = strand >= 0 ? 'three_prime_UTR' : 'five_prime_UTR';
+            subparts.push(new SimpleFeature({
+                parent,
+                id: `${parent.id()}_${type}_${i}`,
+                data: { start, end, strand, type },
+            }));
+        }
+    }
+    return subparts;
+}
+export function getSubparts(f, config) {
+    let c = f.get('subfeatures');
+    if (!c || c.length === 0) {
+        return [];
+    }
+    const hasUTRs = c.some(child => isUTR(child));
+    const isTranscript = ['mRNA', 'transcript'].includes(f.get('type'));
+    const impliedUTRs = !hasUTRs && isTranscript;
+    if (impliedUTRs || readConfObject(config, 'impliedUTRs')) {
+        c = makeUTRs(f, c);
+    }
+    const subpartFilter = makeSubpartsFilter('subParts', config);
+    return c.filter(subpartFilter);
+}

package/esm/CanvasFeatureRenderer/floatingLabels.d.ts

@@ -0,0 +1,23 @@
+import type { RenderConfigContext } from './renderConfig.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+import type { FloatingLabelData } from '@jbrowse/plugin-linear-genome-view';
+export declare function createFeatureFloatingLabels({ feature, config, configContext, nameColor, descriptionColor, name: rawName, description: rawDescription, }: {
+    feature: Feature;
+    config: AnyConfigurationModel;
+    configContext: RenderConfigContext;
+    nameColor: string;
+    descriptionColor: string;
+    name: string;
+    description: string;
+}): FloatingLabelData[];
+export declare function createTranscriptFloatingLabel({ displayLabel, featureHeight, subfeatureLabels, color, parentFeatureId, subfeatureId, tooltip, }: {
+    displayLabel: string;
+    featureHeight: number;
+    subfeatureLabels: string;
+    color: string;
+    parentFeatureId: string;
+    subfeatureId: string;
+    tooltip: string;
+}): FloatingLabelData | null;
+export { type FloatingLabelData } from '@jbrowse/plugin-linear-genome-view';

package/esm/CanvasFeatureRenderer/floatingLabels.js

@@ -0,0 +1,65 @@
+import { measureText } from '@jbrowse/core/util';
+import { readCachedConfig } from "./renderConfig.js";
+import { truncateLabel } from "./util.js";
+const FLOATING_LABEL_FONT_SIZE = 11;
+export function createFeatureFloatingLabels({ feature, config, configContext, nameColor, descriptionColor, name: rawName, description: rawDescription, }) {
+    const { showLabels, showDescriptions, fontHeight } = configContext;
+    const name = truncateLabel(rawName);
+    const description = truncateLabel(rawDescription);
+    const shouldShowLabel = /\S/.test(name) && showLabels;
+    const shouldShowDescription = /\S/.test(description) && showDescriptions;
+    if (!shouldShowLabel && !shouldShowDescription) {
+        return [];
+    }
+    const actualFontHeight = readCachedConfig(fontHeight, config, ['labels', 'fontSize'], feature);
+    const floatingLabels = [];
+    if (shouldShowLabel && shouldShowDescription) {
+        floatingLabels.push({
+            text: name,
+            relativeY: 0,
+            color: nameColor,
+            textWidth: measureText(name, FLOATING_LABEL_FONT_SIZE),
+        }, {
+            text: description,
+            relativeY: actualFontHeight,
+            color: descriptionColor,
+            textWidth: measureText(description, FLOATING_LABEL_FONT_SIZE),
+        });
+    }
+    else if (shouldShowLabel) {
+        floatingLabels.push({
+            text: name,
+            relativeY: 0,
+            color: nameColor,
+            textWidth: measureText(name, FLOATING_LABEL_FONT_SIZE),
+        });
+    }
+    else if (shouldShowDescription) {
+        floatingLabels.push({
+            text: description,
+            relativeY: 0,
+            color: descriptionColor,
+            textWidth: measureText(description, FLOATING_LABEL_FONT_SIZE),
+        });
+    }
+    return floatingLabels;
+}
+export function createTranscriptFloatingLabel({ displayLabel, featureHeight, subfeatureLabels, color, parentFeatureId, subfeatureId, tooltip, }) {
+    if (!displayLabel) {
+        return null;
+    }
+    const truncatedName = truncateLabel(displayLabel);
+    const isOverlay = subfeatureLabels === 'overlay';
+    const relativeY = isOverlay ? 2 - featureHeight : 0;
+    return {
+        text: truncatedName,
+        relativeY,
+        color,
+        textWidth: measureText(truncatedName, FLOATING_LABEL_FONT_SIZE),
+        isOverlay,
+        parentFeatureId,
+        subfeatureId,
+        tooltip,
+    };
+}
+export {} from '@jbrowse/plugin-linear-genome-view';

package/esm/CanvasFeatureRenderer/glyphs/box.d.ts

@@ -0,0 +1,2 @@
+import type { Glyph } from '../types.ts';
+export declare const boxGlyph: Glyph;