@jbrowse/plugin-canvas 4.0.0

package/esm/CanvasFeatureRenderer/glyphs/repeatRegion.js

@@ -0,0 +1,104 @@
+import { readCachedConfig } from "../renderConfig.js";
+import { isOffScreen } from "../util.js";
+import { drawConnectingLine, drawStrandArrow, getStrandArrowPadding, layoutChild, } from "./glyphUtils.js";
+const REPEAT_COLOR_MAP = {
+    CACTA_TIR_transposon: '#e6194b',
+    centromeric_repeat: '#3cb44b',
+    Copia_LTR_retrotransposon: '#118119',
+    Gypsy_LTR_retrotransposon: '#4363d8',
+    hAT_TIR_transposon: '#f58231',
+    helitron: '#911eb4',
+    knob: '#46f0f0',
+    L1_LINE_retrotransposon: '#f032e6',
+    LINE_element: '#bcf60c',
+    long_terminal_repeat: '#fb0',
+    low_complexity: '#008080',
+    LTR_retrotransposon: '#e6beff',
+    Mutator_TIR_transposon: '#9a6324',
+    PIF_Harbinger_TIR_transposon: '#fffac8',
+    rDNA_intergenic_spacer_element: '#800000',
+    repeat_region: '#aaffc3',
+    RTE_LINE_retrotransposon: '#808000',
+    subtelomere: '#ffd8b1',
+    target_site_duplication: '#000075',
+    Tc1_Mariner_TIR_transposon: '#808080',
+};
+const SHORTEN_HEIGHT_FRACTION = 0.65;
+export const repeatRegionGlyph = {
+    type: 'RepeatRegion',
+    match(feature) {
+        const type = feature.get('type');
+        const subfeatures = feature.get('subfeatures');
+        return type === 'repeat_region' && !!subfeatures?.length;
+    },
+    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 subfeatures = feature.get('subfeatures') || [];
+        const children = subfeatures.map(child => layoutChild(child, feature, args));
+        return {
+            feature,
+            glyphType: 'RepeatRegion',
+            x: 0,
+            y: 0,
+            width: widthPx,
+            height: baseHeightPx,
+            totalLayoutHeight: baseHeightPx,
+            totalLayoutWidth: widthPx + arrowPadding.left + arrowPadding.right,
+            leftPadding: arrowPadding.left,
+            children,
+        };
+    },
+    draw(ctx, layout, dc) {
+        const { children } = layout;
+        const { theme, canvasWidth } = dc;
+        const left = layout.x;
+        const width = layout.width;
+        const top = layout.y;
+        const height = layout.height;
+        if (isOffScreen(left, width, canvasWidth)) {
+            return;
+        }
+        const strokeColor = theme.palette.text.secondary;
+        drawConnectingLine(ctx, left, top, width, height, strokeColor);
+        const sortedChildren = [...children].sort((a, b) => {
+            const aType = a.feature.get('type');
+            const bType = b.feature.get('type');
+            if (aType.endsWith('_retrotransposon')) {
+                return -1;
+            }
+            if (bType.endsWith('_retrotransposon')) {
+                return 1;
+            }
+            return 0;
+        });
+        for (const childLayout of sortedChildren) {
+            const childType = childLayout.feature.get('type');
+            const color = REPEAT_COLOR_MAP[childType] || '#000';
+            const shorten = childType.endsWith('_retrotransposon');
+            drawRepeatBox(ctx, childLayout, canvasWidth, color, shorten);
+        }
+        drawStrandArrow(ctx, layout, dc, strokeColor);
+    },
+};
+function drawRepeatBox(ctx, layout, canvasWidth, color, shorten) {
+    const { x: left, width, y, height: origHeight } = layout;
+    if (isOffScreen(left, width, canvasWidth)) {
+        return;
+    }
+    let top = y;
+    let height = origHeight;
+    if (shorten) {
+        top += ((1 - SHORTEN_HEIGHT_FRACTION) / 2) * height;
+        height *= SHORTEN_HEIGHT_FRACTION;
+    }
+    ctx.fillStyle = color;
+    ctx.fillRect(left, top, width, height);
+}

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

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

package/esm/CanvasFeatureRenderer/glyphs/segments.js

@@ -0,0 +1,65 @@
+import { readCachedConfig } from "../renderConfig.js";
+import { boxGlyph } from "./box.js";
+import { cdsGlyph } from "./cds.js";
+import { drawSegmentedFeature, getStrandArrowPadding, layoutChild, } from "./glyphUtils.js";
+export const segmentsGlyph = {
+    type: 'Segments',
+    match(feature, configContext) {
+        const type = feature.get('type');
+        if (type === 'CDS') {
+            return false;
+        }
+        const subfeatures = feature.get('subfeatures');
+        if (!subfeatures?.length) {
+            return false;
+        }
+        const { transcriptTypes, containerTypes } = configContext;
+        if (transcriptTypes.includes(type)) {
+            const hasCDS = subfeatures.some((f) => f.get('type') === 'CDS');
+            if (hasCDS) {
+                return false;
+            }
+        }
+        if (containerTypes.includes(type)) {
+            return false;
+        }
+        const isTopLevel = !feature.parent?.();
+        const hasNestedSubfeatures = subfeatures.some((f) => f.get('subfeatures')?.length);
+        if (isTopLevel && hasNestedSubfeatures) {
+            return false;
+        }
+        return true;
+    },
+    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 subfeatures = feature.get('subfeatures') || [];
+        const children = subfeatures.map(child => {
+            const childType = child.get('type');
+            const glyphType = childType === 'CDS' ? 'CDS' : 'Box';
+            return layoutChild(child, feature, args, glyphType);
+        });
+        return {
+            feature,
+            glyphType: 'Segments',
+            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/subfeatures.d.ts

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

package/esm/CanvasFeatureRenderer/glyphs/subfeatures.js

@@ -0,0 +1,132 @@
+import { applyLabelDimensions } from "../labelUtils.js";
+import { readCachedConfig } from "../renderConfig.js";
+import { boxGlyph } from "./box.js";
+import { findChildGlyph } from "./childGlyphs.js";
+const TRANSCRIPT_PADDING = 2;
+const CODING_TYPES = new Set(['CDS', 'cds']);
+function hasCodingSubfeature(feature) {
+    const subfeatures = feature.get('subfeatures') || [];
+    return subfeatures.some((sub) => CODING_TYPES.has(sub.get('type')) || hasCodingSubfeature(sub));
+}
+function filterByGeneGlyphMode(subfeatures, transcriptTypes, mode) {
+    if (subfeatures.length <= 1) {
+        return subfeatures;
+    }
+    const transcriptSubfeatures = subfeatures.filter(sub => transcriptTypes.includes(sub.get('type')));
+    let candidates = transcriptSubfeatures.length > 0 ? transcriptSubfeatures : subfeatures;
+    if (mode === 'longestCoding') {
+        const codingCandidates = candidates.filter(hasCodingSubfeature);
+        if (codingCandidates.length > 0) {
+            candidates = codingCandidates;
+        }
+    }
+    const longest = candidates.reduce((a, b) => a.get('end') - a.get('start') > b.get('end') - b.get('start') ? a : b);
+    return [longest];
+}
+export const subfeaturesGlyph = {
+    type: 'Subfeatures',
+    match(feature, configContext) {
+        const type = feature.get('type');
+        const subfeatures = feature.get('subfeatures');
+        if (!subfeatures?.length) {
+            return false;
+        }
+        const { containerTypes } = configContext;
+        if (containerTypes.includes(type)) {
+            return true;
+        }
+        const isTopLevel = !feature.parent?.();
+        const hasNestedSubfeatures = subfeatures.some((f) => f.get('subfeatures')?.length);
+        return isTopLevel && hasNestedSubfeatures;
+    },
+    layout(args) {
+        const { feature, bpPerPx, reversed, configContext } = args;
+        const { config, displayMode, featureHeight, geneGlyphMode, transcriptTypes, } = configContext;
+        const featureBp = {
+            start: feature.get('start'),
+            end: feature.get('end'),
+        };
+        const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
+        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const widthPx = (featureBp.end - featureBp.start) / bpPerPx;
+        let subfeatures = [...(feature.get('subfeatures') || [])];
+        const codingStatus = new Map(subfeatures.map(f => [f.id(), hasCodingSubfeature(f)]));
+        subfeatures.sort((a, b) => {
+            const aHasCDS = codingStatus.get(a.id());
+            const bHasCDS = codingStatus.get(b.id());
+            if (aHasCDS && !bHasCDS) {
+                return -1;
+            }
+            if (!aHasCDS && bHasCDS) {
+                return 1;
+            }
+            return 0;
+        });
+        if (geneGlyphMode === 'longest' || geneGlyphMode === 'longestCoding') {
+            subfeatures = filterByGeneGlyphMode(subfeatures, transcriptTypes, geneGlyphMode);
+        }
+        const children = [];
+        let currentYPx = 0;
+        const { subfeatureLabels } = configContext;
+        for (let i = 0; i < subfeatures.length; i++) {
+            const child = subfeatures[i];
+            const childType = child.get('type');
+            const isChildTranscript = transcriptTypes.includes(childType);
+            const childGlyph = findChildGlyph(child, configContext);
+            const childLayout = childGlyph.layout({
+                ...args,
+                feature: child,
+                parentFeature: feature,
+            });
+            applyLabelDimensions(childLayout, {
+                feature: child,
+                configContext,
+                isNested: true,
+                isTranscriptChild: isChildTranscript,
+            });
+            const childBp = {
+                start: child.get('start'),
+                end: child.get('end'),
+            };
+            const offsetBp = reversed
+                ? featureBp.end - childBp.end
+                : childBp.start - featureBp.start;
+            const xRelativePx = offsetBp / bpPerPx;
+            childLayout.x = xRelativePx;
+            childLayout.y = currentYPx;
+            children.push(childLayout);
+            const useExtraHeightForLabels = subfeatureLabels === 'below' && isChildTranscript;
+            const heightForStacking = useExtraHeightForLabels
+                ? childLayout.totalLayoutHeight
+                : childLayout.height;
+            currentYPx += heightForStacking;
+            if (i < subfeatures.length - 1) {
+                currentYPx += TRANSCRIPT_PADDING;
+            }
+        }
+        const totalHeightPx = currentYPx > 0 ? currentYPx : baseHeightPx;
+        return {
+            feature,
+            glyphType: 'Subfeatures',
+            x: 0,
+            y: 0,
+            width: widthPx,
+            height: totalHeightPx,
+            totalLayoutHeight: totalHeightPx,
+            totalLayoutWidth: widthPx,
+            leftPadding: 0,
+            children,
+        };
+    },
+    draw(ctx, layout, dc) {
+        const { children } = layout;
+        if (children.length === 0) {
+            boxGlyph.draw(ctx, { ...layout, glyphType: 'Box' }, dc);
+            return;
+        }
+        for (const childLayout of children) {
+            const childGlyph = findChildGlyph(childLayout.feature, dc.configContext);
+            childGlyph.draw(ctx, childLayout, dc);
+        }
+    },
+};

package/esm/CanvasFeatureRenderer/index.d.ts

@@ -0,0 +1,3 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function CanvasFeatureRendererF(pluginManager: PluginManager): void;
+export { default as configSchema } from './configSchema.ts';

package/esm/CanvasFeatureRenderer/index.js

@@ -0,0 +1,23 @@
+import { lazy } from 'react';
+import CanvasFeatureRenderer from "./CanvasFeatureRenderer.js";
+import configSchema from "./configSchema.js";
+import configSchema2 from "./configSchema2.js";
+export default function CanvasFeatureRendererF(pluginManager) {
+    pluginManager.addRendererType(() => {
+        return new CanvasFeatureRenderer({
+            name: 'CanvasFeatureRenderer',
+            ReactComponent: lazy(() => import("./CanvasFeatureRendering.js")),
+            configSchema,
+            pluginManager,
+        });
+    });
+    pluginManager.addRendererType(() => {
+        return new CanvasFeatureRenderer({
+            name: 'SvgFeatureRenderer',
+            ReactComponent: lazy(() => import("./CanvasFeatureRendering.js")),
+            configSchema: configSchema2,
+            pluginManager,
+        });
+    });
+}
+export { default as configSchema } from "./configSchema.js";

package/esm/CanvasFeatureRenderer/labelUtils.d.ts

@@ -0,0 +1,9 @@
+import type { RenderConfigContext } from './renderConfig.ts';
+import type { FeatureLayout } from './types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare function applyLabelDimensions(layout: FeatureLayout, args: {
+    feature: Feature;
+    configContext: RenderConfigContext;
+    isNested: boolean;
+    isTranscriptChild: boolean;
+}): void;

package/esm/CanvasFeatureRenderer/labelUtils.js

@@ -0,0 +1,35 @@
+import { readConfObject } from '@jbrowse/core/configuration';
+import { measureText } from '@jbrowse/core/util';
+import { readCachedConfig } from "./renderConfig.js";
+import { truncateLabel } from "./util.js";
+export function applyLabelDimensions(layout, args) {
+    const { feature, configContext, isNested, isTranscriptChild } = args;
+    const { config, showLabels, showDescriptions, subfeatureLabels, fontHeight, labelAllowed, } = configContext;
+    const showSubfeatureLabels = subfeatureLabels !== 'none';
+    const shouldCalculateLabels = labelAllowed && (!isNested || (isTranscriptChild && showSubfeatureLabels));
+    if (!shouldCalculateLabels) {
+        return;
+    }
+    const effectiveShowLabels = isTranscriptChild ? true : showLabels;
+    const effectiveShowDescriptions = isTranscriptChild ? false : showDescriptions;
+    const name = truncateLabel(String(readConfObject(config, ['labels', 'name'], { feature }) || ''));
+    const shouldShowName = /\S/.test(name) && effectiveShowLabels;
+    const description = truncateLabel(String(readConfObject(config, ['labels', 'description'], { feature }) || ''));
+    const shouldShowDescription = /\S/.test(description) && effectiveShowDescriptions;
+    const actualFontHeight = readCachedConfig(fontHeight, config, ['labels', 'fontSize'], feature);
+    let extraHeightPx = 0;
+    let maxLabelWidthPx = 0;
+    if (shouldShowName) {
+        extraHeightPx += actualFontHeight;
+        maxLabelWidthPx = Math.max(maxLabelWidthPx, measureText(name, actualFontHeight));
+    }
+    if (shouldShowDescription) {
+        extraHeightPx += actualFontHeight;
+        maxLabelWidthPx = Math.max(maxLabelWidthPx, measureText(description, actualFontHeight));
+    }
+    const isOverlayMode = isTranscriptChild && subfeatureLabels === 'overlay';
+    if (!isOverlayMode) {
+        layout.totalLayoutHeight = layout.height + extraHeightPx;
+    }
+    layout.totalLayoutWidth = Math.max(layout.totalLayoutWidth, maxLabelWidthPx);
+}

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

@@ -0,0 +1,3 @@
+export { applyLabelDimensions, layoutFeature } from './layoutFeature.ts';
+export { layoutFeatures } from './layoutFeatures.ts';
+export { buildChildrenIndex, convertToCanvasCoords } from './layoutUtils.ts';

package/esm/CanvasFeatureRenderer/layout/index.js

@@ -0,0 +1,3 @@
+export { applyLabelDimensions, layoutFeature } from "./layoutFeature.js";
+export { layoutFeatures } from "./layoutFeatures.js";
+export { buildChildrenIndex, convertToCanvasCoords } from "./layoutUtils.js";

package/esm/CanvasFeatureRenderer/layout/layoutFeature.d.ts

@@ -0,0 +1,14 @@
+import type { RenderConfigContext } from '../renderConfig.ts';
+import type { FeatureLayout } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Feature } from '@jbrowse/core/util';
+export { applyLabelDimensions } from '../labelUtils.ts';
+export declare function layoutFeature(args: {
+    feature: Feature;
+    bpPerPx: number;
+    reversed: boolean;
+    configContext: RenderConfigContext;
+    pluginManager?: PluginManager;
+    isNested?: boolean;
+    isTranscriptChild?: boolean;
+}): FeatureLayout;

package/esm/CanvasFeatureRenderer/layout/layoutFeature.js

@@ -0,0 +1,40 @@
+import { builtinGlyphs, findGlyph, findPluggableGlyph, } from "../glyphs/index.js";
+import { applyLabelDimensions } from "../labelUtils.js";
+export { applyLabelDimensions } from "../labelUtils.js";
+export function layoutFeature(args) {
+    const { feature, bpPerPx, reversed, configContext, pluginManager, isNested = false, isTranscriptChild = false, } = args;
+    const pluggableGlyph = findPluggableGlyph(feature, pluginManager);
+    let layout;
+    if (pluggableGlyph) {
+        const heightMultiplier = pluggableGlyph.getHeightMultiplier?.(feature, configContext.config) ?? 1;
+        const baseGlyph = findGlyph(feature, configContext, builtinGlyphs);
+        const layoutArgs = {
+            feature,
+            bpPerPx,
+            reversed,
+            configContext,
+            pluginManager,
+        };
+        layout = baseGlyph.layout(layoutArgs);
+        layout.height *= heightMultiplier;
+        layout.totalLayoutHeight *= heightMultiplier;
+    }
+    else {
+        const glyph = findGlyph(feature, configContext, builtinGlyphs);
+        const layoutArgs = {
+            feature,
+            bpPerPx,
+            reversed,
+            configContext,
+            pluginManager,
+        };
+        layout = glyph.layout(layoutArgs);
+    }
+    applyLabelDimensions(layout, {
+        feature,
+        configContext,
+        isNested,
+        isTranscriptChild,
+    });
+    return layout;
+}

package/esm/CanvasFeatureRenderer/layout/layoutFeatures.d.ts

@@ -0,0 +1,13 @@
+import type { RenderConfigContext } from '../renderConfig.ts';
+import type { LayoutRecord } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Feature, Region } from '@jbrowse/core/util';
+import type { BaseLayout } from '@jbrowse/core/util/layouts';
+export declare function layoutFeatures({ features, bpPerPx, region, configContext, layout, pluginManager, }: {
+    features: Map<string, Feature>;
+    bpPerPx: number;
+    region: Region;
+    configContext: RenderConfigContext;
+    layout: BaseLayout<unknown>;
+    pluginManager: PluginManager;
+}): LayoutRecord[];

package/esm/CanvasFeatureRenderer/layout/layoutFeatures.js

@@ -0,0 +1,59 @@
+import { readConfObject } from '@jbrowse/core/configuration';
+import { createFeatureFloatingLabels } from "../floatingLabels.js";
+import { layoutFeature } from "./layoutFeature.js";
+const yPadding = 5;
+export function layoutFeatures({ features, bpPerPx, region, configContext, layout, pluginManager, }) {
+    const reversed = region.reversed || false;
+    const layoutRecords = [];
+    const { config } = configContext;
+    for (const feature of features.values()) {
+        const featureLayout = layoutFeature({
+            feature,
+            bpPerPx,
+            reversed,
+            configContext,
+            pluginManager,
+        });
+        const totalLayoutWidth = featureLayout.totalLayoutWidth;
+        const totalLayoutHeight = featureLayout.totalLayoutHeight;
+        const name = String(readConfObject(config, ['labels', 'name'], { feature }) || '');
+        const description = String(readConfObject(config, ['labels', 'description'], { feature }) || '');
+        const floatingLabels = createFeatureFloatingLabels({
+            feature,
+            config,
+            configContext,
+            nameColor: 'black',
+            descriptionColor: 'blue',
+            name,
+            description,
+        });
+        const featureStart = feature.get('start');
+        const featureEnd = feature.get('end');
+        const leftPaddingBp = featureLayout.leftPadding * bpPerPx;
+        const rightPaddingBp = (totalLayoutWidth - featureLayout.width - featureLayout.leftPadding) *
+            bpPerPx;
+        const layoutStart = featureStart - leftPaddingBp;
+        const layoutEnd = featureEnd + rightPaddingBp;
+        const topPx = layout.addRect(feature.id(), layoutStart, layoutEnd, totalLayoutHeight + yPadding, feature, {
+            label: name,
+            description,
+            refName: feature.get('refName'),
+            floatingLabels,
+            totalFeatureHeight: featureLayout.height,
+            totalLayoutWidth,
+            featureWidth: featureLayout.width,
+            featureStartBp: featureStart,
+            featureEndBp: featureEnd,
+        });
+        if (topPx !== null) {
+            layoutRecords.push({
+                feature,
+                layout: featureLayout,
+                topPx,
+                label: name,
+                description,
+            });
+        }
+    }
+    return layoutRecords;
+}

package/esm/CanvasFeatureRenderer/layout/layoutUtils.d.ts

@@ -0,0 +1,19 @@
+import type { RenderConfigContext } from '../renderConfig.ts';
+import type { FeatureLayout, SubfeatureInfo } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { BaseLayout } from '@jbrowse/core/util/layouts';
+export declare function convertToCanvasCoords(layout: FeatureLayout, offsetX: number, offsetY: number): FeatureLayout;
+export declare function buildChildrenIndex({ layout, featureLayout, subfeatureCoords, subfeatureInfos, config, configContext, pluginManager, subfeatureLabels, transcriptTypes, labelColor, parentTooltip, }: {
+    layout: BaseLayout<unknown>;
+    featureLayout: FeatureLayout;
+    subfeatureCoords: number[];
+    subfeatureInfos: SubfeatureInfo[];
+    config: AnyConfigurationModel;
+    configContext: RenderConfigContext;
+    pluginManager?: PluginManager;
+    subfeatureLabels: string;
+    transcriptTypes: string[];
+    labelColor: string;
+    parentTooltip: string;
+}): void;