@jbrowse/plugin-linear-comparative-view 2.9.0 → 2.10.1

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -29,16 +29,41 @@ 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");
+const mobx_1 = require("mobx");
+const mui_1 = require("tss-react/mui");
 // locals
 const SyntenyTooltip_1 = __importDefault(require("./SyntenyTooltip"));
 const drawSynteny_1 = require("../drawSynteny");
+const SyntenyContextMenu_1 = __importDefault(require("./SyntenyContextMenu"));
+const useStyles = (0, mui_1.makeStyles)()({
+    pix: {
+        imageRendering: 'pixelated',
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        position: 'absolute',
+    },
+    rel: {
+        position: 'relative',
+    },
+    abs: {
+        position: 'absolute',
+    },
+    none: {
+        pointEvents: 'none',
+    },
+});
 const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, }) {
-    const highResolutionScaling = 1;
+    const { classes, cx } = useStyles();
+    const xOffset = (0, react_1.useRef)(0);
+    const currScrollFrame = (0, react_1.useRef)();
     const view = (0, util_1.getContainingView)(model);
     const height = view.middleComparativeHeight;
     const width = view.width;
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
     const [tooltip, setTooltip] = (0, react_1.useState)('');
     const [currX, setCurrX] = (0, react_1.useState)();
+    const [mouseCurrDownX, setMouseCurrDownX] = (0, react_1.useState)();
+    const [mouseInitialDownX, setMouseInitialDownX] = (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), 
@@ -53,108 +78,172 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     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;
+    return (react_1.default.createElement("div", { className: classes.rel },
+        react_1.default.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
+        react_1.default.createElement("canvas", { ref: k2, onWheel: event => {
+                if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
+                    xOffset.current += event.deltaX;
                 }
-                const rect = ref1.getBoundingClientRect();
-                const ctx1 = ref1.getContext('2d');
-                const ctx2 = ref2.getContext('2d');
-                if (!ctx1 || !ctx2) {
-                    return;
+                if (currScrollFrame.current === undefined) {
+                    currScrollFrame.current = requestAnimationFrame(() => {
+                        (0, mobx_1.transaction)(() => {
+                            for (const v of view.views) {
+                                v.horizontalScroll(xOffset.current);
+                            }
+                            xOffset.current = 0;
+                            currScrollFrame.current = undefined;
+                        });
+                    });
                 }
-                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('');
+            }, onMouseMove: event => {
+                var _a;
+                if (mouseCurrDownX !== undefined) {
+                    xOffset.current += mouseCurrDownX - event.clientX;
+                    setMouseCurrDownX(event.clientX);
+                    if (currScrollFrame.current === undefined) {
+                        currScrollFrame.current = requestAnimationFrame(() => {
+                            (0, mobx_1.transaction)(() => {
+                                for (const v of view.views) {
+                                    v.horizontalScroll(xOffset.current);
+                                }
+                                xOffset.current = 0;
+                                currScrollFrame.current = undefined;
+                            });
+                        });
+                    }
                 }
-                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}`);
+                else {
+                    const ref1 = model.clickMapCanvas;
+                    const ref2 = model.cigarClickMapCanvas;
+                    if (!ref1 || !ref2) {
+                        return;
                     }
-                    if (cigar[cigarIdx]) {
-                        tooltip.push(`CIGAR operator: ${cigar[cigarIdx]}${cigar[cigarIdx + 1]}`);
+                    const rect = ref1.getBoundingClientRect();
+                    const ctx1 = ref1.getContext('2d');
+                    const ctx2 = ref2.getContext('2d');
+                    if (!ctx1 || !ctx2) {
+                        return;
                     }
-                    if (n1 && n2) {
-                        tooltip.push(`Name 1: ${n1}`, `Name 2: ${n2}`);
+                    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];
+                        const unitMultiplier2 = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / cigar.length);
+                        const cigarIdx = (0, drawSynteny_1.getId)(r2, g2, b2, unitMultiplier2);
+                        setTooltip(getTooltip(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
                     }
-                    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'),
-                        },
-                    }));
+            }, onMouseLeave: () => {
+                model.setMouseoverId(undefined);
+                setMouseInitialDownX(undefined);
+                setMouseCurrDownX(undefined);
+            }, onMouseDown: evt => {
+                setMouseCurrDownX(evt.clientX);
+                setMouseInitialDownX(evt.clientX);
+            }, onMouseUp: evt => {
+                setMouseCurrDownX(undefined);
+                if (mouseInitialDownX !== undefined &&
+                    Math.abs(evt.clientX - mouseInitialDownX) < 5) {
+                    onSyntenyClick(evt, model);
                 }
-            }, "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));
+            }, onContextMenu: evt => {
+                onSyntenyContextClick(evt, model, setAnchorEl);
+            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+        react_1.default.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
+        react_1.default.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
+        model.mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip_1.default, { title: tooltip })) : null,
+        anchorEl ? (react_1.default.createElement(SyntenyContextMenu_1.default, { model: model, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined) })) : null));
 });
+function onSyntenyClick(event, model) {
+    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 feat = model.featPositions[id];
+    if (feat) {
+        const { f } = feat;
+        model.setClickId(f.id());
+        const session = (0, util_1.getSession)(model);
+        if ((0, util_1.isSessionModelWithWidgets)(session)) {
+            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                featureData: {
+                    feature1: f.toJSON(),
+                    feature2: f.get('mate'),
+                },
+            }));
+        }
+    }
+    return feat;
+}
+function onSyntenyContextClick(event, model, setAnchorEl) {
+    event.preventDefault();
+    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;
+    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) {
+        model.setClickId(f.f.id());
+        setAnchorEl({ clientX, clientY, feature: f });
+    }
+}
+function getTooltip(f, cigarOp, cigarOpLen) {
+    // @ts-expect-error
+    const f1 = f.toJSON();
+    const f2 = f1.mate;
+    const l1 = f1.end - f1.start;
+    const l2 = f2.end - f2.start;
+    const identity = f1.identity;
+    const n1 = f1.name;
+    const n2 = f2.name;
+    return [
+        `Loc1: ${(0, util_1.assembleLocString)(f1)}`,
+        `Loc2: ${(0, util_1.assembleLocString)(f2)}`,
+        `Inverted: ${f1.strand === -1}`,
+        `Query len: ${l1.toLocaleString('en-US')}`,
+        `Target len: ${l2.toLocaleString('en-US')}`,
+        identity ? `Identity: ${identity.toPrecision(2)}` : '',
+        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
+        n1 ? `Name 1: ${n1}` : '',
+        n2 ? `Name 1: ${n2}` : '',
+    ]
+        .filter(f => !!f)
+        .join('<br/>');
+}
 exports.default = LinearSyntenyRendering;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LinearSyntenyDisplayModel } from '../model';
+interface ClickCoord {
+    clientX: number;
+    clientY: number;
+    feature: any;
+}
+export default function SyntenyContextMenu({ model, onClose, anchorEl, }: {
+    onClose: () => void;
+    model: LinearSyntenyDisplayModel;
+    anchorEl: ClickCoord;
+}): React.JSX.Element;
+export {};

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const ui_1 = require("@jbrowse/core/ui");
+function SyntenyContextMenu({ model, onClose, anchorEl, }) {
+    const view = (0, util_1.getContainingView)(model);
+    const { clientX, clientY, feature } = anchorEl;
+    return (react_1.default.createElement(ui_1.Menu, { onMenuItemClick: (event, callback) => {
+            callback(event);
+            onClose();
+        }, anchorEl: {
+            nodeType: 1,
+            getBoundingClientRect: () => {
+                const x = clientX;
+                const y = clientY;
+                return {
+                    top: y,
+                    left: x,
+                    bottom: y,
+                    right: x,
+                    width: 0,
+                    height: 0,
+                    x,
+                    y,
+                    toJSON() { },
+                };
+            },
+        }, onClose: onClose, open: Boolean(anchorEl), menuItems: [
+            {
+                label: 'Center on feature',
+                onClick: () => {
+                    const { f } = feature;
+                    const start = f.get('start');
+                    const end = f.get('end');
+                    const refName = f.get('refName');
+                    const mate = f.get('mate');
+                    view.views[0]
+                        .navToLocString(`${refName}:${start}-${end}`)
+                        .catch(e => {
+                        console.error(e);
+                        (0, util_1.getSession)(model).notify(`${e}`, 'error');
+                    });
+                    view.views[1]
+                        .navToLocString(`${mate.refName}:${mate.start}-${mate.end}`)
+                        .catch(e => {
+                        console.error(e);
+                        (0, util_1.getSession)(model).notify(`${e}`, 'error');
+                    });
+                },
+            },
+        ] }));
+}
+exports.default = SyntenyContextMenu;

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

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

package/dist/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -1,33 +1,13 @@
 "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 react_1 = __importDefault(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 react_2 = require("@floating-ui/react");
 const ui_1 = require("@jbrowse/core/ui");
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -49,34 +29,22 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         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 SyntenyTooltip = (0, mobx_react_1.observer)(function ({ title }) {
+    var _a, _b;
+    const theme = (0, material_1.useTheme)();
     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 },
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+        placement: 'right',
+    });
+    const clientPoint = (0, react_2.useClientPoint)(context);
+    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return title ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
             react_1.default.createElement(ui_1.SanitizedHTML, { html: title })))) : null;
 });
 exports.default = SyntenyTooltip;

package/dist/LinearSyntenyDisplay/model.d.ts

@@ -5,7 +5,7 @@ import { Feature } from '@jbrowse/core/util';
 interface Pos {
     offsetPx: number;
 }
-interface FeatPos {
+export interface FeatPos {
     p11: Pos;
     p12: Pos;
     p21: Pos;
@@ -15,7 +15,8 @@ interface FeatPos {
 }
 /**
  * #stateModel LinearSyntenyDisplay
- * extends `LinearComparativeDisplay` model
+ * extends
+ * - [LinearComparativeDisplay](../linearcomparativedisplay)
  */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -77,17 +78,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
-         * #action
-         */
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
-    renderProps(): any;
+    renderProps(): any; /**
+     * #getter
+     */
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[]; /**
+     * #getter
+     * used for synteny svg rendering
+     */
     regionCannotBeRendered(): null;
 } & {
     setMessage(arg?: string | undefined): void;
@@ -154,17 +158,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
-                 * #action
-                 */
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
-            renderProps(): any;
+            renderProps(): any; /**
+             * #getter
+             */
             readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
             readonly DisplayMessageComponent: import("react").FC<any> | undefined;
             trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[]; /**
+             * #getter
+             * used for synteny svg rendering
+             */
             regionCannotBeRendered(): null;
         } & {
             setMessage(arg?: string | undefined): void;
@@ -226,17 +233,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
-                 * #action
-                 */
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
-            renderProps(): any;
+            renderProps(): any; /**
+             * #getter
+             */
             readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
             readonly DisplayMessageComponent: import("react").FC<any> | undefined;
             trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+            readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[]; /**
+             * #getter
+             * used for synteny svg rendering
+             */
             regionCannotBeRendered(): null;
         } & {
             setMessage(arg?: string | undefined): void;

package/dist/LinearSyntenyDisplay/model.js

@@ -32,7 +32,8 @@ const configuration_1 = require("@jbrowse/core/configuration");
 const stateModelFactory_1 = __importDefault(require("../LinearComparativeDisplay/stateModelFactory"));
 /**
  * #stateModel LinearSyntenyDisplay
- * extends `LinearComparativeDisplay` model
+ * extends
+ * - [LinearComparativeDisplay](../linearcomparativedisplay)
  */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types