@jbrowse/plugin-canvas 4.0.0

package/esm/CanvasFeatureRenderer/types.d.ts

@@ -0,0 +1,97 @@
+import type { RenderConfigContext } from './renderConfig.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature, Region } from '@jbrowse/core/util';
+import type { BaseLayout } from '@jbrowse/core/util/layouts';
+import type { Theme } from '@mui/material';
+export interface SequenceData {
+    seq: string;
+    cds: {
+        start: number;
+        end: number;
+    }[];
+}
+export interface PeptideData {
+    sequenceData: SequenceData;
+    protein?: string;
+}
+export interface FeatureLayout {
+    feature: Feature;
+    glyphType: GlyphType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    totalLayoutHeight: number;
+    totalLayoutWidth: number;
+    leftPadding: number;
+    children: FeatureLayout[];
+}
+export interface LayoutArgs {
+    feature: Feature;
+    bpPerPx: number;
+    reversed: boolean;
+    configContext: RenderConfigContext;
+    pluginManager?: PluginManager;
+    parentFeature?: Feature;
+}
+export interface DrawContext {
+    region: Region;
+    bpPerPx: number;
+    configContext: RenderConfigContext;
+    theme: Theme;
+    canvasWidth: number;
+    peptideDataMap?: Map<string, PeptideData>;
+    colorByCDS?: boolean;
+}
+export interface Glyph {
+    type: GlyphType;
+    match(feature: Feature, configContext: RenderConfigContext): boolean;
+    layout(args: LayoutArgs): FeatureLayout;
+    draw(ctx: CanvasRenderingContext2D, layout: FeatureLayout, drawContext: DrawContext): void;
+    getSubfeatureMouseover?(feature: Feature): string | undefined;
+    hasIndexableChildren?: boolean;
+}
+export interface LayoutRecord {
+    feature: Feature;
+    layout: FeatureLayout;
+    topPx: number;
+    label: string;
+    description: string;
+}
+export interface FlatbushItem {
+    featureId: string;
+    type: string;
+    startBp: number;
+    endBp: number;
+    leftPx: number;
+    rightPx: number;
+    topPx: number;
+    bottomPx: number;
+    tooltip?: string;
+}
+export interface SubfeatureInfo {
+    featureId: string;
+    parentFeatureId: string;
+    displayLabel: string;
+    type: string;
+    leftPx: number;
+    topPx: number;
+    rightPx: number;
+    bottomPx: number;
+}
+export interface RenderArgs {
+    features: Map<string, Feature>;
+    layout: BaseLayout<unknown>;
+    regions: Region[];
+    bpPerPx: number;
+    config: AnyConfigurationModel;
+    displayMode: string;
+    theme: Record<string, any>;
+    highResolutionScaling?: number;
+    stopToken?: string;
+    peptideDataMap?: Map<string, PeptideData>;
+    colorByCDS?: boolean;
+    pluginManager?: PluginManager;
+}
+export type GlyphType = 'Box' | 'ProcessedTranscript' | 'Segments' | 'Subfeatures' | 'CDS' | 'MatureProteinRegion' | 'RepeatRegion';

package/esm/CanvasFeatureRenderer/types.js

@@ -0,0 +1 @@
+export {};

package/esm/CanvasFeatureRenderer/util.d.ts

@@ -0,0 +1,22 @@
+import type { RenderConfigContext } from './renderConfig.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+import type { Theme } from '@mui/material';
+export declare function getEffectiveStrand(strand: number, reversed: boolean): number;
+export declare function getStrandAwareX(left: number, width: number, index: number, pxPerBp: number, effectiveStrand: number): number;
+export declare function truncateLabel(text: string, maxLength?: number): string;
+export declare function isOffScreen(left: number, width: number, canvasWidth: number): boolean;
+export declare function isUTR(feature: Feature): boolean;
+export declare function getBoxColor({ feature, config, configContext, colorByCDS, theme, }: {
+    feature: Feature;
+    config: AnyConfigurationModel;
+    configContext: RenderConfigContext;
+    colorByCDS: boolean;
+    theme: Theme;
+}): string;
+export declare function getStrokeColor({ feature, config, configContext, theme, }: {
+    feature: Feature;
+    config: AnyConfigurationModel;
+    configContext: RenderConfigContext;
+    theme: Theme;
+}): string;

package/esm/CanvasFeatureRenderer/util.js

@@ -0,0 +1,50 @@
+import { getFrame, stripAlpha } from '@jbrowse/core/util';
+import { readCachedConfig } from "./renderConfig.js";
+const MAX_LABEL_LENGTH = 50;
+const UTR_REGEX = /(\bUTR|_UTR|untranslated[_\s]region)\b/i;
+export function getEffectiveStrand(strand, reversed) {
+    return strand * (reversed ? -1 : 1);
+}
+export function getStrandAwareX(left, width, index, pxPerBp, effectiveStrand) {
+    if (effectiveStrand === -1) {
+        return left + width - pxPerBp * index;
+    }
+    return left + pxPerBp * index;
+}
+export function truncateLabel(text, maxLength = MAX_LABEL_LENGTH) {
+    return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
+}
+export function isOffScreen(left, width, canvasWidth) {
+    return left + width < 0 || left > canvasWidth;
+}
+export function isUTR(feature) {
+    return UTR_REGEX.test(feature.get('type') || '');
+}
+export function getBoxColor({ feature, config, configContext, colorByCDS, theme, }) {
+    const { color1, color3 } = configContext;
+    let fill;
+    fill = isUTR(feature)
+        ? readCachedConfig(color3, config, 'color3', feature)
+        : readCachedConfig(color1, config, 'color1', feature);
+    const featureType = feature.get('type');
+    const featureStrand = feature.get('strand');
+    const featurePhase = feature.get('phase');
+    if (colorByCDS &&
+        featureType === 'CDS' &&
+        featureStrand !== undefined &&
+        featurePhase !== undefined) {
+        const featureStart = feature.get('start');
+        const featureEnd = feature.get('end');
+        const frame = getFrame(featureStart, featureEnd, featureStrand, featurePhase);
+        const frameColor = theme.palette.framesCDS.at(frame)?.main;
+        if (frameColor) {
+            fill = frameColor;
+        }
+    }
+    return fill;
+}
+export function getStrokeColor({ feature, config, configContext, theme, }) {
+    const { color2 } = configContext;
+    const c = readCachedConfig(color2, config, 'color2', feature);
+    return c === '#f0f' ? stripAlpha(theme.palette.text.secondary) : c;
+}

package/esm/CanvasFeatureRenderer/zoomThresholds.d.ts

@@ -0,0 +1,4 @@
+export declare const ZOOM_THRESHOLD_FOR_PEPTIDE_BACKGROUND = 1;
+export declare const ZOOM_THRESHOLD_FOR_PEPTIDE_TEXT = 8;
+export declare function shouldRenderPeptideBackground(bpPerPx: number): boolean;
+export declare function shouldRenderPeptideText(bpPerPx: number): boolean;

package/esm/CanvasFeatureRenderer/zoomThresholds.js

@@ -0,0 +1,8 @@
+export const ZOOM_THRESHOLD_FOR_PEPTIDE_BACKGROUND = 1;
+export const ZOOM_THRESHOLD_FOR_PEPTIDE_TEXT = 8;
+export function shouldRenderPeptideBackground(bpPerPx) {
+    return 1 / bpPerPx >= ZOOM_THRESHOLD_FOR_PEPTIDE_BACKGROUND;
+}
+export function shouldRenderPeptideText(bpPerPx) {
+    return 1 / bpPerPx >= ZOOM_THRESHOLD_FOR_PEPTIDE_TEXT;
+}

package/esm/glyphs/index.d.ts

@@ -0,0 +1,2 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function registerGlyphs(_pluginManager: PluginManager): void;

package/esm/glyphs/index.js

@@ -0,0 +1,2 @@
+export default function registerGlyphs(_pluginManager) {
+}

package/esm/index.d.ts

@@ -0,0 +1,6 @@
+import Plugin from '@jbrowse/core/Plugin';
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default class CanvasPlugin extends Plugin {
+    name: string;
+    install(pluginManager: PluginManager): void;
+}

package/esm/index.js

@@ -0,0 +1,10 @@
+import Plugin from '@jbrowse/core/Plugin';
+import CanvasFeatureRendererF from "./CanvasFeatureRenderer/index.js";
+import registerGlyphs from "./glyphs/index.js";
+export default class CanvasPlugin extends Plugin {
+    name = 'CanvasPlugin';
+    install(pluginManager) {
+        registerGlyphs(pluginManager);
+        CanvasFeatureRendererF(pluginManager);
+    }
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@jbrowse/plugin-canvas",
+  "version": "4.0.0",
+  "description": "JBrowse 2 plugin for canvas features",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "plugins/canvas"
+  },
+  "author": "JBrowse Team",
+  "main": "esm/index.js",
+  "files": [
+    "esm"
+  ],
+  "dependencies": {
+    "@jbrowse/mobx-state-tree": "^5.5.0",
+    "@mui/material": "^7.3.6",
+    "g2p_mapper": "^2.0.0",
+    "mobx": "^6.15.0",
+    "mobx-react": "^9.2.1",
+    "rxjs": "^7.8.2",
+    "@jbrowse/core": "^4.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "pnpm run /^build:/",
+    "test": "cd ../..; jest --passWithNoTests plugins/canvas",
+    "prebuild": "pnpm clean",
+    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "clean": "rimraf esm *.tsbuildinfo"
+  },
+  "types": "esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.js"
+    }
+  }
+}