@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearFeatureDisplay/model.js

@@ -0,0 +1,265 @@
+import { lazy } from 'react';
+import { ConfigurationReference, getConf, readConfObject, } from '@jbrowse/core/configuration';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+import { SimpleFeature, getSession } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { cast, getParent, isAlive, types } from '@jbrowse/mobx-state-tree';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { BaseLinearDisplay } from "../BaseLinearDisplay/index.js";
+const SetMaxHeightDialog = lazy(() => import("./components/SetMaxHeightDialog.js"));
+const AddFiltersDialog = lazy(() => import("./components/AddFiltersDialog.js"));
+function stateModelFactory(configSchema) {
+    return types
+        .compose('LinearFeatureDisplay', BaseLinearDisplay, types.model({
+        type: types.literal('LinearFeatureDisplay'),
+        trackShowLabels: types.maybe(types.boolean),
+        trackShowDescriptions: types.maybe(types.boolean),
+        trackDisplayMode: types.maybe(types.string),
+        trackMaxHeight: types.maybe(types.number),
+        configuration: ConfigurationReference(configSchema),
+        jexlFilters: types.maybe(types.array(types.string)),
+    }))
+        .volatile(() => ({
+        featureUnderMouseVolatile: undefined,
+    }))
+        .views(self => ({
+        get activeFilters() {
+            return (self.jexlFilters ??
+                getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
+        },
+        get rendererTypeName() {
+            return getConf(self, ['renderer', 'type']);
+        },
+        get sequenceAdapter() {
+            const { assemblyManager } = getSession(self);
+            const track = getParent(self, 2);
+            const assemblyNames = readConfObject(track.configuration, 'assemblyNames');
+            const assembly = assemblyManager.get(assemblyNames[0]);
+            return assembly ? getConf(assembly, ['sequence', 'adapter']) : undefined;
+        },
+        get showLabels() {
+            return self.trackShowLabels ?? getConf(self, ['renderer', 'showLabels']);
+        },
+        get showDescriptions() {
+            return (self.trackShowDescriptions ??
+                getConf(self, ['renderer', 'showDescriptions']));
+        },
+        get maxHeight() {
+            return self.trackMaxHeight ?? getConf(self, ['renderer', 'maxHeight']);
+        },
+        get displayMode() {
+            return (self.trackDisplayMode ?? getConf(self, ['renderer', 'displayMode']));
+        },
+    }))
+        .views(self => ({
+        get rendererConfig() {
+            const configBlob = getConf(self, ['renderer']) || {};
+            const config = configBlob;
+            return {
+                ...config,
+                showLabels: self.trackShowLabels ?? config.showLabels,
+                showDescriptions: self.trackShowDescriptions ?? config.showDescriptions,
+                displayMode: self.trackDisplayMode ?? config.displayMode,
+                maxHeight: self.trackMaxHeight ?? config.maxHeight,
+            };
+        },
+    }))
+        .actions(self => ({
+        setJexlFilters(f) {
+            self.jexlFilters = cast(f);
+        },
+        setFeatureUnderMouse(feat) {
+            self.featureUnderMouseVolatile = feat;
+        },
+        toggleShowLabels() {
+            self.trackShowLabels = !self.showLabels;
+        },
+        toggleShowDescriptions() {
+            self.trackShowDescriptions = !self.showDescriptions;
+        },
+        setDisplayMode(val) {
+            self.trackDisplayMode = val;
+        },
+        setMaxHeight(val) {
+            self.trackMaxHeight = val;
+        },
+    }))
+        .views(self => ({
+        get featureUnderMouse() {
+            return self.featureUnderMouseVolatile;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, renderingProps: superRenderingProps, } = self;
+        return {
+            renderProps() {
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    config: self.rendererConfig,
+                    filters: new SerializableFilterChain({
+                        filters: self.activeFilters,
+                    }),
+                    sequenceAdapter: self.sequenceAdapter,
+                };
+            },
+            renderingProps() {
+                const superProps = superRenderingProps();
+                const session = getSession(self);
+                return {
+                    ...superProps,
+                    async onFeatureClick(_, featureId) {
+                        const { rpcManager } = session;
+                        const { parentTrack } = self;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = getRpcSessionId(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    trackInstanceId: parentTrack.id,
+                                    rendererType: self.rendererTypeName,
+                                }));
+                                if (isAlive(self) && feature) {
+                                    self.selectFeature(new SimpleFeature(feature));
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notifyError(`${e}`, e);
+                        }
+                    },
+                    async onFeatureContextMenu(_, featureId) {
+                        const { rpcManager } = session;
+                        const { parentTrack } = self;
+                        try {
+                            const f = featureId || self.featureIdUnderMouse;
+                            if (!f) {
+                                self.clearFeatureSelection();
+                            }
+                            else {
+                                const sessionId = getRpcSessionId(self);
+                                const { feature } = (await rpcManager.call(sessionId, 'CoreGetFeatureDetails', {
+                                    featureId: f,
+                                    sessionId,
+                                    trackInstanceId: parentTrack.id,
+                                    rendererType: self.rendererTypeName,
+                                }));
+                                if (isAlive(self) && feature) {
+                                    self.setContextMenuFeature(new SimpleFeature(feature));
+                                }
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notifyError(`${e}`, e);
+                        }
+                    },
+                };
+            },
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Show...',
+                        icon: VisibilityIcon,
+                        subMenu: [
+                            {
+                                label: 'Show tooltips',
+                                type: 'checkbox',
+                                checked: self.showTooltipsEnabled,
+                                onClick: () => {
+                                    self.setShowTooltips(!self.showTooltipsEnabled);
+                                },
+                            },
+                            {
+                                label: 'Show labels',
+                                type: 'checkbox',
+                                checked: self.showLabels,
+                                onClick: () => {
+                                    self.toggleShowLabels();
+                                },
+                            },
+                            {
+                                label: 'Show descriptions',
+                                type: 'checkbox',
+                                checked: self.showDescriptions,
+                                onClick: () => {
+                                    self.toggleShowDescriptions();
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Display mode',
+                        icon: VisibilityIcon,
+                        subMenu: [
+                            'normal',
+                            'compact',
+                            'reducedRepresentation',
+                            'collapse',
+                        ].map(val => ({
+                            label: val,
+                            type: 'radio',
+                            checked: self.displayMode === val,
+                            onClick: () => {
+                                self.setDisplayMode(val);
+                            },
+                        })),
+                    },
+                    {
+                        label: 'Set max track height',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                SetMaxHeightDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Filters',
+                        subMenu: [
+                            {
+                                label: 'Edit filters...',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        AddFiltersDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
+                        ],
+                    },
+                ];
+            },
+        };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { trackShowLabels, trackShowDescriptions, trackDisplayMode, trackMaxHeight, jexlFilters, ...rest } = snap;
+        return {
+            ...rest,
+            ...(trackShowLabels !== undefined ? { trackShowLabels } : {}),
+            ...(trackShowDescriptions !== undefined
+                ? { trackShowDescriptions }
+                : {}),
+            ...(trackDisplayMode !== undefined ? { trackDisplayMode } : {}),
+            ...(trackMaxHeight !== undefined ? { trackMaxHeight } : {}),
+            ...(jexlFilters?.length ? { jexlFilters } : {}),
+        };
+    });
+}
+export default stateModelFactory;

package/esm/LinearGenomeView/SVGErrorBox.d.ts

@@ -0,0 +1,5 @@
+export declare function ErrorBox({ error, width, height, }: {
+    error: unknown;
+    width: number;
+    height: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearGenomeView/SVGErrorBox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function ErrorBox({ error, width, height, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, fill: "#ffdddd" }), _jsx("text", { x: 10, y: height / 2, fill: "#cc0000", fontSize: 14, children: `${error}` })] }));
+}

package/esm/LinearGenomeView/afterAttach.d.ts

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from './model.ts';
+export declare function setupInitAutorun(self: LinearGenomeViewModel): void;
+export declare function setupCoarseDynamicBlocksAutorun(self: LinearGenomeViewModel): void;
+export declare function setupLocalStorageAutorun(self: LinearGenomeViewModel): void;
+export declare function doAfterAttach(self: LinearGenomeViewModel): void;

package/esm/LinearGenomeView/afterAttach.js

@@ -0,0 +1,95 @@
+import { getSession, localStorageSetItem, parseLocString, } from '@jbrowse/core/util';
+import { addDisposer } from '@jbrowse/mobx-state-tree';
+import { autorun, when } from 'mobx';
+export function setupInitAutorun(self) {
+    addDisposer(self, autorun(async function initAutorun() {
+        const { init, initialized } = self;
+        if (!initialized) {
+            return;
+        }
+        if (init) {
+            const session = getSession(self);
+            const { assemblyManager } = session;
+            if (init.tracklist) {
+                self.activateTrackSelector();
+                const currentWidth = self.volatileWidth;
+                await when(() => self.volatileWidth !== currentWidth, {
+                    timeout: 500,
+                }).catch(() => {
+                });
+            }
+            try {
+                if (init.loc) {
+                    await self.navToLocString(init.loc, init.assembly);
+                }
+                else {
+                    self.showAllRegionsInAssembly(init.assembly);
+                }
+            }
+            catch (e) {
+                console.error(init, e);
+                session.notifyError(`${e}`, e);
+            }
+            if (init.tracks) {
+                const idsNotFound = [];
+                for (const t of init.tracks) {
+                    try {
+                        self.showTrack(t);
+                    }
+                    catch (e) {
+                        if (/Could not resolve identifier/.exec(`${e}`)) {
+                            idsNotFound.push(t);
+                        }
+                        else {
+                            throw e;
+                        }
+                    }
+                }
+                if (idsNotFound.length) {
+                    session.notifyError(`Could not resolve identifiers: ${idsNotFound.join(',')}`, new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`));
+                }
+            }
+            if (init.nav !== undefined) {
+                self.setHideHeader(!init.nav);
+            }
+            if (init.highlight) {
+                for (const h of init.highlight) {
+                    const p = parseLocString(h, refName => assemblyManager.isValidRefName(refName, init.assembly));
+                    const { start, end } = p;
+                    if (start !== undefined && end !== undefined) {
+                        self.addToHighlights({
+                            ...p,
+                            start,
+                            end,
+                            assemblyName: init.assembly,
+                        });
+                    }
+                }
+            }
+            self.setInit(undefined);
+        }
+    }, { name: 'LGVInit' }));
+}
+export function setupCoarseDynamicBlocksAutorun(self) {
+    addDisposer(self, autorun(function coarseDynamicBlocksAutorun() {
+        if (self.initialized) {
+            self.setCoarseDynamicBlocks(self.dynamicBlocks);
+        }
+    }, { delay: 500, name: 'LGVCoarseDynamicBlocks' }));
+}
+export function setupLocalStorageAutorun(self) {
+    addDisposer(self, autorun(function localStorageAutorun() {
+        const s = (s) => JSON.stringify(s);
+        const { showCytobandsSetting, showCenterLine, colorByCDS, showTrackOutlines, trackLabels, } = self;
+        localStorageSetItem('lgv-showCytobands', s(showCytobandsSetting));
+        localStorageSetItem('lgv-showCenterLine', s(showCenterLine));
+        localStorageSetItem('lgv-colorByCDS', s(colorByCDS));
+        localStorageSetItem('lgv-showTrackOutlines', s(showTrackOutlines));
+        localStorageSetItem('lgv-trackLabels', trackLabels);
+    }, { name: 'LGVLocalStorage' }));
+}
+export function doAfterAttach(self) {
+    setupInitAutorun(self);
+    setupCoarseDynamicBlocksAutorun(self);
+    setupLocalStorageAutorun(self);
+}

package/esm/LinearGenomeView/components/CenterLine.js

@@ -1,13 +1,14 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     centerLineContainer: {
         background: 'transparent',
         height: '100%',
         zIndex: 4,
         position: 'absolute',
+        left: 0,
         border: `1px ${theme.palette.action.active} dashed`,
         borderTop: 'none',
         borderBottom: 'none',
@@ -15,21 +16,22 @@ const useStyles = makeStyles()(theme => ({
     },
     centerLineText: {
         position: 'absolute',
+        left: 0,
         pointerEvents: 'none',
         whiteSpace: 'nowrap',
         fontWeight: 'bold',
     },
 }));
-const CenterLine = observer(function ({ model }) {
+const CenterLine = observer(function CenterLine({ model }) {
     const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model;
     const ref = useRef(null);
     const { classes } = useStyles();
     const startingPosition = width / 2;
     return tracks.length ? (_jsx("div", { "data-testid": "centerline_container", className: classes.centerLineContainer, role: "presentation", ref: ref, style: {
-            left: `${startingPosition}px`,
+            transform: `translateX(${startingPosition}px)`,
             width: Math.max(1 / bpPerPx, 1),
         }, children: centerLineInfo && (_jsxs("div", { "data-testid": "centerline_text", className: classes.centerLineText, role: "presentation", style: {
-                left: Math.max(1 / bpPerPx, 1) + 5,
+                transform: `translateX(${Math.max(1 / bpPerPx, 1) + 5}px)`,
                 top: trackHeights,
             }, children: [centerLineInfo.refName, ":", ' ', Math.max(Math.round(centerLineInfo.offset) + 1, 0)] })) })) : null;
 });

package/esm/LinearGenomeView/components/Cytobands.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import { getCytobands } from './util';
-import { HEADER_OVERVIEW_HEIGHT } from '../consts';
+import { getCytobands } from "./util.js";
+import { HEADER_OVERVIEW_HEIGHT } from "../consts.js";
 function rightRoundedRect(x, y, width, height, radius) {
     return `M${x},${y}h${width - radius}a${radius},${radius} 0 0 1 ${radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0 1 ${-radius},${radius}h${radius - width}z`;
 }
@@ -35,7 +35,7 @@ const colorMap = {
     stalk: 'rgb(127,127,127)',
     acen: '#800',
 };
-const Cytobands = observer(function ({ overview, block, assembly, }) {
+const Cytobands = observer(function Cytobands({ overview, block, assembly, }) {
     const { offsetPx, reversed } = block;
     const cytobands = getCytobands(assembly, block.refName);
     const lcap = reversed ? cytobands.length - 1 : 0;
@@ -52,7 +52,7 @@ const Cytobands = observer(function ({ overview, block, assembly, }) {
             const l = Math.min(s, e);
             const w = Math.abs(e - s);
             if (type === 'n/a') {
-                const match = name === null || name === void 0 ? void 0 : name.match(/^(\d+)([A-Za-z])/);
+                const match = name?.match(/^(\d+)([A-Za-z])/);
                 const ret = match[1] + match[2];
                 if (ret && ret !== curr) {
                     curr = ret;

package/esm/LinearGenomeView/components/ExportSvgDialog.d.ts

@@ -1,4 +1,4 @@
-import type { ExportSvgOptions } from '../types';
+import type { ExportSvgOptions } from '../types.ts';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -16,6 +16,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
     const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
     const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);
+    const [showGridlines, setShowGridlines] = useSvgLocal('gridlines', false);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
@@ -27,7 +28,9 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                             setTrackLabels(event.target.value);
                         }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
                             setThemeName(event.target.value);
-                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: showGridlines, onChange: () => {
+                                setShowGridlines(val => !val);
+                            } }), label: "Show gridlines" }), offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
                                 setRasterizeLayers(val => !val);
                             } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (_jsx(Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
                             handleClose();
@@ -40,6 +43,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                                     filename,
                                     trackLabels,
                                     themeName,
+                                    showGridlines,
                                 });
                                 handleClose();
                             }

package/esm/LinearGenomeView/components/GetSequenceDialog.d.ts

@@ -1,6 +1,12 @@
-import type { LinearGenomeViewModel } from '..';
+import type { BpOffset } from '../types.ts';
+import type { Region } from '@jbrowse/core/util';
 declare const GetSequenceDialog: ({ model, handleClose, }: {
-    model: LinearGenomeViewModel;
+    model: {
+        leftOffset?: BpOffset;
+        rightOffset?: BpOffset;
+        getSelectedRegions: (left?: BpOffset, right?: BpOffset) => Region[];
+        setOffsets: (left?: BpOffset, right?: BpOffset) => void;
+    };
     handleClose: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default GetSequenceDialog;

package/esm/LinearGenomeView/components/GetSequenceDialog.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { complement, reverse } from '@jbrowse/core/util';
+import { complement, reverse, toLocale } from '@jbrowse/core/util';
 import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, TextField, Typography, } from '@mui/material';
-import copy from 'copy-to-clipboard';
-import { saveAs } from 'file-saver';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { fetchSequence } from './fetchSequence';
+import { fetchSequence } from "./fetchSequence.js";
 const useStyles = makeStyles()({
     dialogContent: {
         width: '80em',
@@ -18,11 +16,8 @@ const useStyles = makeStyles()({
     textAreaFont: {
         fontFamily: 'Courier New',
     },
-    ml: {
-        marginLeft: 10,
-    },
 });
-const GetSequenceDialog = observer(function ({ model, handleClose, }) {
+const GetSequenceDialog = observer(function GetSequenceDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const [error, setError] = useState();
     const [sequenceChunks, setSequenceChunks] = useState();
@@ -57,8 +52,8 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
             const chunkStart = chunk.get('start') + 1;
             const chunkEnd = chunk.get('end');
             const loc = `${chunkRefName}:${chunkStart}-${chunkEnd}`;
-            if ((chunkSeq === null || chunkSeq === void 0 ? void 0 : chunkSeq.length) !== chunkEnd - chunkStart + 1) {
-                throw new Error(`${loc} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(chunkEnd - chunkStart).toLocaleString()}`);
+            if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
+                throw new Error(`${loc} returned ${toLocale(chunkSeq.length)} bases, but should have returned ${toLocale(chunkEnd - chunkStart)}`);
             }
             if (rev) {
                 chunkSeq = reverse(chunkSeq);
@@ -72,11 +67,11 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
             };
         }))
         : '';
-    const sequenceTooLarge = sequence ? sequence.length > 1000000 : false;
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: () => {
+    const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false;
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, title: "Reference sequence", onClose: () => {
             handleClose();
             model.setOffsets();
-        }, title: "Reference sequence", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: "Retrieving sequences" })) : null, _jsx(TextField, { "data-testid": "rubberband-sequence", variant: "outlined", multiline: true, minRows: 5, maxRows: 10, disabled: sequenceTooLarge, className: classes.dialogContent, fullWidth: true, value: sequenceTooLarge
+        }, children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: "Retrieving sequences" })) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, disabled: sequenceTooLarge, className: classes.dialogContent, fullWidth: true, value: sequenceTooLarge
                             ? 'Reference sequence too large to display, use the download FASTA button'
                             : sequence, slotProps: {
                             input: {
@@ -89,13 +84,15 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
                                         setReverse(event.target.checked);
                                     } }), label: "Reverse sequence" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { value: comp, onChange: event => {
                                         setComplement(event.target.checked);
-                                    } }), label: "Complement sequence" })] }), _jsx(Typography, { style: { margin: 10 }, children: "Note: Check both boxes for the \"reverse complement\"" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
+                                    } }), label: "Complement sequence" })] }), _jsx(Typography, { style: { margin: 10 }, children: "Note: Check both boxes for the \"reverse complement\"" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: async () => {
+                            const { default: copy } = await import('copy-to-clipboard');
                             copy(sequence);
                             setCopied(true);
                             setTimeout(() => {
                                 setCopied(false);
                             }, 500);
-                        }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: _jsx(ContentCopyIcon, {}), children: copied ? 'Copied' : 'Copy to clipboard' }), _jsx(Button, { onClick: () => {
+                        }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: _jsx(ContentCopyIcon, {}), children: copied ? 'Copied' : 'Copy to clipboard' }), _jsx(Button, { onClick: async () => {
+                            const { saveAs } = await import('file-saver-es');
                             saveAs(new Blob([sequence || ''], {
                                 type: 'text/x-fasta;charset=utf-8',
                             }), 'jbrowse_ref_seq.fa');

package/esm/LinearGenomeView/components/Gridlines.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
-import { makeTicks } from '../util';
+import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from "../../BaseLinearDisplay/components/Block.js";
+import { makeTicks } from "../util.js";
 const useStyles = makeStyles()(theme => ({
     verticalGuidesZoomContainer: {
         position: 'absolute',
@@ -30,16 +30,19 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 function RenderedBlockLines({ block, bpPerPx, }) {
-    const { classes, cx } = useStyles();
-    const ticks = makeTicks(block.start, block.end, bpPerPx);
+    const { classes } = useStyles();
+    const { start, end, reversed } = block;
+    const ticks = makeTicks(start, end, bpPerPx);
+    const majorTickClass = `${classes.tick} ${classes.majorTick}`;
+    const minorTickClass = `${classes.tick} ${classes.minorTick}`;
     return (_jsx(ContentBlockComponent, { block: block, children: ticks.map(({ type, base }) => {
-            const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
-            return (_jsx("div", { className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
-                    ? classes.majorTick
-                    : classes.minorTick), style: { left: x } }, base));
+            const x = (reversed ? end - base : base - start) / bpPerPx;
+            return (_jsx("div", { className: type === 'major' || type === 'labeledMajor'
+                    ? majorTickClass
+                    : minorTickClass, style: { left: x } }, base));
         }) }));
 }
-const RenderedVerticalGuides = observer(({ model }) => {
+const RenderedVerticalGuides = observer(function RenderedVerticalGuides({ model, }) {
     const { staticBlocks, bpPerPx } = model;
     return (_jsx(_Fragment, { children: staticBlocks.map((block, index) => {
             const k = `${block.key}-${index}`;
@@ -55,14 +58,14 @@ const RenderedVerticalGuides = observer(({ model }) => {
             return null;
         }) }));
 });
-const Gridlines = observer(function ({ model, offset = 0, }) {
+const Gridlines = observer(function Gridlines({ model, offset = 0, }) {
     const { classes } = useStyles();
-    const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
+    const { staticBlocks, scaleFactor } = model;
     return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
-            transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
+            transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
         }, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
-                left: offsetLeft - offset,
-                width: model.staticBlocks.totalWidthPx,
+                left: `calc(${staticBlocks.offsetPx}px - var(--offset-px) - ${offset}px)`,
+                width: staticBlocks.totalWidthPx,
             }, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
 });
 export default Gridlines;