@jbrowse/plugin-linear-comparative-view 3.7.0 → 4.0.0

package/dist/LinearSyntenyDisplay/drawSynteny.js

@@ -1,470 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAX_COLOR_RANGE = void 0;
-exports.getId = getId;
-exports.drawCigarClickMap = drawCigarClickMap;
-exports.drawRef = drawRef;
-exports.drawMouseoverClickMap = drawMouseoverClickMap;
-const colors_1 = require("@jbrowse/core/ui/colors");
-const util_1 = require("@jbrowse/core/util");
-const colord_1 = require("@jbrowse/core/util/colord");
-const util_2 = require("./components/util");
-exports.MAX_COLOR_RANGE = 255 * 255 * 255;
-function makeColor(idx) {
-    const r = Math.floor(idx / (255 * 255)) % 255;
-    const g = Math.floor(idx / 255) % 255;
-    const b = idx % 255;
-    return `rgb(${r},${g},${b})`;
-}
-function hashString(str) {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-        const char = str.charCodeAt(i);
-        hash = (hash << 5) - hash + char;
-        hash = hash & hash;
-    }
-    return Math.abs(hash);
-}
-function getQueryColor(queryName) {
-    const hash = hashString(queryName);
-    return colors_1.category10[hash % colors_1.category10.length];
-}
-const defaultCigarColors = {
-    I: '#ff03',
-    N: '#0a03',
-    D: '#00f3',
-    X: 'brown',
-    M: '#f003',
-    '=': '#f003',
-};
-const strandCigarColors = {
-    I: '#ff03',
-    N: '#a020f0',
-    D: '#a020f0',
-    X: 'brown',
-    M: '#f003',
-    '=': '#f003',
-};
-const colorSchemes = {
-    default: {
-        cigarColors: defaultCigarColors,
-    },
-    strand: {
-        posColor: 'red',
-        negColor: 'blue',
-        cigarColors: strandCigarColors,
-    },
-    query: {
-        cigarColors: defaultCigarColors,
-    },
-};
-function applyAlpha(color, alpha) {
-    if (alpha === 1) {
-        return color;
-    }
-    return (0, colord_1.colord)(color).alpha(alpha).toHex();
-}
-const lineLimit = 3;
-const oobLimit = 1600;
-function getId(r, g, b, unitMultiplier) {
-    return Math.floor((r * 255 * 255 + g * 255 + b - 1) / unitMultiplier);
-}
-function drawCigarClickMap(model, cigarClickMapCanvas) {
-    const view = (0, util_1.getContainingView)(model);
-    const drawCurves = view.drawCurves;
-    const drawCIGAR = view.drawCIGAR;
-    const drawCIGARMatchesOnly = view.drawCIGARMatchesOnly;
-    const { level, height, featPositions } = model;
-    const width = view.width;
-    const bpPerPxs = view.views.map(v => v.bpPerPx);
-    cigarClickMapCanvas.imageSmoothingEnabled = false;
-    cigarClickMapCanvas.clearRect(0, 0, width, height);
-    const offsets = view.views.map(v => v.offsetPx);
-    const bpPerPxInv0 = 1 / bpPerPxs[level];
-    const bpPerPxInv1 = 1 / bpPerPxs[level + 1];
-    for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
-        const x11 = p11.offsetPx - offsets[level];
-        const x12 = p12.offsetPx - offsets[level];
-        const x21 = p21.offsetPx - offsets[level + 1];
-        const x22 = p22.offsetPx - offsets[level + 1];
-        const l1 = Math.abs(x12 - x11);
-        const l2 = Math.abs(x22 - x21);
-        const minX = Math.min(x21, x22);
-        const maxX = Math.max(x21, x22);
-        const y1 = 0;
-        const y2 = height;
-        const mid = (y2 - y1) / 2;
-        if (!(l1 <= lineLimit && l2 <= lineLimit) &&
-            (0, util_1.doesIntersect2)(minX, maxX, -oobLimit, view.width + oobLimit)) {
-            const s1 = f.get('strand');
-            const k1 = s1 === -1 ? x12 : x11;
-            const k2 = s1 === -1 ? x11 : x12;
-            const rev1 = k1 < k2 ? 1 : -1;
-            const rev2 = (x21 < x22 ? 1 : -1) * s1;
-            let cx1 = k1;
-            let cx2 = s1 === -1 ? x22 : x21;
-            if (cigar.length && drawCIGAR) {
-                let continuingFlag = false;
-                let px1 = 0;
-                let px2 = 0;
-                const unitMultiplier2 = Math.floor(exports.MAX_COLOR_RANGE / cigar.length);
-                for (let j = 0; j < cigar.length; j += 2) {
-                    const len = +cigar[j];
-                    const op = cigar[j + 1];
-                    if (!continuingFlag) {
-                        px1 = cx1;
-                        px2 = cx2;
-                    }
-                    const d1 = len * bpPerPxInv0;
-                    const d2 = len * bpPerPxInv1;
-                    if (op === 'M' || op === '=' || op === 'X') {
-                        cx1 += d1 * rev1;
-                        cx2 += d2 * rev2;
-                    }
-                    else if (op === 'D' || op === 'N') {
-                        cx1 += d1 * rev1;
-                    }
-                    else if (op === 'I') {
-                        cx2 += d2 * rev2;
-                    }
-                    if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
-                        Math.min(px1, px2, cx1, cx2) > width)) {
-                        const isNotLast = j < cigar.length - 2;
-                        if (Math.abs(cx1 - px1) <= 1 &&
-                            Math.abs(cx2 - px2) <= 1 &&
-                            isNotLast) {
-                            continuingFlag = true;
-                        }
-                        else {
-                            continuingFlag = false;
-                            const shouldDraw = !drawCIGARMatchesOnly ||
-                                ((op === 'M' || op === '=' || op === 'X') &&
-                                    Math.abs(cx1 - px1) > 1 &&
-                                    Math.abs(cx2 - px2) > 1);
-                            if (shouldDraw) {
-                                const idx = j * unitMultiplier2 + 1;
-                                cigarClickMapCanvas.fillStyle = makeColor(idx);
-                                (0, util_2.draw)(cigarClickMapCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
-                                cigarClickMapCanvas.fill();
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-function drawRef(model, mainCanvas) {
-    var _a;
-    const view = (0, util_1.getContainingView)(model);
-    const drawCurves = view.drawCurves;
-    const drawCIGAR = view.drawCIGAR;
-    const drawCIGARMatchesOnly = view.drawCIGARMatchesOnly;
-    const drawLocationMarkersEnabled = view.drawLocationMarkers;
-    const { level, height, featPositions, alpha, minAlignmentLength, colorBy } = model;
-    const width = view.width;
-    const bpPerPxs = view.views.map(v => v.bpPerPx);
-    const queryTotalLengths = new Map();
-    if (minAlignmentLength > 0) {
-        for (const { f } of featPositions) {
-            const queryName = f.get('name') || f.get('id') || f.id();
-            const alignmentLength = Math.abs(f.get('end') - f.get('start'));
-            const currentTotal = queryTotalLengths.get(queryName) || 0;
-            queryTotalLengths.set(queryName, currentTotal + alignmentLength);
-        }
-    }
-    const schemeConfig = colorSchemes[colorBy] || colorSchemes.default;
-    const activeColorMap = schemeConfig.cigarColors;
-    const posColor = colorBy === 'strand' ? colorSchemes.strand.posColor : 'red';
-    const negColor = colorBy === 'strand' ? colorSchemes.strand.negColor : 'blue';
-    const colorMapWithAlpha = {
-        I: applyAlpha(activeColorMap.I, alpha),
-        N: applyAlpha(activeColorMap.N, alpha),
-        D: applyAlpha(activeColorMap.D, alpha),
-        X: applyAlpha(activeColorMap.X, alpha),
-        M: applyAlpha(activeColorMap.M, alpha),
-        '=': applyAlpha(activeColorMap['='], alpha),
-    };
-    const posColorWithAlpha = applyAlpha(posColor, alpha);
-    const negColorWithAlpha = applyAlpha(negColor, alpha);
-    const queryColorCache = new Map();
-    const getQueryColorWithAlpha = (queryName) => {
-        if (!queryColorCache.has(queryName)) {
-            const color = getQueryColor(queryName);
-            queryColorCache.set(queryName, applyAlpha(color, alpha));
-        }
-        return queryColorCache.get(queryName);
-    };
-    mainCanvas.beginPath();
-    const offsets = view.views.map(v => v.offsetPx);
-    const offsetsL0 = offsets[level];
-    const offsetsL1 = offsets[level + 1];
-    const unitMultiplier = Math.floor(exports.MAX_COLOR_RANGE / featPositions.length);
-    const y1 = 0;
-    const y2 = height;
-    const mid = (y2 - y1) / 2;
-    const useStrandColorThin = colorBy === 'strand';
-    const useQueryColorThin = colorBy === 'query';
-    mainCanvas.fillStyle = colorMapWithAlpha.M;
-    mainCanvas.strokeStyle = colorMapWithAlpha.M;
-    const thinLinesByColor = new Map();
-    for (const { p11, p12, p21, p22, f } of featPositions) {
-        if (minAlignmentLength > 0) {
-            const queryName = f.get('name') || f.get('id') || f.id();
-            const totalLength = queryTotalLengths.get(queryName) || 0;
-            if (totalLength < minAlignmentLength) {
-                continue;
-            }
-        }
-        const x11 = p11.offsetPx - offsetsL0;
-        const x12 = p12.offsetPx - offsetsL0;
-        const x21 = p21.offsetPx - offsetsL1;
-        const x22 = p22.offsetPx - offsetsL1;
-        const l1 = Math.abs(x12 - x11);
-        const l2 = Math.abs(x22 - x21);
-        if (l1 <= lineLimit &&
-            l2 <= lineLimit &&
-            x21 < width + oobLimit &&
-            x21 > -oobLimit) {
-            let colorKey = 'default';
-            if (useStrandColorThin) {
-                const strand = f.get('strand');
-                colorKey = strand === -1 ? 'neg' : 'pos';
-            }
-            else if (useQueryColorThin) {
-                colorKey = f.get('refName');
-            }
-            if (!thinLinesByColor.has(colorKey)) {
-                thinLinesByColor.set(colorKey, []);
-            }
-            thinLinesByColor.get(colorKey).push({ x11, x21, y1, y2, mid });
-        }
-    }
-    for (const [colorKey, lines] of thinLinesByColor) {
-        if (colorKey === 'pos') {
-            mainCanvas.strokeStyle = posColorWithAlpha;
-        }
-        else if (colorKey === 'neg') {
-            mainCanvas.strokeStyle = negColorWithAlpha;
-        }
-        else if (colorKey !== 'default') {
-            mainCanvas.strokeStyle = getQueryColorWithAlpha(colorKey);
-        }
-        else {
-            mainCanvas.strokeStyle = colorMapWithAlpha.M;
-        }
-        mainCanvas.beginPath();
-        if (drawCurves) {
-            for (const { x11, x21, y1, y2, mid } of lines) {
-                mainCanvas.moveTo(x11, y1);
-                mainCanvas.bezierCurveTo(x11, mid, x21, mid, x21, y2);
-            }
-        }
-        else {
-            for (const { x11, x21, y1, y2 } of lines) {
-                mainCanvas.moveTo(x11, y1);
-                mainCanvas.lineTo(x21, y2);
-            }
-        }
-        mainCanvas.stroke();
-    }
-    const bpPerPx0 = bpPerPxs[level];
-    const bpPerPx1 = bpPerPxs[level + 1];
-    const bpPerPxInv0 = 1 / bpPerPx0;
-    const bpPerPxInv1 = 1 / bpPerPx1;
-    const useStrandColor = colorBy === 'strand';
-    const useQueryColor = colorBy === 'query';
-    mainCanvas.fillStyle = colorMapWithAlpha.M;
-    mainCanvas.strokeStyle = colorMapWithAlpha.M;
-    for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
-        const strand = f.get('strand');
-        const refName = f.get('refName');
-        if (minAlignmentLength > 0) {
-            const queryName = f.get('name') || f.get('id') || f.id();
-            const totalLength = queryTotalLengths.get(queryName) || 0;
-            if (totalLength < minAlignmentLength) {
-                continue;
-            }
-        }
-        const x11 = p11.offsetPx - offsetsL0;
-        const x12 = p12.offsetPx - offsetsL0;
-        const x21 = p21.offsetPx - offsetsL1;
-        const x22 = p22.offsetPx - offsetsL1;
-        const l1 = Math.abs(x12 - x11);
-        const l2 = Math.abs(x22 - x21);
-        const minX = Math.min(x21, x22);
-        const maxX = Math.max(x21, x22);
-        if (!(l1 <= lineLimit && l2 <= lineLimit) &&
-            (0, util_1.doesIntersect2)(minX, maxX, -oobLimit, view.width + oobLimit)) {
-            const s1 = strand;
-            const k1 = s1 === -1 ? x12 : x11;
-            const k2 = s1 === -1 ? x11 : x12;
-            const rev1 = k1 < k2 ? 1 : -1;
-            const rev2 = (x21 < x22 ? 1 : -1) * s1;
-            let cx1 = k1;
-            let cx2 = s1 === -1 ? x22 : x21;
-            if (cigar.length && drawCIGAR) {
-                let continuingFlag = false;
-                let px1 = 0;
-                let px2 = 0;
-                for (let j = 0; j < cigar.length; j += 2) {
-                    const len = +cigar[j];
-                    const op = cigar[j + 1];
-                    if (!continuingFlag) {
-                        px1 = cx1;
-                        px2 = cx2;
-                    }
-                    const d1 = len * bpPerPxInv0;
-                    const d2 = len * bpPerPxInv1;
-                    if (op === 'M' || op === '=' || op === 'X') {
-                        cx1 += d1 * rev1;
-                        cx2 += d2 * rev2;
-                    }
-                    else if (op === 'D' || op === 'N') {
-                        cx1 += d1 * rev1;
-                    }
-                    else if (op === 'I') {
-                        cx2 += d2 * rev2;
-                    }
-                    if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
-                        Math.min(px1, px2, cx1, cx2) > width)) {
-                        const isNotLast = j < cigar.length - 2;
-                        if (Math.abs(cx1 - px1) <= 1 &&
-                            Math.abs(cx2 - px2) <= 1 &&
-                            isNotLast) {
-                            continuingFlag = true;
-                        }
-                        else {
-                            const letter = (continuingFlag && d1 > 1) || d2 > 1 ? op : 'M';
-                            const isInsertionOrDeletion = letter === 'I' || letter === 'D' || letter === 'N';
-                            if (useStrandColor && !isInsertionOrDeletion) {
-                                mainCanvas.fillStyle =
-                                    strand === -1 ? negColorWithAlpha : posColorWithAlpha;
-                            }
-                            else if (useQueryColor && !isInsertionOrDeletion) {
-                                mainCanvas.fillStyle = getQueryColorWithAlpha(refName);
-                            }
-                            else {
-                                mainCanvas.fillStyle = colorMapWithAlpha[letter];
-                            }
-                            continuingFlag = false;
-                            if (drawCIGARMatchesOnly) {
-                                if (letter === 'M') {
-                                    (0, util_2.draw)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
-                                    mainCanvas.fill();
-                                    if (drawLocationMarkersEnabled) {
-                                        (0, util_2.drawLocationMarkers)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, bpPerPx0, bpPerPx1, drawCurves);
-                                    }
-                                }
-                            }
-                            else {
-                                (0, util_2.draw)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
-                                mainCanvas.fill();
-                                if (drawLocationMarkersEnabled) {
-                                    (0, util_2.drawLocationMarkers)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, bpPerPx0, bpPerPx1, drawCurves);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            else {
-                if (useStrandColor) {
-                    mainCanvas.fillStyle =
-                        strand === -1 ? negColorWithAlpha : posColorWithAlpha;
-                }
-                else if (useQueryColor) {
-                    mainCanvas.fillStyle = getQueryColorWithAlpha(refName);
-                }
-                (0, util_2.draw)(mainCanvas, x11, x12, y1, x22, x21, y2, mid, drawCurves);
-                mainCanvas.fill();
-                if (useStrandColor || useQueryColor) {
-                    mainCanvas.fillStyle = colorMapWithAlpha.M;
-                }
-            }
-        }
-    }
-    const ctx2 = (_a = model.clickMapCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-    if (!ctx2) {
-        return;
-    }
-    ctx2.imageSmoothingEnabled = false;
-    ctx2.clearRect(0, 0, width, height);
-    for (let i = 0; i < featPositions.length; i++) {
-        const feature = featPositions[i];
-        if (minAlignmentLength > 0) {
-            const queryName = feature.f.get('name') || feature.f.get('id') || feature.f.id();
-            const totalLength = queryTotalLengths.get(queryName) || 0;
-            if (totalLength < minAlignmentLength) {
-                continue;
-            }
-        }
-        const idx = i * unitMultiplier + 1;
-        ctx2.fillStyle = makeColor(idx);
-        (0, util_2.drawMatchSimple)({
-            cb: ctx => {
-                ctx.fill();
-            },
-            feature,
-            ctx: ctx2,
-            drawCurves,
-            level,
-            offsets,
-            oobLimit,
-            viewWidth: view.width,
-            hideTiny: true,
-            height,
-        });
-    }
-}
-function drawMouseoverClickMap(model) {
-    var _a;
-    const { level, clickId, mouseoverId } = model;
-    const highResolutionScaling = 1;
-    const view = (0, util_1.getContainingView)(model);
-    const drawCurves = view.drawCurves;
-    const height = model.height;
-    const width = view.width;
-    const ctx = (_a = model.mouseoverCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-    const offsets = view.views.map(v => v.offsetPx);
-    if (!ctx) {
-        return;
-    }
-    ctx.resetTransform();
-    ctx.scale(highResolutionScaling, highResolutionScaling);
-    ctx.clearRect(0, 0, width, height);
-    ctx.strokeStyle = 'rgba(0, 0, 0, 0.9)';
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
-    const feature1 = model.featMap[mouseoverId || ''];
-    if (feature1) {
-        (0, util_2.drawMatchSimple)({
-            cb: ctx => {
-                ctx.fill();
-            },
-            feature: feature1,
-            level,
-            ctx,
-            oobLimit,
-            viewWidth: view.width,
-            drawCurves,
-            offsets,
-            height,
-        });
-    }
-    const feature2 = model.featMap[clickId || ''];
-    if (feature2) {
-        (0, util_2.drawMatchSimple)({
-            cb: ctx => {
-                ctx.stroke();
-            },
-            feature: feature2,
-            ctx,
-            level,
-            oobLimit,
-            viewWidth: view.width,
-            drawCurves,
-            offsets,
-            height,
-        });
-    }
-}

package/dist/LinearSyntenyDisplay/index.d.ts

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

package/dist/LinearSyntenyDisplay/index.js

@@ -1,56 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = LinearSyntenyDisplayF;
-const react_1 = require("react");
-const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
-const configSchemaF_1 = __importDefault(require("./configSchemaF"));
-const model_1 = __importDefault(require("./model"));
-function LinearSyntenyDisplayF(pluginManager) {
-    pluginManager.addDisplayType(() => {
-        const configSchema = (0, configSchemaF_1.default)(pluginManager);
-        return new DisplayType_1.default({
-            name: 'LinearSyntenyDisplay',
-            configSchema,
-            stateModel: (0, model_1.default)(configSchema),
-            trackType: 'SyntenyTrack',
-            viewType: 'LinearSyntenyViewHelper',
-            ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/Component')))),
-        });
-    });
-}