@jbrowse/plugin-linear-comparative-view 2.13.1 → 2.14.0

package/esm/LinearComparativeView/components/Rubberband.js

@@ -6,14 +6,10 @@ import { stringify } from '@jbrowse/core/util';
 import { Menu } from '@jbrowse/core/ui';
 import VerticalGuide from './VerticalGuide';
 const useStyles = makeStyles()(theme => {
-    const { tertiary, primary } = theme.palette;
-    const background = tertiary
-        ? alpha(tertiary.main, 0.7)
-        : alpha(primary.main, 0.7);
     return {
         rubberband: {
             height: '100%',
-            background,
+            background: alpha(theme.palette.tertiary.main, 0.7),
             position: 'absolute',
             zIndex: 10,
             textAlign: 'center',
@@ -25,7 +21,7 @@ const useStyles = makeStyles()(theme => {
             minHeight: 8,
         },
         rubberbandText: {
-            color: tertiary ? tertiary.contrastText : primary.contrastText,
+            color: theme.palette.tertiary.contrastText,
         },
         popover: {
             mouseEvents: 'none',
@@ -101,7 +97,7 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
             };
         }
         return () => { };
-    }, [startX, mouseDragging, anchorPosition, model]);
+    }, [startX, mouseDragging, model]);
     useEffect(() => {
         if (!mouseDragging &&
             currentX !== undefined &&
@@ -124,7 +120,9 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
     }
     function mouseOut() {
         setGuideX(undefined);
-        model.views.forEach(view => view.setOffsets(undefined, undefined));
+        model.views.forEach(view => {
+            view.setOffsets(undefined, undefined);
+        });
     }
     function handleClose() {
         setAnchorPosition(undefined);
@@ -165,7 +163,9 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
                     horizontal: 'left',
                 }, keepMounted: true, disableRestoreFocus: true }, rightBpOffset.map((l, idx) => (React.createElement(Typography, { key: [JSON.stringify(l), idx, 'right'].join('-') }, stringify(l, true))))))) : null,
         React.createElement("div", { ref: rubberbandRef, className: classes.rubberband, style: { left, width } },
-            React.createElement(Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (React.createElement(Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
+            React.createElement(Typography, { variant: "h6", className: classes.rubberbandText }, numOfBpSelected.map((n, i) => (
+            /* biome-ignore lint/suspicious/noArrayIndexKey: */
+            React.createElement(Typography, { key: `${n}_${i}` }, `${n.toLocaleString('en-US')}bp`))))),
         React.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
         anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                 left: anchorPosition.clientX,

package/esm/LinearComparativeView/model.d.ts

@@ -38,7 +38,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-        highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
+        highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     }, {
@@ -54,7 +54,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         minimumBlockWidth: number;
         draggingTrackId: undefined | string;
         volatileError: unknown;
-        afterDisplayedRegionsSetCallbacks: Function[];
+        afterDisplayedRegionsSetCallbacks: (() => void)[];
         scaleFactor: number;
         trackRefs: Record<string, HTMLDivElement>;
         coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
@@ -67,7 +67,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
     } & {
-        scaleBarDisplayPrefix(): string;
+        scaleBarDisplayPrefix(): string | undefined;
         MiniControlsComponent(): import("react").FC<any>;
         HeaderComponent(): import("react").FC<any>;
         readonly assemblyErrors: string;
@@ -82,7 +82,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         readonly totalBp: number;
         readonly maxBpPerPx: number;
         readonly minBpPerPx: number;
-        readonly error: {};
+        readonly error: unknown;
         readonly maxOffset: number;
         readonly minOffset: number;
         readonly displayedRegionsTotalPx: number;
@@ -106,9 +106,9 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         setHideHeaderOverview(b: boolean): void;
         setHideNoTracksActive(b: boolean): void;
         setShowGridlines(b: boolean): void;
-        addToHighlights(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
-        setHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>[] | undefined): void;
-        removeHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
+        addToHighlights(highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType): void;
+        setHighlight(highlight?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType[]): void;
+        removeHighlight(highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType): void;
         scrollTo(offsetPx: number): number;
         zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
         setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): void;
@@ -123,7 +123,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         moveTrackToTop(id: string): void;
         moveTrackToBottom(id: string): void;
         moveTrack(movingId: string, targetId: string): void;
-        closeView(): void;
         toggleTrack(trackId: string): boolean;
         setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
         setShowCenterLine(b: boolean): void;
@@ -143,7 +142,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             variant?: string;
             isLeftEndOfDisplayedRegion?: boolean;
         }[];
-        afterDisplayedRegionsSet(cb: Function): void;
+        afterDisplayedRegionsSet(cb: () => void): void;
         horizontalScroll(distance: number): number;
         center(): void;
         showAllRegions(): void;
@@ -236,7 +235,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-        highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>, Required<import("@jbrowse/core/util").ParsedLocString>>>, [undefined]>;
+        highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     }>>, import("mobx-state-tree")._NotCustomized>>;
@@ -286,12 +285,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
      * #action
      */
     removeView(view: LinearGenomeViewModel): void;
-    /**
-     * #action
-     * removes the view itself from the state tree entirely by calling the
-     * parent removeView
-     */
-    closeView(): void;
     /**
      * #action
      */

package/esm/LinearComparativeView/model.js

@@ -1,5 +1,5 @@
 import { lazy } from 'react';
-import { addDisposer, cast, getParent, getPath, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
+import { addDisposer, cast, getPath, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
 import { autorun, transaction } from 'mobx';
 // jbrowse
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
@@ -77,7 +77,9 @@ function stateModelFactory(pluginManager) {
          * #getter
          */
         get initialized() {
-            return (self.width !== undefined &&
+            return (
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            self.width !== undefined &&
                 self.views.length > 0 &&
                 self.views.every(view => view.initialized));
         },
@@ -133,15 +135,6 @@ function stateModelFactory(pluginManager) {
         removeView(view) {
             self.views.remove(view);
         },
-        /**
-         * #action
-         * removes the view itself from the state tree entirely by calling the
-         * parent removeView
-         */
-        closeView() {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            getParent(self, 2).removeView(self);
-        },
         /**
          * #action
          */
@@ -208,7 +201,9 @@ function stateModelFactory(pluginManager) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const config = resolveIdentifier(schema, getRoot(self), trackId);
             const shownTracks = self.tracks.filter(t => t.configuration === config);
-            transaction(() => shownTracks.forEach(t => self.tracks.remove(t)));
+            transaction(() => {
+                shownTracks.forEach(t => self.tracks.remove(t));
+            });
             return shownTracks.length;
         },
         /**
@@ -250,8 +245,7 @@ function stateModelFactory(pluginManager) {
         menuItems() {
             return [
                 ...self.views
-                    .map((view, idx) => { var _a; return [idx, (_a = view.menuItems) === null || _a === void 0 ? void 0 : _a.call(view)]; })
-                    .filter(f => !!f[1])
+                    .map((view, idx) => [idx, view.menuItems()])
                     .map(f => ({ label: `View ${f[0] + 1} Menu`, subMenu: f[1] })),
                 {
                     label: 'Return to import form',
@@ -293,7 +287,9 @@ function stateModelFactory(pluginManager) {
         afterAttach() {
             addDisposer(self, autorun(() => {
                 if (self.width) {
-                    self.views.forEach(v => v.setWidth(self.width));
+                    self.views.forEach(v => {
+                        v.setWidth(self.width);
+                    });
                 }
             }));
         },

package/esm/LinearReadVsRef/LinearReadVsRef.js

@@ -110,7 +110,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             const totalLength = flags & 2048 ? getLength(suppAlns[0].CIGAR) : getLength(cigar);
             const features = [feat, ...suppAlns];
             features.forEach((f, idx) => {
-                f.refName = (assembly === null || assembly === void 0 ? void 0 : assembly.getCanonicalRefName(f.refName)) || f.refName;
+                f.refName = assembly.getCanonicalRefName(f.refName) || f.refName;
                 f.syntenyId = idx;
                 f.mate.syntenyId = idx;
                 f.mate.uniqueId = `${f.uniqueId}_mate`;
@@ -131,10 +131,10 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
                 assemblyName: trackAssembly,
             })));
             (_a = session.addTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, {
-                name: `${readAssembly}`,
+                name: readAssembly,
                 sequence: {
                     type: 'ReferenceSequenceTrack',
-                    name: `Read sequence`,
+                    name: 'Read sequence',
                     trackId: seqTrackId,
                     assemblyNames: [readAssembly],
                     adapter: {
@@ -251,7 +251,9 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             React.createElement(CircularProgress, null))) : (React.createElement("div", { className: classes.root },
             primaryFeature.get('flags') & 256 ? (React.createElement(Typography, { style: { color: 'orange' } }, "Note: You selected a secondary alignment (which generally does not have SA tags or SEQ fields) so do a full reconstruction of the alignment")) : null,
             React.createElement(Typography, null, "Show an extra window size around each part of the split alignment. Using a larger value can allow you to see more genomic context."),
-            React.createElement(TextField, { value: windowSize, onChange: event => setWindowSize(event.target.value), label: "Set window size" })))),
+            React.createElement(TextField, { value: windowSize, onChange: event => {
+                    setWindowSize(event.target.value);
+                }, label: "Set window size" })))),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel"),
             React.createElement(Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit }, "Submit"))));

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -69,8 +69,8 @@ export function doAfterAttach(self) {
                 ;
                 [f1e, f1s] = [f1s, f1e];
             }
-            const a1 = assemblyManager === null || assemblyManager === void 0 ? void 0 : assemblyManager.get(f.get('assemblyName'));
-            const a2 = assemblyManager === null || assemblyManager === void 0 ? void 0 : assemblyManager.get(mate.assemblyName);
+            const a1 = assemblyManager.get(f.get('assemblyName'));
+            const a2 = assemblyManager.get(mate.assemblyName);
             const r1 = f.get('refName');
             const r2 = mate.refName;
             const ref1 = (a1 === null || a1 === void 0 ? void 0 : a1.getCanonicalRefName(r1)) || r1;

package/esm/LinearSyntenyDisplay/components/Component.js

@@ -29,8 +29,12 @@ function LoadingMessage() {
     const [shown, setShown] = useState(false);
     const { classes } = useStyles();
     useEffect(() => {
-        const timeout = setTimeout(() => setShown(true), 300);
-        return () => clearTimeout(timeout);
+        const timeout = setTimeout(() => {
+            setShown(true);
+        }, 300);
+        return () => {
+            clearTimeout(timeout);
+        };
     });
     return shown ? (React.createElement("div", { className: classes.loading },
         React.createElement(LoadingEllipses, null))) : null;

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -41,15 +41,20 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
     const { mouseoverId } = model;
-    // these useCallbacks avoid new refs from being created on any mouseover, etc.
-    const k1 = useCallback((ref) => model.setMouseoverCanvasRef(ref), 
+    // these useCallbacks avoid new refs from being created on any mouseover,
+    // etc.
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    const k1 = 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) => {
         model.setMainCanvasRef(ref);
         function onWheel(event) {
             event.preventDefault();
-            if (event.ctrlKey === true) {
+            if (event.ctrlKey) {
                 delta.current += event.deltaY / 500;
                 for (const v of view.views) {
                     v.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
@@ -84,21 +89,26 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                 }
             }
         }
-        if (ref) {
-            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
-            return () => ref.removeEventListener('wheel', onWheel);
-        }
-        return () => { };
+        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
+        return () => {
+            ref === null || ref === void 0 ? void 0 : ref.removeEventListener('wheel', onWheel);
+        };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    const k3 = useCallback((ref) => model.setClickMapCanvasRef(ref), 
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    const k3 = useCallback((ref) => {
+        model.setClickMapCanvasRef(ref);
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    const k4 = useCallback((ref) => model.setCigarClickMapCanvasRef(ref), 
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    const k4 = useCallback((ref) => {
+        model.setCigarClickMapCanvasRef(ref);
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     return (React.createElement("div", { className: classes.rel },
@@ -165,10 +175,14 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                     Math.abs(evt.clientX - mouseInitialDownX) < 5) {
                     onSynClick(evt, model);
                 }
-            }, onContextMenu: evt => onSynContextClick(evt, model, setAnchorEl), "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+            }, 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 }),
         mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
-        anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined) })) : null));
+        anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
+                setAnchorEl(undefined);
+            } })) : null));
 });
 export default LinearSyntenyRendering;

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

@@ -1,9 +1,12 @@
 import React from 'react';
+import { Feature } from '@jbrowse/core/util';
 import { LinearSyntenyDisplayModel } from '../model';
 interface ClickCoord {
     clientX: number;
     clientY: number;
-    feature: any;
+    feature: {
+        f: Feature;
+    };
 }
 export default function SyntenyContextMenu({ model, onClose, anchorEl, }: {
     onClose: () => void;

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -33,15 +33,11 @@ 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 => {
+                    view.views[0].navToLocString(`${refName}:${start}-${end}`).catch((e) => {
                         console.error(e);
                         getSession(model).notifyError(`${e}`, e);
                     });
-                    view.views[1]
-                        .navToLocString(`${mate.refName}:${mate.start}-${mate.end}`)
-                        .catch(e => {
+                    view.views[1].navToLocString(`${mate.refName}:${mate.start}-${mate.end}`).catch((e) => {
                         console.error(e);
                         getSession(model).notifyError(`${e}`, e);
                     });

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -34,7 +34,7 @@ const SyntenyTooltip = observer(function ({ title }) {
     });
     const clientPoint = useClientPoint(context);
     const { getFloatingProps } = useInteractions([clientPoint]);
-    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return title ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
         React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
                 ...floatingStyles,

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

@@ -7,7 +7,9 @@ interface Pos {
 export interface ClickCoord {
     clientX: number;
     clientY: number;
-    feature: any;
+    feature: {
+        f: Feature;
+    };
 }
 interface FeatPos {
     p11: Pos;

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

package/esm/LinearSyntenyDisplay/drawSynteny.js

@@ -93,7 +93,7 @@ export function drawRef(model, ctx1, ctx3) {
             // cx1/cx2 are the current x positions on top and bottom rows
             let cx1 = k1;
             let cx2 = s1 === -1 ? x22 : x21;
-            if ((cigar === null || cigar === void 0 ? void 0 : cigar.length) && drawCIGAR) {
+            if (cigar.length && drawCIGAR) {
                 // continuingFlag skips drawing commands on very small CIGAR features
                 let continuingFlag = false;
                 // px1/px2 are the previous x positions on the top and bottom rows
@@ -117,6 +117,7 @@ export function drawRef(model, ctx1, ctx3) {
                     else if (op === 'D' || op === 'N') {
                         cx1 += d1 * rev1;
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     else if (op === 'I') {
                         cx2 += d2 * rev2;
                     }
@@ -134,12 +135,12 @@ export function drawRef(model, ctx1, ctx3) {
                             continuingFlag = true;
                         }
                         else {
-                            continuingFlag = false;
-                            // 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);
                             if (ctx3) {
                                 ctx3.fillStyle = makeColor(idx);
@@ -167,7 +168,9 @@ export function drawRef(model, ctx1, ctx3) {
         ctx2.fillStyle = makeColor(idx);
         // too many click map false positives with colored stroked lines
         drawMatchSimple({
-            cb: ctx => ctx.fill(),
+            cb: ctx => {
+                ctx.fill();
+            },
             feature,
             ctx: ctx2,
             drawCurves,
@@ -178,6 +181,7 @@ export function drawRef(model, ctx1, ctx3) {
             height,
         });
     }
+    return undefined;
 }
 export function drawMouseoverSynteny(model) {
     var _a;
@@ -199,7 +203,9 @@ export function drawMouseoverSynteny(model) {
     if (feature1) {
         ctx.fillStyle = 'rgb(0,0,0,0.1)';
         drawMatchSimple({
-            cb: ctx => ctx.fill(),
+            cb: ctx => {
+                ctx.fill();
+            },
             feature: feature1,
             ctx,
             oobLimit,
@@ -213,7 +219,9 @@ export function drawMouseoverSynteny(model) {
     if (feature2) {
         ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)';
         drawMatchSimple({
-            cb: ctx => ctx.stroke(),
+            cb: ctx => {
+                ctx.stroke();
+            },
             feature: feature2,
             ctx,
             oobLimit,

package/esm/LinearSyntenyDisplay/model.d.ts

@@ -57,7 +57,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: import("react").FC<{
@@ -77,7 +77,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree" /**
+         * #action
+         */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: any;
@@ -138,7 +140,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     error: unknown;
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-                onHorizontalScroll?: Function;
+                onHorizontalScroll?: () => void;
                 blockState?: Record<string, any>;
             }>;
             readonly DisplayBlurb: import("react").FC<{
@@ -158,7 +160,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+                }, import("mobx-state-tree" /**
+                 * #action
+                 */)._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: any;
@@ -208,7 +212,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     error: unknown;
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-                onHorizontalScroll?: Function;
+                onHorizontalScroll?: () => void;
                 blockState?: Record<string, any>;
             }>;
             readonly DisplayBlurb: import("react").FC<{

package/esm/LinearSyntenyView/components/ExportSvgDialog.js

@@ -8,7 +8,7 @@ function LoadingMessage() {
         React.createElement(Typography, { display: "inline" }, "Creating SVG")));
 }
 function useSvgLocal(key, val) {
-    return useLocalStorage('svg-' + key, val);
+    return useLocalStorage(`svg-${key}`, val);
 }
 function TextField2({ children, ...rest }) {
     return (React.createElement("div", null,
@@ -26,19 +26,29 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
         React.createElement(DialogContent, null,
             error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", value: trackLabels, style: { width: 150 }, onChange: event => setTrackLabels(event.target.value) },
+            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                    setFilename(event.target.value);
+                } }),
+            React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", value: trackLabels, style: { width: 150 }, onChange: event => {
+                    setTrackLabels(event.target.value);
+                } },
                 React.createElement(MenuItem, { value: "offset" }, "Offset"),
                 React.createElement(MenuItem, { value: "overlay" }, "Overlay"),
                 React.createElement(MenuItem, { value: "left" }, "Left"),
                 React.createElement(MenuItem, { value: "none" }, "None")),
             React.createElement("br", null),
-            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
+            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
+                    setThemeName(event.target.value);
+                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
             // @ts-expect-error
             val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
+            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => {
+                        setRasterizeLayers(val => !val);
+                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"),
             React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
                     setLoading(true);
                     setError(undefined);

package/esm/LinearSyntenyView/components/ImportForm/ImportCustomTrack.js

@@ -105,7 +105,9 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
     return (React.createElement(Paper, { style: { padding: 12 } },
         error ? React.createElement(ErrorMessage, { error: error }) : null,
         React.createElement(Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view in the dotplot. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
-        React.createElement(RadioGroup, { value: radioOption, onChange: event => setValue(event.target.value) },
+        React.createElement(RadioGroup, { value: radioOption, onChange: event => {
+                setValue(event.target.value);
+            } },
             React.createElement(Grid, { container: true, justifyContent: "center" },
                 React.createElement(Grid, { item: true },
                     React.createElement(FormControlLabel, { value: ".paf", control: React.createElement(Radio, null), label: ".paf" })),
@@ -129,10 +131,18 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
                     React.createElement("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)" }, "(more info)")),
                 React.createElement("div", { style: { display: 'flex' } },
                     React.createElement("div", null,
-                        React.createElement(FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => setFileLocation(loc) })),
+                        React.createElement(FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => {
+                                setFileLocation(loc);
+                            } })),
                     React.createElement("div", null,
-                        React.createElement(FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => setBed1Location(loc) })),
+                        React.createElement(FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
+                                setBed1Location(loc);
+                            } })),
                     React.createElement("div", null,
-                        React.createElement(FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => setBed2Location(loc) }))))) : (React.createElement(FileSelector, { name: value ? value + ' location' : '', description: "", location: fileLocation, setLocation: loc => setFileLocation(loc) }))))));
+                        React.createElement(FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
+                                setBed2Location(loc);
+                            } }))))) : (React.createElement(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
+                    setFileLocation(loc);
+                } }))))));
 });
 export default OpenTrack;

package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyTrackSelector.js

@@ -32,6 +32,8 @@ const Selector = observer(({ model, assembly1, assembly2, setShowTrackId, }) =>
     }, [value, setShowTrackId]);
     return (React.createElement(Paper, { style: { padding: 12 } },
         React.createElement(Typography, { paragraph: true }, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
-        filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => setValue(event.target.value) }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
+        filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => {
+                setValue(event.target.value);
+            } }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
 });
 export default Selector;