@jbrowse/plugin-linear-comparative-view 2.6.1

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -0,0 +1,160 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
+// locals
+const SyntenyTooltip_1 = __importDefault(require("./SyntenyTooltip"));
+const drawSynteny_1 = require("../drawSynteny");
+exports.default = (0, mobx_react_1.observer)(function LinearSyntenyRendering({ model, }) {
+    const highResolutionScaling = 1;
+    const view = (0, util_1.getContainingView)(model);
+    const height = view.middleComparativeHeight;
+    const width = view.width;
+    const [tooltip, setTooltip] = (0, react_1.useState)('');
+    const [currX, setCurrX] = (0, react_1.useState)();
+    const [currY, setCurrY] = (0, react_1.useState)();
+    // these useCallbacks avoid new refs from being created on any mouseover, etc.
+    const k1 = (0, react_1.useCallback)((ref) => model.setMouseoverCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k2 = (0, react_1.useCallback)((ref) => model.setMainCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k3 = (0, react_1.useCallback)((ref) => model.setClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k4 = (0, react_1.useCallback)((ref) => model.setCigarClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    return (react_1.default.createElement("div", { style: { position: 'relative' } },
+        react_1.default.createElement("canvas", { ref: k1, width: width, height: height, style: { width, height, position: 'absolute', pointerEvents: 'none' } }),
+        react_1.default.createElement("canvas", { ref: k2, onMouseMove: event => {
+                var _a;
+                const ref1 = model.clickMapCanvas;
+                const ref2 = model.cigarClickMapCanvas;
+                if (!ref1 || !ref2) {
+                    return;
+                }
+                const rect = ref1.getBoundingClientRect();
+                const ctx1 = ref1.getContext('2d');
+                const ctx2 = ref2.getContext('2d');
+                if (!ctx1 || !ctx2) {
+                    return;
+                }
+                const { clientX, clientY } = event;
+                const x = clientX - rect.left;
+                const y = clientY - rect.top;
+                setCurrX(clientX);
+                setCurrY(clientY);
+                const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+                const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
+                const unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
+                const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
+                model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
+                if (id === -1) {
+                    setTooltip('');
+                }
+                else if (model.featPositions[id]) {
+                    const { f, cigar } = model.featPositions[id];
+                    // @ts-expect-error
+                    const f1 = f.toJSON();
+                    const f2 = f1.mate;
+                    const unitMultiplier2 = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / cigar.length);
+                    const cigarIdx = (0, drawSynteny_1.getId)(r2, g2, b2, unitMultiplier2);
+                    const l1 = f1.end - f1.start;
+                    const l2 = f2.end - f2.start;
+                    const identity = f1.identity;
+                    const n1 = f1.name;
+                    const n2 = f2.name;
+                    const tooltip = [
+                        `Loc1: ${(0, util_1.assembleLocString)(f1)}`,
+                        `Loc2: ${(0, util_1.assembleLocString)(f2)}`,
+                        `Inverted: ${f1.strand === -1}`,
+                        `Query len: ${l1}`,
+                        `Target len: ${l2}`,
+                    ];
+                    if (identity) {
+                        tooltip.push(`Identity: ${identity}`);
+                    }
+                    if (cigar[cigarIdx]) {
+                        tooltip.push(`CIGAR operator: ${cigar[cigarIdx]}${cigar[cigarIdx + 1]}`);
+                    }
+                    if (n1 && n2) {
+                        tooltip.push(`Name 1: ${n1}`, `Name 2: ${n2}`);
+                    }
+                    setTooltip(tooltip.join('<br/>'));
+                }
+            }, onMouseLeave: () => model.setMouseoverId(undefined), onClick: event => {
+                const ref1 = model.clickMapCanvas;
+                const ref2 = model.cigarClickMapCanvas;
+                if (!ref1 || !ref2) {
+                    return;
+                }
+                const rect = ref1.getBoundingClientRect();
+                const ctx1 = ref1.getContext('2d');
+                const ctx2 = ref2.getContext('2d');
+                if (!ctx1 || !ctx2) {
+                    return;
+                }
+                const x = event.clientX - rect.left;
+                const y = event.clientY - rect.top;
+                const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+                const unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
+                const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
+                const f = model.featPositions[id];
+                if (!f) {
+                    return;
+                }
+                model.setClickId(f.f.id());
+                const session = (0, util_1.getSession)(model);
+                if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                    session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                        featureData: {
+                            feature1: f.f.toJSON(),
+                            feature2: f.f.get('mate'),
+                        },
+                    }));
+                }
+            }, "data-testid": "synteny_canvas", style: { width, height, position: 'absolute' }, width: width * highResolutionScaling, height: height * highResolutionScaling }),
+        react_1.default.createElement("canvas", { ref: k3, style: {
+                imageRendering: 'pixelated',
+                pointerEvents: 'none',
+                visibility: 'hidden',
+                position: 'absolute',
+            }, width: width, height: height }),
+        react_1.default.createElement("canvas", { ref: k4, style: {
+                imageRendering: 'pixelated',
+                pointerEvents: 'none',
+                visibility: 'hidden',
+                position: 'absolute',
+            }, width: width, height: height }),
+        model.mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip_1.default, { x: currX, y: currY, title: tooltip })) : null));
+});
+//# sourceMappingURL=LinearSyntenyRendering.js.map

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearSyntenyRendering.js","sourceRoot":"","sources":["../../../src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx"],"names":[],"mappings":"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"}

package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const SyntenyTooltip: ({ x, y, title, }: {
+    x: number;
+    y: number;
+    title: string;
+}) => React.JSX.Element | null;
+export default SyntenyTooltip;

package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -0,0 +1,83 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const react_popper_1 = require("react-popper");
+const ui_1 = require("@jbrowse/core/ui");
+function round(value) {
+    return Math.round(value * 1e5) / 1e5;
+}
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    // these styles come from
+    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+    tooltip: {
+        position: 'absolute',
+        pointerEvents: 'none',
+        backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.common.white,
+        fontFamily: theme.typography.fontFamily,
+        padding: '4px 8px',
+        fontSize: theme.typography.pxToRem(12),
+        lineHeight: `${round(14 / 10)}em`,
+        maxWidth: 300,
+        wordWrap: 'break-word',
+    },
+}));
+const SyntenyTooltip = (0, mobx_react_1.observer)(function ({ x, y, title, }) {
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const { classes } = useStyles();
+    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+    const virtElement = (0, react_1.useMemo)(() => ({
+        getBoundingClientRect: () => {
+            return {
+                top: y,
+                left: x + width / 2,
+                bottom: y,
+                right: x,
+                width: 0,
+                height: 0,
+                x,
+                y,
+                toJSON() { },
+            };
+        },
+    }), [x, y, width]);
+    const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl);
+    return title ? (react_1.default.createElement(material_1.Portal, null,
+        react_1.default.createElement("div", { ref: ref => {
+                setWidth((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().width) || 0);
+                setAnchorEl(ref);
+            }, className: classes.tooltip, 
+            // zIndex needed to go over widget drawer
+            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
+            react_1.default.createElement(ui_1.SanitizedHTML, { html: title })))) : null;
+});
+exports.default = SyntenyTooltip;
+//# sourceMappingURL=SyntenyTooltip.js.map

package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyntenyTooltip.js","sourceRoot":"","sources":["../../../src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgD;AAChD,2CAAqC;AACrC,4CAA6C;AAC7C,uCAA0C;AAC1C,+CAAwC;AACxC,yCAAgD;AAEhD,SAAS,KAAK,CAAC,KAAa;IAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;AACtC,CAAC;AAED,MAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,yBAAyB;IACzB,iGAAiG;IACjG,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE,IAAA,gBAAK,EAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;QACpD,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;QACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;QACjC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;QACvC,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QACtC,UAAU,EAAE,GAAG,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI;QACjC,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,cAAc,GAAG,IAAA,qBAAQ,EAAC,UAAU,EACxC,CAAC,EACD,CAAC,EACD,KAAK,GAKN;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAA;IACrC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAA;IACrE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAE/B,4EAA4E;IAC5E,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,CAAC;QACL,qBAAqB,EAAE,GAAG,EAAE;YAC1B,OAAO;gBACL,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC;gBACnB,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,CAAC;gBACD,CAAC;gBACD,MAAM,KAAI,CAAC;aACZ,CAAA;QACH,CAAC;KACF,CAAC,EACF,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CACd,CAAA;IACD,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,wBAAS,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;IAE/D,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BAAC,iBAAM;QACL,uCACE,GAAG,EAAE,GAAG,CAAC,EAAE;gBACT,QAAQ,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,CAAC,CAAA;gBACjD,WAAW,CAAC,GAAG,CAAC,CAAA;YAClB,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,OAAO;YAC1B,yCAAyC;YACzC,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KACvC,UAAU,CAAC,MAAM;YAErB,8BAAC,kBAAa,IAAC,IAAI,EAAE,KAAK,GAAI,CAC1B,CACC,CACV,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,kBAAe,cAAc,CAAA"}

package/dist/LinearSyntenyDisplay/components/util.d.ts

@@ -0,0 +1,27 @@
+import { Feature } from '@jbrowse/core/util';
+interface Pos {
+    offsetPx: number;
+}
+interface FeatPos {
+    p11: Pos;
+    p12: Pos;
+    p21: Pos;
+    p22: Pos;
+    f: Feature;
+    cigar: string[];
+}
+export declare function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }: {
+    feature: FeatPos;
+    ctx: CanvasRenderingContext2D;
+    offsets: number[];
+    oobLimit: number;
+    viewWidth: number;
+    cb: (ctx: CanvasRenderingContext2D) => void;
+    height: number;
+    drawCurves?: boolean;
+    hideTiny?: boolean;
+}): void;
+export declare function draw(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number, drawCurves?: boolean): void;
+export declare function drawBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number): void;
+export declare function drawBezierBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number): void;
+export {};

package/dist/LinearSyntenyDisplay/components/util.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawBezierBox = exports.drawBox = exports.draw = exports.drawMatchSimple = void 0;
+const util_1 = require("@jbrowse/core/util");
+function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
+    const { p11, p12, p21, p22 } = feature;
+    const x11 = p11.offsetPx - offsets[0];
+    const x12 = p12.offsetPx - offsets[0];
+    const x21 = p21.offsetPx - offsets[1];
+    const x22 = p22.offsetPx - offsets[1];
+    const l1 = Math.abs(x12 - x11);
+    const l2 = Math.abs(x22 - x21);
+    const y1 = 0;
+    const y2 = height;
+    const mid = (y2 - y1) / 2;
+    const minX = Math.min(x21, x22);
+    const maxX = Math.max(x21, x22);
+    if (!(0, util_1.doesIntersect2)(minX, maxX, -oobLimit, viewWidth + oobLimit)) {
+        return;
+    }
+    // drawing a line if the results are thin: drawing a line results in much
+    // less pixellation than filling in a thin polygon
+    if (l1 <= 1 && l2 <= 1) {
+        // hideTiny can be used to avoid drawing mouseover for thin lines in this
+        // case
+        if (!hideTiny) {
+            ctx.beginPath();
+            ctx.moveTo(x11, y1);
+            if (drawCurves) {
+                ctx.bezierCurveTo(x11, mid, x21, mid, x21, y2);
+            }
+            else {
+                ctx.lineTo(x21, y2);
+            }
+            ctx.stroke();
+        }
+    }
+    else {
+        draw(ctx, x11, x12, y1, x22, x21, y2, mid, drawCurves);
+        cb(ctx);
+    }
+}
+exports.drawMatchSimple = drawMatchSimple;
+function draw(ctx, x1, x2, y1, x3, x4, y2, mid, drawCurves) {
+    if (drawCurves) {
+        drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid);
+    }
+    else {
+        drawBox(ctx, x1, x2, y1, x3, x4, y2);
+    }
+}
+exports.draw = draw;
+function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y1);
+    ctx.lineTo(x3, y2);
+    ctx.lineTo(x4, y2);
+    ctx.closePath();
+    ctx.fill();
+}
+exports.drawBox = drawBox;
+function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
+    const len1 = Math.abs(x1 - x2);
+    const len2 = Math.abs(x1 - x2);
+    // heuristic to not draw hourglass inversions with bezier curves when they
+    // are thin and far apart because it results in areas that are not drawn well
+    // demo https://codesandbox.io/s/fast-glitter-q3b1or?file=/src/index.js
+    if (len1 < 5 && len2 < 5 && x2 < x1 && Math.abs(x1 - x3) > 100) {
+        const tmp = x1;
+        x1 = x2;
+        x2 = tmp;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y1);
+    ctx.bezierCurveTo(x2, mid, x3, mid, x3, y2);
+    ctx.lineTo(x4, y2);
+    ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1);
+    ctx.closePath();
+    ctx.fill();
+}
+exports.drawBezierBox = drawBezierBox;
+//# sourceMappingURL=util.js.map

package/dist/LinearSyntenyDisplay/components/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/LinearSyntenyDisplay/components/util.ts"],"names":[],"mappings":";;;AAAA,6CAA4D;AAe5D,SAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,GAAG,EACH,OAAO,EACP,EAAE,EACF,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT;IACC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,OAAO,CAAA;IAEtC,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IAErC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IAC9B,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IAC9B,MAAM,EAAE,GAAG,CAAC,CAAA;IACZ,MAAM,EAAE,GAAG,MAAM,CAAA;IACjB,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;IACzB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IAE/B,IAAI,CAAC,IAAA,qBAAc,EAAC,IAAI,EAAE,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,QAAQ,CAAC,EAAE;QAChE,OAAM;KACP;IAED,yEAAyE;IACzE,kDAAkD;IAClD,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE;QACtB,yEAAyE;QACzE,OAAO;QACP,IAAI,CAAC,QAAQ,EAAE;YACb,GAAG,CAAC,SAAS,EAAE,CAAA;YACf,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;YACnB,IAAI,UAAU,EAAE;gBACd,GAAG,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAA;aAC/C;iBAAM;gBACL,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;aACpB;YACD,GAAG,CAAC,MAAM,EAAE,CAAA;SACb;KACF;SAAM;QACL,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC,CAAA;QACtD,EAAE,CAAC,GAAG,CAAC,CAAA;KACR;AACH,CAAC;AA3DD,0CA2DC;AAED,SAAgB,IAAI,CAClB,GAA6B,EAC7B,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,GAAW,EACX,UAAoB;IAEpB,IAAI,UAAU,EAAE;QACd,aAAa,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;KAChD;SAAM;QACL,OAAO,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;KACrC;AACH,CAAC;AAhBD,oBAgBC;AAED,SAAgB,OAAO,CACrB,GAA6B,EAC7B,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU;IAEV,GAAG,CAAC,SAAS,EAAE,CAAA;IACf,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,SAAS,EAAE,CAAA;IACf,GAAG,CAAC,IAAI,EAAE,CAAA;AACZ,CAAC;AAhBD,0BAgBC;AAED,SAAgB,aAAa,CAC3B,GAA6B,EAC7B,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,GAAW;IAEX,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;IAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;IAE9B,0EAA0E;IAC1E,6EAA6E;IAC7E,uEAAuE;IACvE,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE;QAC9D,MAAM,GAAG,GAAG,EAAE,CAAA;QACd,EAAE,GAAG,EAAE,CAAA;QACP,EAAE,GAAG,GAAG,CAAA;KACT;IACD,GAAG,CAAC,SAAS,EAAE,CAAA;IACf,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,aAAa,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAC3C,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAClB,GAAG,CAAC,aAAa,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAC3C,GAAG,CAAC,SAAS,EAAE,CAAA;IACf,GAAG,CAAC,IAAI,EAAE,CAAA;AACZ,CAAC;AA7BD,sCA6BC"}

package/dist/LinearSyntenyDisplay/configSchemaF.d.ts

@@ -0,0 +1,23 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+/**
+ * #config LinearSyntenyDisplay
+ */
+declare function configSchemaFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    /**
+     * #slot
+     * currently unused
+     */
+    trackIds: {
+        type: string;
+        defaultValue: never[];
+    };
+    /**
+     * #slot
+     * currently unused
+     */
+    middle: {
+        type: string;
+        defaultValue: boolean;
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+export default configSchemaFactory;

package/dist/LinearSyntenyDisplay/configSchemaF.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const configuration_1 = require("@jbrowse/core/configuration");
+const configSchemaF_1 = __importDefault(require("../LinearComparativeDisplay/configSchemaF"));
+/**
+ * #config LinearSyntenyDisplay
+ */
+function configSchemaFactory(pluginManager) {
+    return (0, configuration_1.ConfigurationSchema)('LinearSyntenyDisplay', {
+        /**
+         * #slot
+         * currently unused
+         */
+        trackIds: {
+            type: 'stringArray',
+            defaultValue: [],
+        },
+        /**
+         * #slot
+         * currently unused
+         */
+        middle: { type: 'boolean', defaultValue: true },
+    }, {
+        /**
+         * #baseConfiguration
+         * this refers to the LinearComparativeDisplay
+         */
+        baseConfiguration: (0, configSchemaF_1.default)(pluginManager),
+        explicitlyTyped: true,
+    });
+}
+exports.default = configSchemaFactory;
+//# sourceMappingURL=configSchemaF.js.map

package/dist/LinearSyntenyDisplay/configSchemaF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configSchemaF.js","sourceRoot":"","sources":["../../src/LinearSyntenyDisplay/configSchemaF.ts"],"names":[],"mappings":";;;;;AAAA,+DAAiE;AAEjE,8FAAyE;AAEzE;;GAEG;AACH,SAAS,mBAAmB,CAAC,aAA4B;IACvD,OAAO,IAAA,mCAAmB,EACxB,sBAAsB,EACtB;QACE;;;WAGG;QACH,QAAQ,EAAE;YACR,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,EAAE;SACjB;QAED;;;WAGG;QACH,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE;KAChD,EACD;QACE;;;WAGG;QACH,iBAAiB,EAAE,IAAA,uBAAiB,EAAC,aAAa,CAAC;QACnD,eAAe,EAAE,IAAI;KACtB,CACF,CAAA;AACH,CAAC;AAED,kBAAe,mBAAmB,CAAA"}

package/dist/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -0,0 +1,5 @@
+import { LinearSyntenyDisplayModel } from './model';
+export declare const MAX_COLOR_RANGE: number;
+export declare function getId(r: number, g: number, b: number, unitMultiplier: number): number;
+export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): void;
+export declare function drawMouseoverSynteny(model: LinearSyntenyDisplayModel): void;