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

package/dist/LinearGenomeView/components/ExportSvgDialog.js

@@ -1,44 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ExportSvgDialog;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 function LoadingMessage() {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)(`svg-${key}`, val);
 }
 function TextField2({ children, ...rest }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
 }
 function ExportSvgDialog({ model, handleClose, }) {
     const session = (0, util_1.getSession)(model);
@@ -49,47 +24,34 @@ 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_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
-            react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            react_1.default.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
-                    setTrackLabels(event.target.value);
-                } },
-                react_1.default.createElement(material_1.MenuItem, { value: "offset" }, "Offset"),
-                react_1.default.createElement(material_1.MenuItem, { value: "overlay" }, "Overlay"),
-                react_1.default.createElement(material_1.MenuItem, { value: "left" }, "Left"),
-                react_1.default.createElement(material_1.MenuItem, { value: "none" }, "None")),
-            session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"),
-            react_1.default.createElement(material_1.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 ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), (0, jsx_runtime_1.jsxs)(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
+                            setTrackLabels(event.target.value);
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "offset", children: "Offset" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "overlay", children: "Overlay" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "left", children: "Left" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "none", children: "None" })] }), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.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/dist/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/dist/LinearGenomeView/components/GetSequenceDialog.js

@@ -1,32 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
@@ -124,45 +102,32 @@ const GetSequenceDialog = (0, mobx_react_1.observer)(function ({ model, handleCl
         }))
         : '';
     const sequenceTooLarge = sequence ? sequence.length > 1000000 : false;
-    return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => {
             handleClose();
             model.setOffsets();
-        }, title: "Reference sequence" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (react_1.default.createElement(material_1.Container, null,
-                "Retrieving reference sequence...",
-                react_1.default.createElement(material_1.CircularProgress, { className: classes.ml, size: 20, disableShrink: true }))) : null,
-            react_1.default.createElement(material_1.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_1.default.createElement(material_1.FormGroup, null,
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: rev, onChange: event => {
-                            setReverse(event.target.checked);
-                        } }), label: "Reverse sequence" }),
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: comp, onChange: event => {
-                            setComplement(event.target.checked);
-                        } }), label: "Complement sequence" })),
-            react_1.default.createElement(material_1.Typography, { style: { margin: 10 } }, "Note: Check both boxes for the \"reverse complement\"")),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    (0, copy_to_clipboard_1.default)(sequence);
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                    }, 500);
-                }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: react_1.default.createElement(Icons_1.ContentCopy, null) }, copied ? 'Copied' : 'Copy to clipboard'),
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    (0, file_saver_1.saveAs)(new Blob([sequence || ''], {
-                        type: 'text/x-fasta;charset=utf-8',
-                    }), 'jbrowse_ref_seq.fa');
-                }, disabled: loading || !!error, color: "primary", startIcon: react_1.default.createElement(GetApp_1.default, null) }, "Download FASTA"),
-            react_1.default.createElement(material_1.Button, { onClick: handleClose, variant: "contained" }, "Close"))));
+        }, title: "Reference sequence", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: `${error}` })) : loading ? ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: ["Retrieving reference sequence...", (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { className: classes.ml, size: 20, disableShrink: true })] })) : null, (0, jsx_runtime_1.jsx)(material_1.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,
+                                },
+                            },
+                        } }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: rev, onChange: event => {
+                                        setReverse(event.target.checked);
+                                    } }), label: "Reverse sequence" }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: comp, onChange: event => {
+                                        setComplement(event.target.checked);
+                                    } }), label: "Complement sequence" })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { style: { margin: 10 }, children: "Note: Check both boxes for the \"reverse complement\"" })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                            (0, copy_to_clipboard_1.default)(sequence);
+                            setCopied(true);
+                            setTimeout(() => {
+                                setCopied(false);
+                            }, 500);
+                        }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: (0, jsx_runtime_1.jsx)(Icons_1.ContentCopy, {}), children: copied ? 'Copied' : 'Copy to clipboard' }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                            (0, file_saver_1.saveAs)(new Blob([sequence || ''], {
+                                type: 'text/x-fasta;charset=utf-8',
+                            }), 'jbrowse_ref_seq.fa');
+                        }, disabled: loading || !!error, color: "primary", startIcon: (0, jsx_runtime_1.jsx)(GetApp_1.default, {}), children: "Download FASTA" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClose, variant: "contained", children: "Close" })] })] }));
 });
 exports.default = GetSequenceDialog;

package/dist/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/dist/LinearGenomeView/components/Gridlines.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const Block_1 = require("../../BaseLinearDisplay/components/Block");
@@ -38,39 +35,37 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 function RenderedBlockLines({ block, bpPerPx, }) {
     const { classes, cx } = useStyles();
     const ticks = (0, util_1.makeTicks)(block.start, block.end, bpPerPx);
-    return (react_1.default.createElement(Block_1.ContentBlock, { block: block }, ticks.map(({ type, base }) => {
-        const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
-        return (react_1.default.createElement("div", { key: base, className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
-                ? classes.majorTick
-                : classes.minorTick), style: { left: x } }));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Block_1.ContentBlock, { block: block, children: ticks.map(({ type, base }) => {
+            const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
+            return ((0, jsx_runtime_1.jsx)("div", { className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
+                    ? classes.majorTick
+                    : classes.minorTick), style: { left: x } }, base));
+        }) }));
 }
 const RenderedVerticalGuides = (0, mobx_react_1.observer)(({ model }) => {
     const { staticBlocks, bpPerPx } = model;
-    return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, index) => {
-        const k = `${block.key}-${index}`;
-        if (block.type === 'ContentBlock') {
-            return react_1.default.createElement(RenderedBlockLines, { key: k, block: block, bpPerPx: bpPerPx });
-        }
-        else if (block.type === 'ElidedBlock') {
-            return react_1.default.createElement(Block_1.ElidedBlock, { key: k, width: block.widthPx });
-        }
-        else if (block.type === 'InterRegionPaddingBlock') {
-            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: k, width: block.widthPx, boundary: block.variant === 'boundary' }));
-        }
-        return null;
-    })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: staticBlocks.map((block, index) => {
+            const k = `${block.key}-${index}`;
+            if (block.type === 'ContentBlock') {
+                return (0, jsx_runtime_1.jsx)(RenderedBlockLines, { block: block, bpPerPx: bpPerPx }, k);
+            }
+            else if (block.type === 'ElidedBlock') {
+                return (0, jsx_runtime_1.jsx)(Block_1.ElidedBlock, { width: block.widthPx }, k);
+            }
+            else if (block.type === 'InterRegionPaddingBlock') {
+                return ((0, jsx_runtime_1.jsx)(Block_1.InterRegionPaddingBlock, { width: block.widthPx, boundary: block.variant === 'boundary' }, k));
+            }
+            return null;
+        }) }));
 });
 const Gridlines = (0, mobx_react_1.observer)(function ({ model }) {
     const { classes } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
-    return (react_1.default.createElement("div", { className: classes.verticalGuidesZoomContainer, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.verticalGuidesZoomContainer, style: {
             transform: model.scaleFactor !== 1 ? `scaleX(${model.scaleFactor})` : undefined,
-        } },
-        react_1.default.createElement("div", { className: classes.verticalGuidesContainer, style: {
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: classes.verticalGuidesContainer, style: {
                 left: offsetLeft,
                 width: model.staticBlocks.totalWidthPx,
-            } },
-            react_1.default.createElement(RenderedVerticalGuides, { model: model }))));
+            }, children: (0, jsx_runtime_1.jsx)(RenderedVerticalGuides, { model: model }) }) }));
 });
 exports.default = Gridlines;

package/dist/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/dist/LinearGenomeView/components/Header.js

@@ -3,19 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Icons_1 = require("@jbrowse/core/ui/Icons");
-const util_1 = require("@jbrowse/core/util");
-const ArrowBack_1 = __importDefault(require("@mui/icons-material/ArrowBack"));
-const ArrowForward_1 = __importDefault(require("@mui/icons-material/ArrowForward"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const HeaderPanControls_1 = __importDefault(require("./HeaderPanControls"));
+const HeaderRegionWidth_1 = __importDefault(require("./HeaderRegionWidth"));
+const HeaderTrackSelectorButton_1 = __importDefault(require("./HeaderTrackSelectorButton"));
+const HeaderZoomControls_1 = __importDefault(require("./HeaderZoomControls"));
 const OverviewScalebar_1 = __importDefault(require("./OverviewScalebar"));
 const SearchBox_1 = __importDefault(require("./SearchBox"));
-const ZoomControls_1 = __importDefault(require("./ZoomControls"));
-const consts_1 = require("../consts");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
+const useStyles = (0, mui_1.makeStyles)()({
     headerBar: {
         display: 'flex',
     },
@@ -26,62 +24,13 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     spacer: {
         flexGrow: 1,
     },
-    panButton: {
-        background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
-        color: theme.palette.text.primary,
-        margin: consts_1.SPACING,
-    },
-    bp: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: 5,
-    },
-    toggleButton: {
-        height: 44,
-        border: 'none',
-        marginLeft: theme.spacing(4),
-    },
-    buttonSpacer: {
-        marginRight: theme.spacing(2),
-    },
-}));
-const HeaderButtons = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.IconButton, { onClick: model.activateTrackSelector, className: classes.toggleButton, title: "Open track selector", value: "track_select" },
-        react_1.default.createElement(Icons_1.TrackSelector, { className: classes.buttonSpacer })));
-});
-function PanControls({ model }) {
-    const { classes } = useStyles();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { variant: "outlined", className: classes.panButton, onClick: () => {
-                model.slide(-0.9);
-            } },
-            react_1.default.createElement(ArrowBack_1.default, null)),
-        react_1.default.createElement(material_1.Button, { variant: "outlined", className: classes.panButton, onClick: () => {
-                model.slide(0.9);
-            } },
-            react_1.default.createElement(ArrowForward_1.default, null))));
-}
-const RegionWidth = (0, mobx_react_1.observer)(function ({ model }) {
-    const { classes } = useStyles();
-    const { coarseTotalBp } = model;
-    return (react_1.default.createElement(material_1.Typography, { variant: "body2", color: "textSecondary", className: classes.bp }, (0, util_1.getBpDisplayStr)(coarseTotalBp)));
 });
-const Controls = ({ model }) => {
+const Controls = function ({ model }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.headerBar },
-        react_1.default.createElement(HeaderButtons, { model: model }),
-        react_1.default.createElement("div", { className: classes.spacer }),
-        react_1.default.createElement(material_1.FormGroup, { row: true, className: classes.headerForm },
-            react_1.default.createElement(PanControls, { model: model }),
-            react_1.default.createElement(SearchBox_1.default, { model: model })),
-        react_1.default.createElement(RegionWidth, { model: model }),
-        react_1.default.createElement(ZoomControls_1.default, { model: model }),
-        react_1.default.createElement("div", { className: classes.spacer })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.headerBar, children: [(0, jsx_runtime_1.jsx)(HeaderTrackSelectorButton_1.default, { model: model }), (0, jsx_runtime_1.jsx)("div", { className: classes.spacer }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, { row: true, className: classes.headerForm, children: [(0, jsx_runtime_1.jsx)(HeaderPanControls_1.default, { model: model }), (0, jsx_runtime_1.jsx)(SearchBox_1.default, { model: model })] }), (0, jsx_runtime_1.jsx)(HeaderRegionWidth_1.default, { model: model }), (0, jsx_runtime_1.jsx)(HeaderZoomControls_1.default, { model: model }), (0, jsx_runtime_1.jsx)("div", { className: classes.spacer })] }));
 };
-const LinearGenomeViewHeader = (0, mobx_react_1.observer)(function ({ model }) {
+const LinearGenomeViewHeader = (0, mobx_react_1.observer)(function ({ model, }) {
     const { hideHeader, hideHeaderOverview } = model;
-    return !hideHeader ? (hideHeaderOverview ? (react_1.default.createElement(Controls, { model: model })) : (react_1.default.createElement(OverviewScalebar_1.default, { model: model },
-        react_1.default.createElement(Controls, { model: model })))) : null;
+    return !hideHeader ? (hideHeaderOverview ? ((0, jsx_runtime_1.jsx)(Controls, { model: model })) : ((0, jsx_runtime_1.jsx)(OverviewScalebar_1.default, { model: model, children: (0, jsx_runtime_1.jsx)(Controls, { model: model }) }))) : null;
 });
 exports.default = LinearGenomeViewHeader;

package/dist/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/dist/LinearGenomeView/components/HeaderPanControls.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HeaderPanControls;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowBack_1 = __importDefault(require("@mui/icons-material/ArrowBack"));
+const ArrowForward_1 = __importDefault(require("@mui/icons-material/ArrowForward"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const consts_1 = require("../consts");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    panButton: {
+        background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
+        color: theme.palette.text.primary,
+        margin: consts_1.SPACING,
+    },
+    buttonSpacer: {
+        marginRight: theme.spacing(2),
+    },
+}));
+function HeaderPanControls({ model }) {
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                    model.slide(-0.9);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                    model.slide(0.9);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowForward_1.default, {}) })] }));
+}

package/dist/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/dist/LinearGenomeView/components/HeaderRegionWidth.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    bp: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 5,
+        cursor: 'pointer',
+    },
+});
+const HeaderRegionWidth = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    const { coarseTotalBp } = model;
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: (0, util_1.getBpDisplayStr)(coarseTotalBp) }));
+});
+exports.default = HeaderRegionWidth;

package/dist/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/dist/LinearGenomeView/components/HeaderTrackSelectorButton.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    toggleButton: {
+        height: 44,
+        border: 'none',
+        marginLeft: theme.spacing(4),
+    },
+}));
+const HeaderTrackSelectorButton = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: model.activateTrackSelector, className: classes.toggleButton, title: "Open track selector", value: "track_select", children: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}) }));
+});
+exports.default = HeaderTrackSelectorButton;

package/dist/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;