@jbrowse/plugin-canvas 4.0.0

package/esm/CanvasFeatureRenderer/glyphs/box.js

@@ -0,0 +1,87 @@
+import { readCachedConfig } from "../renderConfig.js";
+import { getBoxColor, getStrokeColor, isOffScreen, isUTR } from "../util.js";
+import { drawStrandArrow, getStrandArrowPadding } from "./glyphUtils.js";
+const UTR_HEIGHT_FRACTION = 0.65;
+export const boxGlyph = {
+    type: 'Box',
+    match(feature) {
+        const type = feature.get('type');
+        if (type === 'CDS') {
+            return false;
+        }
+        const subfeatures = feature.get('subfeatures');
+        return !subfeatures?.length;
+    },
+    layout(args) {
+        const { feature, bpPerPx, reversed, configContext } = args;
+        const { config, displayMode, featureHeight } = configContext;
+        const height = readCachedConfig(featureHeight, config, 'height', feature);
+        const baseHeight = displayMode === 'compact' ? height / 2 : height;
+        const width = (feature.get('end') - feature.get('start')) / bpPerPx;
+        const isTopLevel = !feature.parent?.();
+        const strand = feature.get('strand');
+        const arrowPadding = isTopLevel
+            ? getStrandArrowPadding(strand, reversed)
+            : { left: 0, right: 0 };
+        return {
+            feature,
+            glyphType: 'Box',
+            x: 0,
+            y: 0,
+            width,
+            height: baseHeight,
+            totalLayoutHeight: baseHeight,
+            totalLayoutWidth: width + arrowPadding.left + arrowPadding.right,
+            leftPadding: arrowPadding.left,
+            children: [],
+        };
+    },
+    draw(ctx, layout, dc) {
+        const { feature } = layout;
+        const { region, bpPerPx, configContext, theme, canvasWidth } = dc;
+        const { config } = configContext;
+        const colorByCDS = dc.colorByCDS ?? false;
+        const { start, end } = region;
+        const screenWidth = Math.ceil((end - start) / bpPerPx);
+        const width = layout.width;
+        const left = layout.x;
+        if (isOffScreen(left, width, canvasWidth) ||
+            (feature.parent?.() && feature.get('type') === 'intron')) {
+            return;
+        }
+        let top = layout.y;
+        let height = layout.height;
+        if (isUTR(feature)) {
+            top += ((1 - UTR_HEIGHT_FRACTION) / 2) * height;
+            height *= UTR_HEIGHT_FRACTION;
+        }
+        const leftWithinBlock = Math.max(left, 0);
+        const diff = leftWithinBlock - left;
+        const widthWithinBlock = Math.max(2, Math.min(width - diff, screenWidth));
+        const fill = getBoxColor({
+            feature,
+            config,
+            configContext,
+            colorByCDS,
+            theme,
+        });
+        const stroke = readCachedConfig(configContext.outline, config, 'outline', feature);
+        ctx.fillStyle = fill;
+        ctx.fillRect(leftWithinBlock, top, widthWithinBlock, height);
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+            ctx.lineWidth = 1;
+            ctx.strokeRect(leftWithinBlock, top, widthWithinBlock, height);
+        }
+        const isTopLevel = !feature.parent?.();
+        if (isTopLevel) {
+            const strokeColor = getStrokeColor({
+                feature,
+                config,
+                configContext,
+                theme,
+            });
+            drawStrandArrow(ctx, layout, dc, strokeColor);
+        }
+    },
+};

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

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

package/esm/CanvasFeatureRenderer/glyphs/cds.js

@@ -0,0 +1,93 @@
+import { drawCDSBackground } from "../peptides/drawCDSBackground.js";
+import { drawPeptidesOnCDS } from "../peptides/drawPeptidesOnCDS.js";
+import { prepareAminoAcidData } from "../peptides/prepareAminoAcidData.js";
+import { readCachedConfig } from "../renderConfig.js";
+import { getBoxColor, isOffScreen } from "../util.js";
+import { shouldRenderPeptideBackground, shouldRenderPeptideText, } from "../zoomThresholds.js";
+import { boxGlyph } from "./box.js";
+export const cdsGlyph = {
+    type: 'CDS',
+    match(feature) {
+        return feature.get('type') === 'CDS';
+    },
+    layout(args) {
+        const { feature, bpPerPx, configContext } = args;
+        const { config, displayMode, featureHeight } = configContext;
+        const height = readCachedConfig(featureHeight, config, 'height', feature);
+        const baseHeight = displayMode === 'compact' ? height / 2 : height;
+        const width = (feature.get('end') - feature.get('start')) / bpPerPx;
+        return {
+            feature,
+            glyphType: 'CDS',
+            x: 0,
+            y: 0,
+            width,
+            height: baseHeight,
+            totalLayoutHeight: baseHeight,
+            totalLayoutWidth: width,
+            leftPadding: 0,
+            children: [],
+        };
+    },
+    draw(ctx, layout, dc) {
+        const { feature } = layout;
+        const { region, bpPerPx, configContext, theme, canvasWidth, peptideDataMap, } = dc;
+        const { config } = configContext;
+        const colorByCDS = dc.colorByCDS ?? false;
+        const reversed = region.reversed ?? false;
+        const featureStart = feature.get('start');
+        const featureEnd = feature.get('end');
+        const strand = feature.get('strand');
+        const width = layout.width;
+        const left = layout.x;
+        const top = layout.y;
+        const height = layout.height;
+        if (isOffScreen(left, width, canvasWidth)) {
+            return;
+        }
+        const parent = feature.parent?.() ?? feature;
+        const peptideData = peptideDataMap?.get(parent.id());
+        const protein = peptideData?.protein;
+        const doRenderBackground = shouldRenderPeptideBackground(bpPerPx) && colorByCDS && !!protein;
+        if (doRenderBackground) {
+            const aggregatedAminoAcids = prepareAminoAcidData(parent, protein, featureStart, featureEnd, strand);
+            const baseColor = getBoxColor({
+                feature,
+                config,
+                configContext,
+                colorByCDS,
+                theme,
+            });
+            drawCDSBackground({
+                ctx,
+                aggregatedAminoAcids,
+                baseColor,
+                left,
+                top,
+                width,
+                height,
+                bpPerPx,
+                strand,
+                reversed,
+                canvasWidth,
+            });
+            if (shouldRenderPeptideText(bpPerPx)) {
+                drawPeptidesOnCDS({
+                    ctx,
+                    aggregatedAminoAcids,
+                    left,
+                    top,
+                    width,
+                    height,
+                    bpPerPx,
+                    strand,
+                    reversed,
+                    canvasWidth,
+                });
+            }
+        }
+        else {
+            boxGlyph.draw(ctx, { ...layout, glyphType: 'Box' }, dc);
+        }
+    },
+};

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

@@ -0,0 +1,5 @@
+import type { RenderConfigContext } from '../renderConfig.ts';
+import type { Glyph } from '../types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare const childGlyphs: Glyph[];
+export declare function findChildGlyph(feature: Feature, configContext: RenderConfigContext): Glyph;

package/esm/CanvasFeatureRenderer/glyphs/childGlyphs.js

@@ -0,0 +1,18 @@
+import { boxGlyph } from "./box.js";
+import { cdsGlyph } from "./cds.js";
+import { findGlyph } from "./index.js";
+import { matureProteinRegionGlyph } from "./matureProteinRegion.js";
+import { processedTranscriptGlyph } from "./processed.js";
+import { repeatRegionGlyph } from "./repeatRegion.js";
+import { segmentsGlyph } from "./segments.js";
+export const childGlyphs = [
+    matureProteinRegionGlyph,
+    repeatRegionGlyph,
+    cdsGlyph,
+    processedTranscriptGlyph,
+    segmentsGlyph,
+    boxGlyph,
+];
+export function findChildGlyph(feature, configContext) {
+    return findGlyph(feature, configContext, childGlyphs);
+}

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

@@ -0,0 +1,14 @@
+import type { DrawContext, FeatureLayout, Glyph, LayoutArgs } from '../types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare const STRAND_ARROW_WIDTH = 8;
+export declare function getStrandArrowPadding(strand: number, reversed: boolean): {
+    left: number;
+    right: number;
+    visualSide: string | null;
+    width: number;
+};
+export declare function layoutChild(child: Feature, parentFeature: Feature, args: LayoutArgs, glyphType?: string): FeatureLayout;
+export declare function drawConnectingLine(ctx: CanvasRenderingContext2D, left: number, top: number, width: number, height: number, color: string): void;
+export declare function drawStrandArrowAtPosition(ctx: CanvasRenderingContext2D, left: number, centerY: number, width: number, strand: number, reversed: boolean, color: string): void;
+export declare function drawStrandArrow(ctx: CanvasRenderingContext2D, layout: FeatureLayout, dc: DrawContext, color: string): void;
+export declare function drawSegmentedFeature(ctx: CanvasRenderingContext2D, layout: FeatureLayout, dc: DrawContext, boxGlyph: Glyph, cdsGlyph: Glyph): void;

package/esm/CanvasFeatureRenderer/glyphs/glyphUtils.js

@@ -0,0 +1,125 @@
+import { drawChevrons } from "../drawChevrons.js";
+import { readCachedConfig } from "../renderConfig.js";
+import { getStrokeColor, isOffScreen } from "../util.js";
+export const STRAND_ARROW_WIDTH = 8;
+export function getStrandArrowPadding(strand, reversed) {
+    const reverseFlip = reversed ? -1 : 1;
+    const effectiveStrand = strand * reverseFlip;
+    return {
+        left: effectiveStrand === -1 ? STRAND_ARROW_WIDTH : 0,
+        right: effectiveStrand === 1 ? STRAND_ARROW_WIDTH : 0,
+        visualSide: effectiveStrand === -1 ? 'left' : effectiveStrand === 1 ? 'right' : null,
+        width: strand ? STRAND_ARROW_WIDTH : 0,
+    };
+}
+export function layoutChild(child, parentFeature, args, glyphType = 'Box') {
+    const { bpPerPx, reversed, configContext } = args;
+    const { config, displayMode, featureHeight } = configContext;
+    const heightPx = readCachedConfig(featureHeight, config, 'height', child);
+    const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+    const childStart = child.get('start');
+    const childEnd = child.get('end');
+    const parentStart = parentFeature.get('start');
+    const parentEnd = parentFeature.get('end');
+    const widthPx = (childEnd - childStart) / bpPerPx;
+    const offsetBp = reversed ? parentEnd - childEnd : childStart - parentStart;
+    const xRelativePx = offsetBp / bpPerPx;
+    return {
+        feature: child,
+        glyphType: glyphType,
+        x: xRelativePx,
+        y: 0,
+        width: widthPx,
+        height: baseHeightPx,
+        totalLayoutHeight: baseHeightPx,
+        totalLayoutWidth: widthPx,
+        leftPadding: 0,
+        children: [],
+    };
+}
+export function drawConnectingLine(ctx, left, top, width, height, color) {
+    const centerY = top + height / 2;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(left, centerY);
+    ctx.lineTo(left + width, centerY);
+    ctx.stroke();
+}
+export function drawStrandArrowAtPosition(ctx, left, centerY, width, strand, reversed, color) {
+    const arrowSize = 5;
+    const reverseFlip = reversed ? -1 : 1;
+    const arrowOffset = 7 * strand * reverseFlip;
+    const arrowX = strand * reverseFlip === -1
+        ? left
+        : strand * reverseFlip === 1
+            ? left + width
+            : null;
+    if (arrowX !== null) {
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(arrowX, centerY);
+        ctx.lineTo(arrowX + arrowOffset, centerY);
+        ctx.stroke();
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(arrowX + arrowOffset / 2, centerY - arrowSize / 2);
+        ctx.lineTo(arrowX + arrowOffset / 2, centerY + arrowSize / 2);
+        ctx.lineTo(arrowX + arrowOffset, centerY);
+        ctx.closePath();
+        ctx.fill();
+    }
+}
+export function drawStrandArrow(ctx, layout, dc, color) {
+    const { feature } = layout;
+    const { region, canvasWidth } = dc;
+    const reversed = region.reversed ?? false;
+    const left = layout.x;
+    const width = layout.width;
+    if (isOffScreen(left, width, canvasWidth)) {
+        return;
+    }
+    const strand = feature.get('strand');
+    if (!strand) {
+        return;
+    }
+    const centerY = layout.y + layout.height / 2;
+    drawStrandArrowAtPosition(ctx, left, centerY, width, strand, reversed, color);
+}
+export function drawSegmentedFeature(ctx, layout, dc, boxGlyph, cdsGlyph) {
+    const { feature, children } = layout;
+    const { region, configContext, theme, canvasWidth } = dc;
+    const { config, displayDirectionalChevrons } = configContext;
+    const reversed = region.reversed ?? false;
+    const left = layout.x;
+    const width = layout.width;
+    const top = layout.y;
+    const height = layout.height;
+    if (isOffScreen(left, width, canvasWidth)) {
+        return;
+    }
+    const strokeColor = getStrokeColor({
+        feature,
+        config,
+        configContext,
+        theme,
+    });
+    drawConnectingLine(ctx, left, top, width, height, strokeColor);
+    if (displayDirectionalChevrons) {
+        const strand = feature.get('strand');
+        if (strand) {
+            const effectiveStrand = reversed ? -strand : strand;
+            drawChevrons(ctx, left, top + height / 2, width, effectiveStrand, strokeColor);
+        }
+    }
+    for (const childLayout of children) {
+        if (childLayout.glyphType === 'CDS') {
+            cdsGlyph.draw(ctx, childLayout, dc);
+        }
+        else {
+            boxGlyph.draw(ctx, childLayout, dc);
+        }
+    }
+    drawStrandArrow(ctx, layout, dc, strokeColor);
+}

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

@@ -0,0 +1,9 @@
+import type { RenderConfigContext } from '../renderConfig.ts';
+import type { Glyph } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type GlyphType from '@jbrowse/core/pluggableElementTypes/GlyphType';
+import type { Feature } from '@jbrowse/core/util';
+export declare const builtinGlyphs: Glyph[];
+export declare function findGlyph(feature: Feature, configContext: RenderConfigContext, glyphs?: Glyph[]): Glyph;
+export declare function findPluggableGlyph(feature: Feature, pluginManager?: PluginManager): GlyphType | undefined;
+export { boxGlyph } from './box.ts';

package/esm/CanvasFeatureRenderer/glyphs/index.js

@@ -0,0 +1,29 @@
+import { boxGlyph } from "./box.js";
+import { cdsGlyph } from "./cds.js";
+import { matureProteinRegionGlyph } from "./matureProteinRegion.js";
+import { processedTranscriptGlyph } from "./processed.js";
+import { repeatRegionGlyph } from "./repeatRegion.js";
+import { segmentsGlyph } from "./segments.js";
+import { subfeaturesGlyph } from "./subfeatures.js";
+export const builtinGlyphs = [
+    matureProteinRegionGlyph,
+    repeatRegionGlyph,
+    cdsGlyph,
+    processedTranscriptGlyph,
+    subfeaturesGlyph,
+    segmentsGlyph,
+    boxGlyph,
+];
+export function findGlyph(feature, configContext, glyphs = builtinGlyphs) {
+    const match = glyphs.find(g => g.match(feature, configContext));
+    return match ?? boxGlyph;
+}
+export function findPluggableGlyph(feature, pluginManager) {
+    if (!pluginManager) {
+        return undefined;
+    }
+    const glyphTypes = pluginManager.getGlyphTypes();
+    const sortedGlyphs = [...glyphTypes].sort((a, b) => b.priority - a.priority);
+    return sortedGlyphs.find(glyph => glyph.match?.(feature));
+}
+export { boxGlyph } from "./box.js";

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

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

package/esm/CanvasFeatureRenderer/glyphs/matureProteinRegion.js

@@ -0,0 +1,121 @@
+import { readCachedConfig } from "../renderConfig.js";
+import { isOffScreen } from "../util.js";
+import { drawStrandArrowAtPosition, layoutChild } from "./glyphUtils.js";
+const MATURE_PROTEIN_COLORS = [
+    '#1f77b4',
+    '#ff7f0e',
+    '#2ca02c',
+    '#d62728',
+    '#9467bd',
+    '#8c564b',
+    '#e377c2',
+    '#7f7f7f',
+    '#bcbd22',
+    '#17becf',
+    '#aec7e8',
+    '#ffbb78',
+];
+const MATURE_PROTEIN_TYPES = new Set([
+    'mature_protein_region_of_CDS',
+    'mature_protein_region',
+]);
+function getMatureProteinChildren(feature) {
+    const subfeatures = feature.get('subfeatures');
+    return (subfeatures?.filter(sub => MATURE_PROTEIN_TYPES.has(sub.get('type'))) ?? []);
+}
+function sortByPosition(children) {
+    return [...children].sort((a, b) => {
+        const aStart = a.feature.get('start');
+        const bStart = b.feature.get('start');
+        if (aStart !== bStart) {
+            return aStart - bStart;
+        }
+        return b.feature.get('end') - a.feature.get('end');
+    });
+}
+export const matureProteinRegionGlyph = {
+    type: 'MatureProteinRegion',
+    hasIndexableChildren: true,
+    match(feature) {
+        if (feature.get('type') !== 'CDS') {
+            return false;
+        }
+        return getMatureProteinChildren(feature).length > 0;
+    },
+    getSubfeatureMouseover(feature) {
+        const product = feature.get('product');
+        const proteinId = feature.get('protein_id');
+        const parts = [];
+        if (product) {
+            parts.push(product);
+        }
+        if (proteinId) {
+            parts.push(`(${proteinId})`);
+        }
+        return parts.length > 0 ? parts.join(' ') : undefined;
+    },
+    layout(args) {
+        const { feature, bpPerPx, configContext } = args;
+        const { config, displayMode, featureHeight, subfeatureLabels } = configContext;
+        const start = feature.get('start');
+        const end = feature.get('end');
+        const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
+        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const widthPx = (end - start) / bpPerPx;
+        const matureProteins = getMatureProteinChildren(feature);
+        const children = matureProteins.map(child => layoutChild(child, feature, args));
+        const sortedChildren = sortByPosition(children);
+        const numRows = Math.max(1, sortedChildren.length);
+        const perRowMultiplier = subfeatureLabels === 'below' ? 2 : 1;
+        const rowHeight = baseHeightPx * perRowMultiplier;
+        const totalHeight = rowHeight * numRows;
+        const padding = 1;
+        const boxHeight = subfeatureLabels === 'below'
+            ? Math.floor(rowHeight / 2) - padding
+            : rowHeight - padding * 2;
+        for (const [i, sortedChild] of sortedChildren.entries()) {
+            const child = sortedChild;
+            child.y = i * rowHeight + padding;
+            child.height = boxHeight;
+            child.totalLayoutHeight = rowHeight;
+        }
+        return {
+            feature,
+            glyphType: 'MatureProteinRegion',
+            x: 0,
+            y: 0,
+            width: widthPx,
+            height: totalHeight,
+            totalLayoutHeight: totalHeight,
+            totalLayoutWidth: widthPx,
+            leftPadding: 0,
+            children: sortedChildren,
+        };
+    },
+    draw(ctx, layout, dc) {
+        const { children } = layout;
+        const { region, theme, canvasWidth } = dc;
+        const reversed = region.reversed ?? false;
+        const arrowColor = theme.palette.text.secondary;
+        for (const [i, childLayout] of children.entries()) {
+            const color = MATURE_PROTEIN_COLORS[i % MATURE_PROTEIN_COLORS.length];
+            drawMatureProteinBox(ctx, childLayout, canvasWidth, color, reversed, arrowColor);
+        }
+    },
+};
+function drawMatureProteinBox(ctx, childLayout, canvasWidth, color, reversed, arrowColor) {
+    const { x: left, y: boxTop, width, height: boxHeight, feature } = childLayout;
+    if (isOffScreen(left, width, canvasWidth)) {
+        return;
+    }
+    ctx.fillStyle = color;
+    ctx.fillRect(left, boxTop, width, boxHeight);
+    ctx.strokeStyle = 'rgba(0,0,0,0.3)';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(left, boxTop, width, boxHeight);
+    const strand = feature.get('strand');
+    if (strand) {
+        const centerY = boxTop + boxHeight / 2;
+        drawStrandArrowAtPosition(ctx, left, centerY, width, strand, reversed, arrowColor);
+    }
+}

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

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

package/esm/CanvasFeatureRenderer/glyphs/processed.js

@@ -0,0 +1,53 @@
+import { getSubparts } from "../filterSubparts.js";
+import { readCachedConfig } from "../renderConfig.js";
+import { boxGlyph } from "./box.js";
+import { cdsGlyph } from "./cds.js";
+import { drawSegmentedFeature, getStrandArrowPadding, layoutChild, } from "./glyphUtils.js";
+export const processedTranscriptGlyph = {
+    type: 'ProcessedTranscript',
+    match(feature, configContext) {
+        const type = feature.get('type');
+        const subfeatures = feature.get('subfeatures');
+        if (!subfeatures?.length) {
+            return false;
+        }
+        const { transcriptTypes } = configContext;
+        if (!transcriptTypes.includes(type)) {
+            return false;
+        }
+        const hasCDS = subfeatures.some((f) => f.get('type') === 'CDS');
+        return hasCDS;
+    },
+    layout(args) {
+        const { feature, bpPerPx, reversed, configContext } = args;
+        const { config, displayMode, featureHeight } = configContext;
+        const start = feature.get('start');
+        const end = feature.get('end');
+        const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
+        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const widthPx = (end - start) / bpPerPx;
+        const strand = feature.get('strand');
+        const arrowPadding = getStrandArrowPadding(strand, reversed);
+        const subparts = getSubparts(feature, config);
+        const children = subparts.map(child => {
+            const childType = child.get('type');
+            const glyphType = childType === 'CDS' ? 'CDS' : 'Box';
+            return layoutChild(child, feature, args, glyphType);
+        });
+        return {
+            feature,
+            glyphType: 'ProcessedTranscript',
+            x: 0,
+            y: 0,
+            width: widthPx,
+            height: baseHeightPx,
+            totalLayoutHeight: baseHeightPx,
+            totalLayoutWidth: widthPx + arrowPadding.left + arrowPadding.right,
+            leftPadding: arrowPadding.left,
+            children,
+        };
+    },
+    draw(ctx, layout, dc) {
+        drawSegmentedFeature(ctx, layout, dc, boxGlyph, cdsGlyph);
+    },
+};

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

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