@jbrowse/plugin-linear-genome-view 2.6.3 → 2.7.1

package/dist/LinearGenomeView/components/OverviewScalebar.js

@@ -1,10 +1,33 @@
 "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 });
 exports.Cytobands = exports.Polygon = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
@@ -82,9 +105,7 @@ const Polygon = (0, mobx_react_1.observer)(function ({ model, overview, useOffse
     if (!contentBlocks.length) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const first = contentBlocks.at(0);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const last = contentBlocks.at(-1);
     const topLeft = (overview.bpToPx({
         ...first,
@@ -162,9 +183,7 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
     if (!visibleRegions.length) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const first = visibleRegions.at(0);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const last = visibleRegions.at(-1);
     const firstOverviewPx = overview.bpToPx({
         ...first,
@@ -192,17 +211,25 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
                 } })) : (react_1.default.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
         })));
 });
-exports.default = (0, mobx_react_1.observer)(function OverviewScalebar({ model, children, }) {
+const OverviewScalebar = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { classes } = useStyles();
     const { totalBp, width, cytobandOffset, displayedRegions } = model;
-    const overview = Base1DViewModel_1.default.create({
-        displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
-        interRegionPaddingWidth: 0,
-        minimumBlockWidth: model.minimumBlockWidth,
-    });
     const modWidth = width - cytobandOffset;
-    overview.setVolatileWidth(modWidth);
-    overview.showAllRegions();
+    const overview = (0, react_1.useMemo)(() => {
+        const overview = Base1DViewModel_1.default.create({
+            displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+            interRegionPaddingWidth: 0,
+            minimumBlockWidth: model.minimumBlockWidth,
+        });
+        overview.setVolatileWidth(modWidth);
+        overview.showAllRegions();
+        return overview;
+    }, [
+        JSON.stringify(displayedRegions),
+        model.minimumBlockWidth,
+        modWidth,
+        displayedRegions,
+    ]);
     const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(OverviewRubberband_1.default, { model: model, overview: overview, ControlComponent: react_1.default.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),
@@ -213,3 +240,4 @@ exports.default = (0, mobx_react_1.observer)(function OverviewScalebar({ model,
 });
 var Cytobands_2 = require("./Cytobands");
 Object.defineProperty(exports, "Cytobands", { enumerable: true, get: function () { return __importDefault(Cytobands_2).default; } });
+exports.default = OverviewScalebar;

package/dist/LinearGenomeView/components/RefNameAutocomplete/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import { TextFieldProps as TFP } from '@mui/material';
 import { LinearGenomeViewModel } from '../../model';
-declare const _default: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
+declare const RefNameAutocomplete: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
     model: LinearGenomeViewModel;
     onSelect?: ((region: BaseResult) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -15,4 +15,4 @@ declare const _default: ({ model, onSelect, assemblyName, style, fetchResults, o
     showHelp?: boolean | undefined;
     TextFieldProps?: TFP | undefined;
 }) => React.JSX.Element;
-export default _default;
+export default RefNameAutocomplete;

package/dist/LinearGenomeView/components/RefNameAutocomplete/index.js

@@ -33,7 +33,7 @@ const BaseResults_1 = __importStar(require("@jbrowse/core/TextSearch/BaseResults
 const material_1 = require("@mui/material");
 const util_2 = require("./util");
 const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
-exports.default = (0, mobx_react_1.observer)(function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
+const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
     var _a;
     const session = (0, util_1.getSession)(model);
     const { assemblyManager } = session;
@@ -108,3 +108,4 @@ exports.default = (0, mobx_react_1.observer)(function RefNameAutocomplete({ mode
                 }))) || []
                 : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => (0, util_2.getFiltered)(opts, inputValue), renderInput: params => (react_1.default.createElement(AutocompleteTextField_1.default, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
 });
+exports.default = RefNameAutocomplete;

package/dist/LinearGenomeView/components/RefNameAutocomplete/util.d.ts

@@ -4,9 +4,7 @@ export interface Option {
     result: BaseResult;
 }
 export declare function getFiltered(opts: Option[], inputValue: string): Option[];
-export declare function aggregateResults(results: BaseResult[]): {
-    [key: string]: BaseResult[];
-};
+export declare function aggregateResults(results: BaseResult[]): Record<string, BaseResult[]>;
 export declare function getDeduplicatedResult(results: BaseResult[]): {
     result: BaseResult;
 }[];

package/dist/LinearGenomeView/components/Rubberband.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function Rubberband({ model, ControlComponent, }: {
+declare const Rubberband: ({ model, ControlComponent, }: {
     model: LGV;
-    ControlComponent?: React.ReactElement;
-}): React.JSX.Element;
-declare const _default: typeof Rubberband;
-export default _default;
+    ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+}) => React.JSX.Element;
+export default Rubberband;

package/dist/LinearGenomeView/components/Rubberband.js

@@ -41,7 +41,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         minHeight: 8,
     },
 });
-function Rubberband({ model, ControlComponent = react_1.default.createElement("div", null), }) {
+const Rubberband = (0, mobx_react_1.observer)(function ({ model, ControlComponent = react_1.default.createElement("div", null), }) {
     const ref = (0, react_1.useRef)(null);
     const { classes } = useStyles();
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, handleMenuItemClick, open, handleClose, mouseMove, mouseDown, mouseOut, } = (0, hooks_1.useRangeSelect)(ref, model);
@@ -52,5 +52,5 @@ function Rubberband({ model, ControlComponent = react_1.default.createElement("d
                 top: anchorPosition.clientY,
             }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
         react_1.default.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut }, ControlComponent)));
-}
-exports.default = (0, mobx_react_1.observer)(Rubberband);
+});
+exports.default = Rubberband;

package/dist/LinearGenomeView/components/Scalebar.d.ts

@@ -6,5 +6,5 @@ interface ScalebarProps {
     style?: React.CSSProperties;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<ScalebarProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const Scalebar: React.ForwardRefExoticComponent<ScalebarProps & React.RefAttributes<HTMLDivElement>>;
+export default Scalebar;

package/dist/LinearGenomeView/components/Scalebar.js

@@ -26,7 +26,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         pointerEvents: 'none',
     },
     majorTickLabel: {
-        fontSize: '11px',
+        fontSize: 11,
         zIndex: 1,
         background: theme.palette.background.paper,
         lineHeight: 'normal',
@@ -40,10 +40,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         pointerEvents: 'none',
     },
     refLabel: {
-        fontSize: '11px',
+        fontSize: 11,
         position: 'absolute',
-        left: '2px',
-        top: '-1px',
+        left: 2,
+        top: -1,
         fontWeight: 'bold',
         lineHeight: 'normal',
         zIndex: 1,
@@ -70,32 +70,37 @@ const RenderedRefNameLabels = (0, mobx_react_1.observer)(({ model }) => {
             }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` }, block.refName)) : null;
     })));
 });
-const RenderedScalebarLabels = (0, mobx_react_1.observer)(({ model }) => {
+const RenderedBlockTicks = function ({ block, bpPerPx, }) {
     const { classes } = useStyles();
-    const { bpPerPx, staticBlocks } = model;
-    return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, index) => {
-        const { reversed, start, end, key, widthPx } = block;
+    const { reversed, start, end } = block;
+    const ticks = (0, util_1.makeTicks)(start, end, bpPerPx, true, false);
+    return (react_1.default.createElement(Block_1.ContentBlock, { block: block }, ticks.map(({ type, base }) => {
+        if (type === 'major') {
+            const x = (reversed ? end - base : base - start) / bpPerPx;
+            const baseNumber = base + 1;
+            return (react_1.default.createElement("div", { key: base, className: classes.tick, style: { left: x } }, baseNumber ? (react_1.default.createElement(material_1.Typography, { className: classes.majorTickLabel }, (0, util_2.getTickDisplayStr)(baseNumber, bpPerPx))) : null));
+        }
+        return null;
+    })));
+};
+const RenderedScalebarLabels = (0, mobx_react_1.observer)(({ model }) => {
+    const { staticBlocks, bpPerPx } = model;
+    return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, idx) => {
+        const { key, widthPx } = block;
+        const k = `${key}-${idx}`;
         if (block instanceof blockTypes_1.ContentBlock) {
-            const ticks = (0, util_1.makeTicks)(start, end, bpPerPx, true, false);
-            return (react_1.default.createElement(Block_1.ContentBlock, { key: `${key}-${index}`, block: block }, ticks.map(tick => {
-                if (tick.type === 'major') {
-                    const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                    const baseNumber = tick.base + 1;
-                    return (react_1.default.createElement("div", { key: tick.base, className: classes.tick, style: { left: x } }, baseNumber ? (react_1.default.createElement(material_1.Typography, { className: classes.majorTickLabel }, (0, util_2.getTickDisplayStr)(baseNumber, bpPerPx))) : null));
-                }
-                return null;
-            })));
+            return react_1.default.createElement(RenderedBlockTicks, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        if (block instanceof blockTypes_1.ElidedBlock) {
-            return react_1.default.createElement(Block_1.ElidedBlock, { key: key, width: widthPx });
+        else if (block instanceof blockTypes_1.ElidedBlock) {
+            return react_1.default.createElement(Block_1.ElidedBlock, { key: k, width: widthPx });
         }
-        if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
-            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: key, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
+        else if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
+            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: k, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
         return null;
     })));
 });
-const Scalebar = react_1.default.forwardRef(({ model, style, className, ...other }, ref) => {
+const Scalebar = (0, mobx_react_1.observer)(react_1.default.forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
     const { classes, cx } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
     return (react_1.default.createElement(material_1.Paper, { "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
@@ -112,5 +117,5 @@ const Scalebar = react_1.default.forwardRef(({ model, style, className, ...other
                 } },
                 react_1.default.createElement(RenderedScalebarLabels, { model: model }))),
         react_1.default.createElement(RenderedRefNameLabels, { model: model })));
-});
-exports.default = (0, mobx_react_1.observer)(Scalebar);
+}));
+exports.default = Scalebar;

package/dist/LinearGenomeView/components/SearchBox.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
-declare function SearchBox({ model, showHelp, }: {
-    showHelp?: boolean;
+declare const SearchBox: ({ model, showHelp, }: {
+    showHelp?: boolean | undefined;
     model: LinearGenomeViewModel;
-}): React.JSX.Element;
-declare const _default: typeof SearchBox;
-export default _default;
+}) => React.JSX.Element;
+export default SearchBox;

package/dist/LinearGenomeView/components/SearchBox.js

@@ -17,7 +17,7 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
         minWidth: 100,
     },
 }));
-function SearchBox({ model, showHelp, }) {
+const SearchBox = (0, mobx_react_1.observer)(function ({ model, showHelp, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
     const session = (0, util_1.getSession)(model);
@@ -102,5 +102,5 @@ function SearchBox({ model, showHelp, }) {
                 },
             },
         } }));
-}
-exports.default = (0, mobx_react_1.observer)(SearchBox);
+});
+exports.default = SearchBox;

package/dist/LinearGenomeView/components/SequenceSearchDialog.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-declare function SequenceDialog({ model, handleClose, }: {
+declare const SequenceSearchDialog: ({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
-        toggleTrack(trackId: string): void;
+        showTrack: (trackId: string) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SequenceDialog;
-export default _default;
+}) => React.JSX.Element;
+export default SequenceSearchDialog;

package/dist/LinearGenomeView/components/SequenceSearchDialog.js

@@ -35,7 +35,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         width: '40em',
     },
 });
-function SequenceDialog({ model, handleClose, }) {
+const SequenceSearchDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const [value, setValue] = (0, react_1.useState)('');
     const [searchForward, setSearchForward] = (0, react_1.useState)(true);
@@ -65,24 +65,26 @@ function SequenceDialog({ model, handleClose, }) {
                         const session = (0, util_1.getSession)(model);
                         const { assemblyManager } = session;
                         const assemblyName = model.assemblyNames[0];
-                        session.addTrackConf({
-                            trackId,
-                            name: `Sequence search ${value}`,
-                            assemblyNames: [assemblyName],
-                            type: 'FeatureTrack',
-                            adapter: {
-                                type: 'SequenceSearchAdapter',
-                                search: value,
-                                searchForward,
-                                searchReverse,
-                                caseInsensitive,
-                                sequenceAdapter: (0, mobx_state_tree_1.getSnapshot)((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
-                            },
-                        });
-                        model.toggleTrack(trackId);
+                        if ((0, util_1.isSessionWithAddTracks)(session)) {
+                            session.addTrackConf({
+                                trackId,
+                                name: `Sequence search ${value}`,
+                                assemblyNames: [assemblyName],
+                                type: 'FeatureTrack',
+                                adapter: {
+                                    type: 'SequenceSearchAdapter',
+                                    search: value,
+                                    searchForward,
+                                    searchReverse,
+                                    caseInsensitive,
+                                    sequenceAdapter: (0, mobx_state_tree_1.getSnapshot)((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
+                                },
+                            });
+                            model.showTrack(trackId);
+                        }
                     }
                     handleClose();
                 }, variant: "contained", color: "primary" }, "Submit"),
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
-}
-exports.default = (0, mobx_react_1.observer)(SequenceDialog);
+});
+exports.default = SequenceSearchDialog;

package/dist/LinearGenomeView/components/TrackContainer.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, track, }: {
+declare const TrackContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
 }) => React.JSX.Element;
-export default _default;
+export default TrackContainer;

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -55,7 +55,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         zIndex: 3,
     },
 });
-exports.default = (0, mobx_react_1.observer)(function TrackContainer({ model, track, }) {
+const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId } = model;
@@ -82,3 +82,4 @@ exports.default = (0, mobx_react_1.observer)(function TrackContainer({ model, tr
             }, onDragEnter: debouncedOnDragEnter }),
         react_1.default.createElement(ui_1.ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
 });
+exports.default = TrackContainer;

package/dist/LinearGenomeView/components/TrackLabel.d.ts

@@ -4,5 +4,5 @@ interface Props {
     track: BaseTrackModel;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const TrackLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default TrackLabel;

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -14,10 +14,10 @@ const ui_1 = require("@jbrowse/core/ui");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 // icons
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const TrackLabelDragHandle_1 = __importDefault(require("./TrackLabelDragHandle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
@@ -34,19 +34,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         fontSize: '0.8rem',
         pointerEvents: 'none',
     },
-    dragHandle: {
-        cursor: 'grab',
-    },
-    dragHandleIcon: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        pointerEvents: 'none',
-    },
     iconButton: {
         padding: theme.spacing(1),
     },
 }));
-const TrackLabel = react_1.default.forwardRef(function ({ track, className }, ref) {
+const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(function TrackLabel2({ track, className }, ref) {
     var _a;
     const { classes, cx } = useStyles();
     const view = (0, util_1.getContainingView)(track);
@@ -65,15 +57,7 @@ const TrackLabel = react_1.default.forwardRef(function ({ track, className }, re
         ...track.trackMenuItems(),
     ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
     return (react_1.default.createElement(material_1.Paper, { ref: ref, className: cx(className, classes.root) },
-        react_1.default.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
-                const target = event.currentTarget;
-                if (target.parentNode) {
-                    const parent = target.parentNode;
-                    event.dataTransfer.setDragImage(parent, 20, 20);
-                    view.setDraggingTrackId(track.id);
-                }
-            }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
-            react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })),
+        react_1.default.createElement(TrackLabelDragHandle_1.default, { track: track, trackId: trackId, view: view }),
         react_1.default.createElement(material_1.IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             react_1.default.createElement(Close_1.default, { fontSize: "small" })),
         react_1.default.createElement(material_1.Typography, { variant: "body1", component: "span", className: classes.trackName },
@@ -82,5 +66,5 @@ const TrackLabel = react_1.default.forwardRef(function ({ track, className }, re
                     .join(' ') })),
         react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: items, "data-testid": "track_menu_icon" },
             react_1.default.createElement(MoreVert_1.default, { fontSize: "small" }))));
-});
-exports.default = (0, mobx_react_1.observer)(TrackLabel);
+}));
+exports.default = TrackLabel;

package/dist/LinearGenomeView/components/TrackLabelDragHandle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { LinearGenomeViewModel } from '..';
+declare function TrackLabelDragHandle({ trackId, view, track, }: {
+    trackId: string;
+    track: BaseTrackModel;
+    view: LinearGenomeViewModel;
+}): React.JSX.Element;
+export default TrackLabelDragHandle;

package/dist/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -0,0 +1,32 @@
+"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 mui_1 = require("tss-react/mui");
+// icons
+const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+const useStyles = (0, mui_1.makeStyles)()({
+    dragHandle: {
+        cursor: 'grab',
+    },
+    dragHandleIcon: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        pointerEvents: 'none',
+    },
+});
+function TrackLabelDragHandle({ trackId, view, track, }) {
+    const { classes } = useStyles();
+    return (react_1.default.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
+            const target = event.currentTarget;
+            if (target.parentNode) {
+                const parent = target.parentNode;
+                event.dataTransfer.setDragImage(parent, 20, 20);
+                view.setDraggingTrackId(track.id);
+            }
+        }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
+        react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })));
+}
+exports.default = TrackLabelDragHandle;

package/dist/LinearGenomeView/components/TrackRenderingContainer.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, track, onDragEnter, }: {
+declare const TrackRenderingContainer: ({ model, track, onDragEnter, }: {
     model: LGV;
     track: BaseTrackModel;
     onDragEnter: () => void;
 }) => React.JSX.Element;
-export default _default;
+export default TrackRenderingContainer;

package/dist/LinearGenomeView/components/TrackRenderingContainer.js

@@ -47,7 +47,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         zIndex: 2,
     },
 });
-exports.default = (0, mobx_react_1.observer)(function TrackRenderingContainer({ model, track, onDragEnter, }) {
+const TrackRenderingContainer = (0, mobx_react_1.observer)(function ({ model, track, onDragEnter, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
@@ -73,3 +73,4 @@ exports.default = (0, mobx_react_1.observer)(function TrackRenderingContainer({
             } },
             react_1.default.createElement(DisplayBlurb, { model: display }))) : null)) : null));
 });
+exports.default = TrackRenderingContainer;

package/dist/LinearGenomeView/components/TracksContainer.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ children, model, }: {
+declare const TracksContainer: ({ children, model, }: {
     children: React.ReactNode;
     model: LGV;
 }) => React.JSX.Element;
-export default _default;
+export default TracksContainer;

package/dist/LinearGenomeView/components/TracksContainer.js

@@ -47,7 +47,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         overflow: 'hidden',
     },
 });
-exports.default = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
+const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = (0, util_1.getEnv)(model);
     const { mouseDown: mouseDown1, mouseUp } = (0, hooks_1.useSideScroll)(model);
@@ -70,3 +70,4 @@ exports.default = (0, mobx_react_1.observer)(function TracksContainer({ children
         additional,
         children));
 });
+exports.default = TracksContainer;

package/dist/LinearGenomeView/components/VerticalGuide.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function VerticalGuide({ model, coordX }: {
+declare const VerticalGuide: ({ model, coordX, }: {
     model: LGV;
     coordX: number;
-}): React.JSX.Element;
-declare const _default: typeof VerticalGuide;
-export default _default;
+}) => React.JSX.Element;
+export default VerticalGuide;

package/dist/LinearGenomeView/components/VerticalGuide.js

@@ -17,12 +17,12 @@ const useStyles = (0, mui_1.makeStyles)()({
         zIndex: 10,
     },
 });
-function VerticalGuide({ model, coordX }) {
+const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
     return (react_1.default.createElement(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true },
         react_1.default.createElement("div", { className: classes.guide, style: {
                 left: coordX,
                 background: 'red',
             } })));
-}
-exports.default = (0, mobx_react_1.observer)(VerticalGuide);
+});
+exports.default = VerticalGuide;

package/dist/LinearGenomeView/components/ZoomControls.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
-declare function ZoomControls({ model }: {
+declare const ZoomControls: ({ model, }: {
     model: LinearGenomeViewModel;
-}): React.JSX.Element;
-declare const _default: typeof ZoomControls;
-export default _default;
+}) => React.JSX.Element;
+export default ZoomControls;

package/dist/LinearGenomeView/components/ZoomControls.js

@@ -43,7 +43,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
-function ZoomControls({ model }) {
+const ZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model;
     const [value, setValue] = (0, react_1.useState)(-Math.log2(bpPerPx) * 100);
@@ -56,5 +56,5 @@ function ZoomControls({ model }) {
         react_1.default.createElement(material_1.Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), disabled: scaleFactor !== 1 }),
         react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, size: "large" },
             react_1.default.createElement(ZoomIn_1.default, null))));
-}
-exports.default = (0, mobx_react_1.observer)(ZoomControls);
+});
+exports.default = ZoomControls;

package/dist/LinearGenomeView/components/util.d.ts

@@ -20,5 +20,5 @@ export declare function getCytobands(assembly: Assembly | undefined, refName: st
     refName: string;
     start: number;
     end: number;
-    type: any;
+    type: string;
 }[];