@jbrowse/plugin-linear-genome-view 2.18.0 → 3.0.0

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -1,18 +1,16 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, useLocalStorage } from '@jbrowse/core/util';
 import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 function LoadingMessage() {
-    return (React.createElement("div", null,
-        React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        React.createElement(Typography, { display: "inline" }, "Creating SVG")));
+    return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsx(Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function useSvgLocal(key, val) {
     return useLocalStorage(`svg-${key}`, val);
 }
 function TextField2({ children, ...rest }) {
-    return (React.createElement("div", null,
-        React.createElement(TextField, { ...rest }, children)));
+    return (_jsx("div", { children: _jsx(TextField, { ...rest, children: children }) }));
 }
 export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
@@ -23,47 +21,34 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    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", style: { width: 150 }, value: trackLabels, 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")),
-            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 }, 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"))),
-        React.createElement(DialogActions, null,
-            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);
-                    try {
-                        await model.exportSvg({
-                            rasterizeLayers,
-                            filename,
-                            trackLabels,
-                            themeName,
-                        });
-                        handleClose();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        setError(e);
-                    }
-                    finally {
-                        setLoading(false);
-                    }
-                } }, "Submit"))));
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, {})) : null, _jsx(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), _jsxs(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
+                            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: () => {
+                                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();
+                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
+                            setLoading(true);
+                            setError(undefined);
+                            try {
+                                await model.exportSvg({
+                                    rasterizeLayers,
+                                    filename,
+                                    trackLabels,
+                                    themeName,
+                                });
+                                handleClose();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                setError(e);
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        }, children: "Submit" })] })] }));
 }

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare const GetSequenceDialog: ({ model, handleClose, }: {
     model: LGV;
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default GetSequenceDialog;

package/esm/LinearGenomeView/components/GetSequenceDialog.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons';
@@ -96,45 +97,32 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
         }))
         : '';
     const sequenceTooLarge = sequence ? sequence.length > 1000000 : false;
-    return (React.createElement(Dialog, { maxWidth: "xl", open: true, onClose: () => {
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: () => {
             handleClose();
             model.setOffsets();
-        }, title: "Reference sequence" },
-        React.createElement(DialogContent, null,
-            error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : loading ? (React.createElement(Container, null,
-                "Retrieving reference sequence...",
-                React.createElement(CircularProgress, { className: classes.ml, size: 20, disableShrink: true }))) : null,
-            React.createElement(TextField, { "data-testid": "rubberband-sequence", 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: {
-                        readOnly: true,
-                        classes: {
-                            input: classes.textAreaFont,
-                        },
-                    },
-                } }),
-            React.createElement(FormGroup, null,
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { value: rev, onChange: event => {
-                            setReverse(event.target.checked);
-                        } }), label: "Reverse sequence" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { value: comp, onChange: event => {
-                            setComplement(event.target.checked);
-                        } }), label: "Complement sequence" })),
-            React.createElement(Typography, { style: { margin: 10 } }, "Note: Check both boxes for the \"reverse complement\"")),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => {
-                    copy(sequence);
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                    }, 500);
-                }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: React.createElement(ContentCopyIcon, null) }, copied ? 'Copied' : 'Copy to clipboard'),
-            React.createElement(Button, { onClick: () => {
-                    saveAs(new Blob([sequence || ''], {
-                        type: 'text/x-fasta;charset=utf-8',
-                    }), 'jbrowse_ref_seq.fa');
-                }, disabled: loading || !!error, color: "primary", startIcon: React.createElement(GetAppIcon, null) }, "Download FASTA"),
-            React.createElement(Button, { onClick: handleClose, variant: "contained" }, "Close"))));
+        }, title: "Reference sequence", children: [_jsxs(DialogContent, { children: [error ? (_jsx(Typography, { color: "error", children: `${error}` })) : loading ? (_jsxs(Container, { children: ["Retrieving reference sequence...", _jsx(CircularProgress, { className: classes.ml, size: 20, disableShrink: true })] })) : null, _jsx(TextField, { "data-testid": "rubberband-sequence", 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: {
+                                readOnly: true,
+                                classes: {
+                                    input: classes.textAreaFont,
+                                },
+                            },
+                        } }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { value: rev, onChange: event => {
+                                        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: () => {
+                            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: () => {
+                            saveAs(new Blob([sequence || ''], {
+                                type: 'text/x-fasta;charset=utf-8',
+                            }), 'jbrowse_ref_seq.fa');
+                        }, disabled: loading || !!error, color: "primary", startIcon: _jsx(GetAppIcon, {}), children: "Download FASTA" }), _jsx(Button, { onClick: handleClose, variant: "contained", children: "Close" })] })] }));
 });
 export default GetSequenceDialog;

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare const Gridlines: ({ model }: {
     model: LGV;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Gridlines;

package/esm/LinearGenomeView/components/Gridlines.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 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';
@@ -33,39 +33,37 @@ const useStyles = makeStyles()(theme => ({
 function RenderedBlockLines({ block, bpPerPx, }) {
     const { classes, cx } = useStyles();
     const ticks = makeTicks(block.start, block.end, bpPerPx);
-    return (React.createElement(ContentBlockComponent, { block: block }, ticks.map(({ type, base }) => {
-        const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
-        return (React.createElement("div", { key: base, className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
-                ? classes.majorTick
-                : classes.minorTick), style: { left: x } }));
-    })));
+    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 RenderedVerticalGuides = observer(({ model }) => {
     const { staticBlocks, bpPerPx } = model;
-    return (React.createElement(React.Fragment, null, staticBlocks.map((block, index) => {
-        const k = `${block.key}-${index}`;
-        if (block.type === 'ContentBlock') {
-            return React.createElement(RenderedBlockLines, { key: k, block: block, bpPerPx: bpPerPx });
-        }
-        else if (block.type === 'ElidedBlock') {
-            return React.createElement(ElidedBlockComponent, { key: k, width: block.widthPx });
-        }
-        else if (block.type === 'InterRegionPaddingBlock') {
-            return (React.createElement(InterRegionPaddingBlockComponent, { key: k, width: block.widthPx, boundary: block.variant === 'boundary' }));
-        }
-        return null;
-    })));
+    return (_jsx(_Fragment, { children: staticBlocks.map((block, index) => {
+            const k = `${block.key}-${index}`;
+            if (block.type === 'ContentBlock') {
+                return _jsx(RenderedBlockLines, { block: block, bpPerPx: bpPerPx }, k);
+            }
+            else if (block.type === 'ElidedBlock') {
+                return _jsx(ElidedBlockComponent, { width: block.widthPx }, k);
+            }
+            else if (block.type === 'InterRegionPaddingBlock') {
+                return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, boundary: block.variant === 'boundary' }, k));
+            }
+            return null;
+        }) }));
 });
 const Gridlines = observer(function ({ model }) {
     const { classes } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
-    return (React.createElement("div", { className: classes.verticalGuidesZoomContainer, style: {
+    return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
             transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
-        } },
-        React.createElement("div", { className: classes.verticalGuidesContainer, style: {
+        }, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
                 left: offsetLeft,
                 width: model.staticBlocks.totalWidthPx,
-            } },
-            React.createElement(RenderedVerticalGuides, { model: model }))));
+            }, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
 });
 export default Gridlines;

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

@@ -1,7 +1,5 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '..';
-type LGV = LinearGenomeViewModel;
-declare const LinearGenomeViewHeader: ({ model }: {
-    model: LGV;
-}) => React.JSX.Element | null;
+declare const LinearGenomeViewHeader: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default LinearGenomeViewHeader;

package/esm/LinearGenomeView/components/Header.js

@@ -1,16 +1,14 @@
-import React from 'react';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
-import { getBpDisplayStr } from '@jbrowse/core/util';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Button, FormGroup, IconButton, Typography, alpha } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroup } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
+import HeaderPanControls from './HeaderPanControls';
+import HeaderRegionWidth from './HeaderRegionWidth';
+import HeaderTrackSelectorButton from './HeaderTrackSelectorButton';
+import HeaderZoomControls from './HeaderZoomControls';
 import OverviewScalebar from './OverviewScalebar';
 import SearchBox from './SearchBox';
-import ZoomControls from './ZoomControls';
-import { SPACING } from '../consts';
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
     headerBar: {
         display: 'flex',
     },
@@ -21,62 +19,13 @@ const useStyles = makeStyles()(theme => ({
     spacer: {
         flexGrow: 1,
     },
-    panButton: {
-        background: alpha(theme.palette.background.paper, 0.8),
-        color: theme.palette.text.primary,
-        margin: SPACING,
-    },
-    bp: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: 5,
-    },
-    toggleButton: {
-        height: 44,
-        border: 'none',
-        marginLeft: theme.spacing(4),
-    },
-    buttonSpacer: {
-        marginRight: theme.spacing(2),
-    },
-}));
-const HeaderButtons = observer(({ model }) => {
-    const { classes } = useStyles();
-    return (React.createElement(IconButton, { onClick: model.activateTrackSelector, className: classes.toggleButton, title: "Open track selector", value: "track_select" },
-        React.createElement(TrackSelectorIcon, { className: classes.buttonSpacer })));
-});
-function PanControls({ model }) {
-    const { classes } = useStyles();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
-                model.slide(-0.9);
-            } },
-            React.createElement(ArrowBackIcon, null)),
-        React.createElement(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
-                model.slide(0.9);
-            } },
-            React.createElement(ArrowForwardIcon, null))));
-}
-const RegionWidth = observer(function ({ model }) {
-    const { classes } = useStyles();
-    const { coarseTotalBp } = model;
-    return (React.createElement(Typography, { variant: "body2", color: "textSecondary", className: classes.bp }, getBpDisplayStr(coarseTotalBp)));
 });
-const Controls = ({ model }) => {
+const Controls = function ({ model }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.headerBar },
-        React.createElement(HeaderButtons, { model: model }),
-        React.createElement("div", { className: classes.spacer }),
-        React.createElement(FormGroup, { row: true, className: classes.headerForm },
-            React.createElement(PanControls, { model: model }),
-            React.createElement(SearchBox, { model: model })),
-        React.createElement(RegionWidth, { model: model }),
-        React.createElement(ZoomControls, { model: model }),
-        React.createElement("div", { className: classes.spacer })));
+    return (_jsxs("div", { className: classes.headerBar, children: [_jsx(HeaderTrackSelectorButton, { model: model }), _jsx("div", { className: classes.spacer }), _jsxs(FormGroup, { row: true, className: classes.headerForm, children: [_jsx(HeaderPanControls, { model: model }), _jsx(SearchBox, { model: model })] }), _jsx(HeaderRegionWidth, { model: model }), _jsx(HeaderZoomControls, { model: model }), _jsx("div", { className: classes.spacer })] }));
 };
-const LinearGenomeViewHeader = observer(function ({ model }) {
+const LinearGenomeViewHeader = observer(function ({ model, }) {
     const { hideHeader, hideHeaderOverview } = model;
-    return !hideHeader ? (hideHeaderOverview ? (React.createElement(Controls, { model: model })) : (React.createElement(OverviewScalebar, { model: model },
-        React.createElement(Controls, { model: model })))) : null;
+    return !hideHeader ? (hideHeaderOverview ? (_jsx(Controls, { model: model })) : (_jsx(OverviewScalebar, { model: model, children: _jsx(Controls, { model: model }) }))) : null;
 });
 export default LinearGenomeViewHeader;

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

@@ -0,0 +1,6 @@
+import type { LinearGenomeViewModel } from '..';
+type LGV = LinearGenomeViewModel;
+export default function HeaderPanControls({ model }: {
+    model: LGV;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { Button, alpha } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { SPACING } from '../consts';
+const useStyles = makeStyles()(theme => ({
+    panButton: {
+        background: alpha(theme.palette.background.paper, 0.8),
+        color: theme.palette.text.primary,
+        margin: SPACING,
+    },
+    buttonSpacer: {
+        marginRight: theme.spacing(2),
+    },
+}));
+export default function HeaderPanControls({ model }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                    model.slide(-0.9);
+                }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                    model.slide(0.9);
+                }, children: _jsx(ArrowForwardIcon, {}) })] }));
+}

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '..';
+declare const HeaderRegionWidth: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HeaderRegionWidth;

package/esm/LinearGenomeView/components/HeaderRegionWidth.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getBpDisplayStr } from '@jbrowse/core/util';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    bp: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 5,
+        cursor: 'pointer',
+    },
+});
+const HeaderRegionWidth = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { coarseTotalBp } = model;
+    return (_jsx(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: getBpDisplayStr(coarseTotalBp) }));
+});
+export default HeaderRegionWidth;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '..';
+declare const HeaderTrackSelectorButton: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HeaderTrackSelectorButton;

package/esm/LinearGenomeView/components/HeaderTrackSelectorButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    toggleButton: {
+        height: 44,
+        border: 'none',
+        marginLeft: theme.spacing(4),
+    },
+}));
+const HeaderTrackSelectorButton = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    return (_jsx(IconButton, { onClick: model.activateTrackSelector, className: classes.toggleButton, title: "Open track selector", value: "track_select", children: _jsx(TrackSelectorIcon, {}) }));
+});
+export default HeaderTrackSelectorButton;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '..';
+declare const HeaderZoomControls: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HeaderZoomControls;

package/esm/LinearGenomeView/components/HeaderZoomControls.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, useEffect, useState } from 'react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { getSession } from '@jbrowse/core/util';
+import MoreVert from '@mui/icons-material/MoreVert';
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import ZoomOut from '@mui/icons-material/ZoomOut';
+import { IconButton, Slider, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog'));
+const useStyles = makeStyles()(theme => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    slider: {
+        width: 100,
+        color: theme.palette.text.secondary,
+    },
+}));
+const HeaderZoomControls = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { maxBpPerPx, minBpPerPx, bpPerPx } = model;
+    const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
+    useEffect(() => {
+        setValue(-Math.log2(bpPerPx) * 100);
+    }, [bpPerPx]);
+    const zoomInDisabled = bpPerPx <= minBpPerPx + 0.0001;
+    const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001;
+    return (_jsxs("div", { className: classes.container, children: [_jsx(Tooltip, { title: "Zoom out 2x", children: _jsx("span", { children: _jsx(IconButton, { "data-testid": "zoom_out", disabled: zoomOutDisabled, onClick: () => {
+                            model.zoom(bpPerPx * 2);
+                        }, children: _jsx(ZoomOut, {}) }) }) }), _jsx(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), onChange: (_, val) => {
+                    setValue(val);
+                } }), _jsx(Tooltip, { title: "Zoom in 2x", children: _jsx("span", { children: _jsx(IconButton, { "data-testid": "zoom_in", disabled: zoomInDisabled, onClick: () => {
+                            model.zoom(model.bpPerPx / 2);
+                        }, children: _jsx(ZoomIn, {}) }) }) }), _jsx(CascadingMenuButton, { menuItems: [
+                    ...[100, 50, 10].map(r => ({
+                        label: `Zoom in ${r}x`,
+                        onClick: () => {
+                            model.zoom(model.bpPerPx / r);
+                        },
+                    })),
+                    ...[10, 50, 100].map(r => ({
+                        label: `Zoom out ${r}x`,
+                        onClick: () => {
+                            model.zoom(model.bpPerPx * r);
+                        },
+                    })),
+                    {
+                        label: 'Custom zoom',
+                        onClick: () => {
+                            getSession(model).queueDialog(handleClose => [
+                                RegionWidthEditorDialog,
+                                {
+                                    model,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                ], children: _jsx(MoreVert, {}) })] }));
+});
+export default HeaderZoomControls;

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

@@ -1,7 +1,12 @@
-import React from 'react';
 import type { LinearGenomeViewModel } from '../model';
 type LGV = LinearGenomeViewModel;
-declare const HighlightGroup: ({ model, }: {
+declare const Highlight: ({ model, highlight, }: {
     model: LGV;
-}) => React.JSX.Element[];
-export default HighlightGroup;
+    highlight: {
+        assemblyName: string;
+        refName: string;
+        start: number;
+        end: number;
+    };
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default Highlight;