@jbrowse/plugin-linear-comparative-view 2.15.4 → 2.16.1

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, lazy } from 'react';
+import React, { useState, useCallback, useRef, lazy, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { getContainingView } from '@jbrowse/core/util';
 import { transaction } from 'mobx';
@@ -17,21 +17,23 @@ const useStyles = makeStyles()({
     rel: {
         position: 'relative',
     },
-    abs: {
+    mouseoverCanvas: {
+        imageRendering: 'pixelated',
         position: 'absolute',
-    },
-    none: {
         pointEvents: 'none',
     },
+    mainCanvas: {
+        position: 'absolute',
+    },
 });
 const LinearSyntenyRendering = observer(function ({ model, }) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
+    const { mouseoverId, height } = model;
     const xOffset = useRef(0);
-    const currScrollFrame = useRef();
     const view = getContainingView(model);
-    const height = view.middleComparativeHeight;
     const width = view.width;
     const delta = useRef(0);
+    const scheduled = useRef(false);
     const timeout = useRef();
     const [anchorEl, setAnchorEl] = useState();
     const [tooltip, setTooltip] = useState('');
@@ -39,18 +41,25 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const [mouseCurrDownX, setMouseCurrDownX] = useState();
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
-    const { mouseoverId } = model;
+    const mainSyntenyCanvasRefp = useRef();
     // these useCallbacks avoid new refs from being created on any mouseover,
     // etc.
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k1 = useCallback((ref) => {
+    const mouseoverDetectionCanvasRef = useCallback((ref) => {
         model.setMouseoverCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k2 = useCallback((ref) => {
+    const mainSyntenyCanvasRef = useCallback((ref) => {
         model.setMainCanvasRef(ref);
+        mainSyntenyCanvasRefp.current = ref; // this ref is additionally used in useEffect below
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    useEffect(() => {
+        var _a;
         function onWheel(event) {
             event.preventDefault();
             if (event.ctrlKey) {
@@ -62,11 +71,14 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                     clearTimeout(timeout.current);
                 }
                 timeout.current = setTimeout(() => {
+                    var _a;
                     for (const v of view.views) {
                         v.setScaleFactor(1);
                         v.zoomTo(delta.current > 0
                             ? v.bpPerPx * (1 + delta.current)
-                            : v.bpPerPx / (1 - delta.current), event.clientX - ((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().left) || 0));
+                            : v.bpPerPx / (1 - delta.current), event.clientX -
+                            (((_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) ||
+                                0));
                     }
                     delta.current = 0;
                 }, 300);
@@ -75,56 +87,55 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                 if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
                     xOffset.current += event.deltaX / 2;
                 }
-                if (currScrollFrame.current === undefined) {
-                    currScrollFrame.current = requestAnimationFrame(() => {
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    window.requestAnimationFrame(() => {
                         transaction(() => {
                             for (const v of view.views) {
                                 v.horizontalScroll(xOffset.current);
                             }
                             xOffset.current = 0;
-                            currScrollFrame.current = undefined;
+                            scheduled.current = false;
                         });
                     });
                 }
             }
         }
-        ref === null || ref === void 0 ? void 0 : ref.addEventListener('wheel', onWheel);
-        // this is a react 19-ism to have a cleanup in the ref callback
-        // https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs
-        // note: it warns in earlier versions of react
+        (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', onWheel);
         return () => {
-            ref === null || ref === void 0 ? void 0 : ref.removeEventListener('wheel', onWheel);
+            var _a;
+            (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
         };
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k3 = useCallback((ref) => {
+    const clickMapCanvasRef = useCallback((ref) => {
         model.setClickMapCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k4 = useCallback((ref) => {
+    const cigarClickMapCanvasRef = useCallback((ref) => {
         model.setCigarClickMapCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     return (React.createElement("div", { className: classes.rel },
-        React.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
-        React.createElement("canvas", { ref: k2, onMouseMove: event => {
+        React.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
+        React.createElement("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
                     setMouseCurrDownX(event.clientX);
-                    if (currScrollFrame.current === undefined) {
-                        currScrollFrame.current = requestAnimationFrame(() => {
+                    if (!scheduled.current) {
+                        scheduled.current = true;
+                        window.requestAnimationFrame(() => {
                             transaction(() => {
                                 for (const v of view.views) {
                                     v.horizontalScroll(xOffset.current);
                                 }
                                 xOffset.current = 0;
-                                currScrollFrame.current = undefined;
+                                scheduled.current = false;
                             });
                         });
                     }
@@ -158,7 +169,11 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                         const { f, cigar } = model.featPositions[id];
                         const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
                         const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
-                        setTooltip(getTooltip(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
+                        setTooltip(getTooltip({
+                            feature: f,
+                            cigarOp: cigar[cigarIdx],
+                            cigarOpLen: cigar[cigarIdx + 1],
+                        }));
                     }
                 }
             }, onMouseLeave: () => {
@@ -176,9 +191,9 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                 }
             }, onContextMenu: evt => {
                 onSynContextClick(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
-        React.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
-        React.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
+            }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }),
+        React.createElement("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }),
+        React.createElement("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }),
         mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
         anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
                 setAnchorEl(undefined);

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -33,13 +33,17 @@ export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
                     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);
-                        getSession(model).notifyError(`${e}`, e);
+                    const l1 = view.views[model.level];
+                    const l2 = view.views[model.level + 1];
+                    l1.navToLocString(`${refName}:${start}-${end}`).catch((e) => {
+                        const err = `${l1.assemblyNames[0]}:${e}`;
+                        console.error(err);
+                        getSession(model).notifyError(err, e);
                     });
-                    view.views[1].navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
-                        console.error(e);
-                        getSession(model).notifyError(`${e}`, e);
+                    l2.navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
+                        const err = `${l2.assemblyNames[0]}:${e}`;
+                        console.error(err);
+                        getSession(model).notifyError(err, e);
                     });
                 },
             },

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

@@ -19,10 +19,11 @@ interface FeatPos {
     f: Feature;
     cigar: string[];
 }
-export declare function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }: {
+export declare function drawMatchSimple({ feature, ctx, offsets, level, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }: {
     feature: FeatPos;
     ctx: CanvasRenderingContext2D;
     offsets: number[];
+    level: number;
     oobLimit: number;
     viewWidth: number;
     cb: (ctx: CanvasRenderingContext2D) => void;
@@ -35,5 +36,9 @@ export declare function drawBox(ctx: CanvasRenderingContext2D, x1: number, x2: n
 export declare function drawBezierBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number): void;
 export declare function onSynClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model").FeatPos | undefined;
 export declare function onSynContextClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel, setAnchorEl: (arg: ClickCoord) => void): void;
-export declare function getTooltip(f: Feature, cigarOp?: string, cigarOpLen?: string): string;
+export declare function getTooltip({ feature, cigarOp, cigarOpLen, }: {
+    feature: Feature;
+    cigarOp?: string;
+    cigarOpLen?: string;
+}): string;
 export {};

package/esm/LinearSyntenyDisplay/components/util.js

@@ -1,12 +1,12 @@
 import { assembleLocString, doesIntersect2, getSession, isSessionModelWithWidgets, getContainingTrack, getContainingView, } from '@jbrowse/core/util';
 // locals
 import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
-export function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
+export function drawMatchSimple({ feature, ctx, offsets, level, 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 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 y1 = 0;
@@ -54,7 +54,6 @@ export function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
     ctx.lineTo(x3, y2);
     ctx.lineTo(x4, y2);
     ctx.closePath();
-    ctx.fill();
 }
 export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     const len1 = Math.abs(x1 - x2);
@@ -74,13 +73,11 @@ export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.lineTo(x4, y2);
     ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1);
     ctx.closePath();
-    ctx.fill();
 }
 export function onSynClick(event, model) {
     const view = getContainingView(model);
     const track = getContainingTrack(model);
-    const ref1 = model.clickMapCanvas;
-    const ref2 = model.cigarClickMapCanvas;
+    const { featPositions, numFeats, clickMapCanvas: ref1, cigarClickMapCanvas: ref2, level, } = model;
     if (!ref1 || !ref2) {
         return;
     }
@@ -93,18 +90,19 @@ export function onSynClick(event, model) {
     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(MAX_COLOR_RANGE / model.numFeats);
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / numFeats);
     const id = getId(r1, g1, b1, unitMultiplier);
-    const feat = model.featPositions[id];
+    const feat = featPositions[id];
     if (feat) {
         const { f } = feat;
         model.setClickId(f.id());
         const session = getSession(model);
         if (isSessionModelWithWidgets(session)) {
-            session.showWidget(session.addWidget('BaseFeatureWidget', 'baseFeature', {
+            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
                 view,
                 track,
                 featureData: f.toJSON(),
+                level,
             }));
         }
     }
@@ -135,9 +133,9 @@ export function onSynContextClick(event, model, setAnchorEl) {
         setAnchorEl({ clientX, clientY, feature: f });
     }
 }
-export function getTooltip(f, cigarOp, cigarOpLen) {
+export function getTooltip({ feature, cigarOp, cigarOpLen, }) {
     // @ts-expect-error
-    const f1 = f.toJSON();
+    const f1 = feature.toJSON();
     const f2 = f1.mate;
     const l1 = f1.end - f1.start;
     const l2 = f2.end - f2.start;

package/esm/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,5 +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): undefined;
+export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): void;
 export declare function drawMouseoverSynteny(model: LinearSyntenyDisplayModel): void;

package/esm/LinearSyntenyDisplay/drawSynteny.js

@@ -25,25 +25,24 @@ export function drawRef(model, ctx1, ctx3) {
     const view = getContainingView(model);
     const drawCurves = view.drawCurves;
     const drawCIGAR = view.drawCIGAR;
-    const height = view.middleComparativeHeight;
+    const { level, height, featPositions } = model;
     const width = view.width;
     const bpPerPxs = view.views.map(v => v.bpPerPx);
     if (ctx3) {
         ctx3.imageSmoothingEnabled = false;
     }
     ctx1.beginPath();
-    const featPos = model.featPositions;
     const offsets = view.views.map(v => v.offsetPx);
-    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / featPos.length);
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / featPositions.length);
     // this loop is optimized to draw many thin lines with a single ctx.stroke
     // call, a separate loop below draws larger boxes
     ctx1.fillStyle = colorMap.M;
     ctx1.strokeStyle = colorMap.M;
-    for (const { p11, p12, p21, p22 } of featPos) {
-        const x11 = p11.offsetPx - offsets[0];
-        const x12 = p12.offsetPx - offsets[0];
-        const x21 = p21.offsetPx - offsets[1];
-        const x22 = p22.offsetPx - offsets[1];
+    for (const { p11, p12, p21, p22 } 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 y1 = 0;
@@ -69,11 +68,11 @@ export function drawRef(model, ctx1, ctx3) {
     // ctx.stroke once is much more efficient than calling stroke() many times
     ctx1.fillStyle = colorMap.M;
     ctx1.strokeStyle = colorMap.M;
-    for (const { p11, p12, p21, p22, f, cigar } of featPos) {
-        const x11 = p11.offsetPx - offsets[0];
-        const x12 = p12.offsetPx - offsets[0];
-        const x21 = p21.offsetPx - offsets[1];
-        const x22 = p22.offsetPx - offsets[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);
@@ -108,8 +107,8 @@ export function drawRef(model, ctx1, ctx3) {
                         px1 = cx1;
                         px2 = cx2;
                     }
-                    const d1 = len / bpPerPxs[0];
-                    const d2 = len / bpPerPxs[1];
+                    const d1 = len / bpPerPxs[level];
+                    const d2 = len / bpPerPxs[level + 1];
                     if (op === 'M' || op === '=' || op === 'X') {
                         cx1 += d1 * rev1;
                         cx2 += d2 * rev2;
@@ -135,16 +134,18 @@ export function drawRef(model, ctx1, ctx3) {
                             continuingFlag = true;
                         }
                         else {
-                            // allow rendering the dominant color when using continuing flag
-                            // if the last element of continuing was a large feature, else
-                            // just use match
+                            // allow rendering the dominant color when using continuing
+                            // flag if the last element of continuing was a large
+                            // feature, else just use match
                             ctx1.fillStyle =
                                 colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M'];
                             continuingFlag = false;
                             draw(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                            ctx1.fill();
                             if (ctx3) {
                                 ctx3.fillStyle = makeColor(idx);
                                 draw(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                ctx3.fill();
                             }
                         }
                     }
@@ -152,6 +153,7 @@ export function drawRef(model, ctx1, ctx3) {
             }
             else {
                 draw(ctx1, x11, x12, y1, x22, x21, y2, mid, drawCurves);
+                ctx1.fill();
             }
         }
     }
@@ -162,8 +164,8 @@ export function drawRef(model, ctx1, ctx3) {
     }
     ctx2.imageSmoothingEnabled = false;
     ctx2.clearRect(0, 0, width, height);
-    for (let i = 0; i < featPos.length; i++) {
-        const feature = featPos[i];
+    for (let i = 0; i < featPositions.length; i++) {
+        const feature = featPositions[i];
         const idx = i * unitMultiplier + 1;
         ctx2.fillStyle = makeColor(idx);
         // too many click map false positives with colored stroked lines
@@ -174,6 +176,7 @@ export function drawRef(model, ctx1, ctx3) {
             feature,
             ctx: ctx2,
             drawCurves,
+            level,
             offsets,
             oobLimit,
             viewWidth: view.width,
@@ -181,15 +184,14 @@ export function drawRef(model, ctx1, ctx3) {
             height,
         });
     }
-    return undefined;
 }
 export function drawMouseoverSynteny(model) {
     var _a;
-    const { clickId, mouseoverId } = model;
+    const { level, clickId, mouseoverId } = model;
     const highResolutionScaling = 1;
     const view = getContainingView(model);
     const drawCurves = view.drawCurves;
-    const height = view.middleComparativeHeight;
+    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);
@@ -199,14 +201,16 @@ export function drawMouseoverSynteny(model) {
     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) {
-        ctx.fillStyle = 'rgb(0,0,0,0.1)';
         drawMatchSimple({
             cb: ctx => {
                 ctx.fill();
             },
             feature: feature1,
+            level,
             ctx,
             oobLimit,
             viewWidth: view.width,
@@ -217,13 +221,13 @@ export function drawMouseoverSynteny(model) {
     }
     const feature2 = model.featMap[clickId || ''];
     if (feature2) {
-        ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)';
         drawMatchSimple({
             cb: ctx => {
                 ctx.stroke();
             },
             feature: feature2,
             ctx,
+            level,
             oobLimit,
             viewWidth: view.width,
             drawCurves,

package/esm/LinearSyntenyDisplay/index.js

@@ -11,7 +11,7 @@ export default function LinearSyntenyDisplayF(pluginManager) {
             configSchema,
             stateModel: stateModelFactory(configSchema),
             trackType: 'SyntenyTrack',
-            viewType: 'LinearSyntenyView',
+            viewType: 'LinearSyntenyViewHelper',
             ReactComponent: lazy(() => import('./components/Component')),
         });
     });

package/esm/LinearSyntenyDisplay/model.d.ts

@@ -24,7 +24,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
     configuration: AnyConfigurationSchemaType;
-    height: import("mobx-state-tree").IType<number | undefined, number, number>;
 } & {
     /**
      * #property
@@ -77,9 +76,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree" /**
-         * #action
-         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
@@ -99,6 +96,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     features: Feature[] | undefined;
     message: string | undefined;
 } & {
+    readonly level: number;
+    readonly height: number;
     renderProps(): {
         rpcDriverName: string | undefined;
         displayModel: {
@@ -114,9 +113,13 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                         [x: string]: any;
                     } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-                } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
+                } & import("mobx-state-tree" /**
+                 * #volatile
+                 * canvas for drawing mouseover shading this is separate from the other
+                 * code for speed: don't have to redraw entire canvas to do a feature's
+                 * mouseover shading
+                 */).IStateTreeNode<AnyConfigurationSchemaType>);
             } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-            height: number;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
@@ -160,9 +163,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree" /**
-                 * #action
-                 */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
@@ -188,7 +189,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & {
             type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
             configuration: AnyConfigurationSchemaType;
-            height: import("mobx-state-tree").IType<number | undefined, number, number>;
         }, {
             rendererTypeName: string;
             error: unknown;
@@ -264,13 +264,51 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     afterAttach(): void;
 } & {
+    /**
+     * #volatile
+     * canvas used for drawing visible screen
+     */
     mainCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas used for drawing click map with feature ids this renders a
+     * unique color per alignment, so that it can be re-traced after a
+     * feature click with getImageData at that pixel
+     */
     clickMapCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas used for drawing click map with cigar data this can show if you
+     * are mousing over a insertion/deletion. it is similar in purpose to the
+     * clickMapRef but was not feasible to pack this into the clickMapRef
+     */
     cigarClickMapCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas for drawing mouseover shading this is separate from the other
+     * code for speed: don't have to redraw entire canvas to do a feature's
+     * mouseover shading
+     */
     mouseoverCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * assigned by reaction
+     */
     featPositions: FeatPos[];
+    /**
+     * #volatile
+     * currently mouse'd over feature
+     */
     mouseoverId: string | undefined;
+    /**
+     * #volatile
+     * currently click'd over feature
+     */
     clickId: string | undefined;
+    /**
+     * #volatile
+     * currently mouseover'd CIGAR subfeature
+     */
     cigarMouseoverId: number;
 } & {
     /**

package/esm/LinearSyntenyDisplay/model.js

@@ -20,28 +20,51 @@ function stateModelFactory(configSchema) {
         configuration: ConfigurationReference(configSchema),
     }))
         .volatile(() => ({
-        // canvas used for drawing visible screen
+        /**
+         * #volatile
+         * canvas used for drawing visible screen
+         */
         mainCanvas: null,
-        // canvas used for drawing click map with feature ids
-        // this renders a unique color per alignment, so that it can be re-traced
-        // after a feature click with getImageData at that pixel
+        /**
+         * #volatile
+         * canvas used for drawing click map with feature ids this renders a
+         * unique color per alignment, so that it can be re-traced after a
+         * feature click with getImageData at that pixel
+         */
         clickMapCanvas: null,
-        // canvas used for drawing click map with cigar data
-        // this can show if you are mousing over a insertion/deletion. it is similar
-        // in purpose to the clickMapRef but was not feasible to pack this into the
-        // clickMapRef
+        /**
+         * #volatile
+         * canvas used for drawing click map with cigar data this can show if you
+         * are mousing over a insertion/deletion. it is similar in purpose to the
+         * clickMapRef but was not feasible to pack this into the clickMapRef
+         */
         cigarClickMapCanvas: null,
-        // canvas for drawing mouseover shading
-        // this is separate from the other code for speed: don't have to redraw
-        // entire canvas to do a feature's mouseover shading
+        /**
+         * #volatile
+         * canvas for drawing mouseover shading this is separate from the other
+         * code for speed: don't have to redraw entire canvas to do a feature's
+         * mouseover shading
+         */
         mouseoverCanvas: null,
-        // assigned by reaction
+        /**
+         * #volatile
+         * assigned by reaction
+         */
         featPositions: [],
-        // currently mouse'd over feature
+        /**
+         * #volatile
+         * currently mouse'd over feature
+         */
         mouseoverId: undefined,
-        // currently click'd over feature
+        /**
+         * #volatile
+         * currently click'd over feature
+         */
         clickId: undefined,
-        // currently mouseover'd CIGAR subfeature
+        /**
+         * #volatile
+         * currently mouseover'd CIGAR subfeature
+         */
         cigarMouseoverId: -1,
     }))
         .actions(self => ({