@jbrowse/plugin-linear-genome-view 2.7.0 → 2.7.2

package/dist/index.d.ts

@@ -198,7 +198,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 resizeHeight(distance: number): number;
             } & {
                 featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
-                featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+                featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
                 currStatsBpPerPx: number;
             } & {
                 readonly currentBytesRequested: number;
@@ -401,7 +403,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 resizeHeight(distance: number): number;
             } & {
                 featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
-                featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+                featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
                 currStatsBpPerPx: number;
             } & {
                 readonly currentBytesRequested: number;
@@ -694,7 +698,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             resizeHeight(distance: number): number;
         } & {
             featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
-            featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+            featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined; /**
+             * #slot configuration.LinearGenomeViewPlugin.trackLabels
+             */
             currStatsBpPerPx: number;
         } & {
             readonly currentBytesRequested: number;
@@ -894,9 +900,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 hideHeaderOverview: boolean;
                 hideNoTracksActive: boolean;
                 trackSelectorType: string;
-                trackLabels: string;
                 showCenterLine: boolean;
                 showCytobandsSetting: boolean;
+                trackLabels: string;
                 showGridlines: boolean;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
@@ -905,7 +911,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setDisplayName(name: string): void;
                 setWidth(newWidth: number): void;
-                setMinimized(flag: boolean): void;
+                setMinimized(flag: boolean): void; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
             } & {
                 volatileWidth: number | undefined;
                 minimumBlockWidth: number;
@@ -919,6 +927,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
                 rightOffset: import("./LinearGenomeView").BpOffset | undefined;
             } & {
+                readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
@@ -1082,9 +1091,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-                trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
                 showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
             }, {
                 width: number;
@@ -1093,7 +1102,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setDisplayName(name: string): void;
                 setWidth(newWidth: number): void;
-                setMinimized(flag: boolean): void;
+                setMinimized(flag: boolean): void; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
             } & {
                 volatileWidth: number | undefined;
                 minimumBlockWidth: number;
@@ -1107,6 +1118,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
                 rightOffset: import("./LinearGenomeView").BpOffset | undefined;
             } & {
+                readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
@@ -1280,9 +1292,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 hideHeaderOverview: boolean;
                 hideNoTracksActive: boolean;
                 trackSelectorType: string;
-                trackLabels: string;
                 showCenterLine: boolean;
                 showCytobandsSetting: boolean;
+                trackLabels: string;
                 showGridlines: boolean;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
@@ -1291,7 +1303,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setDisplayName(name: string): void;
                 setWidth(newWidth: number): void;
-                setMinimized(flag: boolean): void;
+                setMinimized(flag: boolean): void; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
             } & {
                 volatileWidth: number | undefined;
                 minimumBlockWidth: number;
@@ -1305,6 +1319,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
                 rightOffset: import("./LinearGenomeView").BpOffset | undefined;
             } & {
+                readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
@@ -1468,9 +1483,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-                trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
                 showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
             }, {
                 width: number;
@@ -1479,7 +1494,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setDisplayName(name: string): void;
                 setWidth(newWidth: number): void;
-                setMinimized(flag: boolean): void;
+                setMinimized(flag: boolean): void; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
             } & {
                 volatileWidth: number | undefined;
                 minimumBlockWidth: number;
@@ -1493,6 +1510,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
                 rightOffset: import("./LinearGenomeView").BpOffset | undefined;
             } & {
+                readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
@@ -1666,9 +1684,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 hideHeaderOverview: boolean;
                 hideNoTracksActive: boolean;
                 trackSelectorType: string;
-                trackLabels: string;
                 showCenterLine: boolean;
                 showCytobandsSetting: boolean;
+                trackLabels: string;
                 showGridlines: boolean;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                 width: number;
@@ -1677,7 +1695,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setDisplayName(name: string): void;
                 setWidth(newWidth: number): void;
-                setMinimized(flag: boolean): void;
+                setMinimized(flag: boolean): void; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
             } & {
                 volatileWidth: number | undefined;
                 minimumBlockWidth: number;
@@ -1691,6 +1711,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
                 rightOffset: import("./LinearGenomeView").BpOffset | undefined;
             } & {
+                readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
@@ -1854,9 +1875,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
                 trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-                trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
                 showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+                trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
             }, {
                 width: number;
@@ -1865,7 +1886,9 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setDisplayName(name: string): void;
                 setWidth(newWidth: number): void;
-                setMinimized(flag: boolean): void;
+                setMinimized(flag: boolean): void; /**
+                 * #slot configuration.LinearGenomeViewPlugin.trackLabels
+                 */
             } & {
                 volatileWidth: number | undefined;
                 minimumBlockWidth: number;
@@ -1879,6 +1902,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
                 rightOffset: import("./LinearGenomeView").BpOffset | undefined;
             } & {
+                readonly trackLabelsSetting: any;
                 readonly width: number;
                 readonly interRegionPaddingWidth: number;
                 readonly assemblyNames: string[];
@@ -2021,6 +2045,19 @@ export default class LinearGenomeViewPlugin extends Plugin {
             }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         }) => import("react").JSX.Element;
     };
+    /**
+     * #config LinearGenomeViewConfigSchema
+     */
+    configurationSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        /**
+         * #slot configuration.LinearGenomeViewPlugin.trackLabels
+         */
+        trackLabels: {
+            type: string;
+            defaultValue: string;
+            model: import("mobx-state-tree").ISimpleType<string>;
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
     install(pluginManager: PluginManager): void;
     configure(pluginManager: PluginManager): void;
 }

package/dist/index.js

@@ -39,6 +39,8 @@ const LinearBasicDisplay_1 = __importDefault(require("./LinearBasicDisplay"));
 const FeatureTrack_1 = __importDefault(require("./FeatureTrack"));
 const BasicTrack_1 = __importDefault(require("./BasicTrack"));
 const LaunchLinearGenomeView_1 = __importDefault(require("./LaunchLinearGenomeView"));
+const configuration_1 = require("@jbrowse/core/configuration");
+const mobx_state_tree_1 = require("mobx-state-tree");
 class LinearGenomeViewPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
@@ -51,6 +53,23 @@ class LinearGenomeViewPlugin extends Plugin_1.default {
             ZoomControls: LinearGenomeView_1.ZoomControls,
             LinearGenomeView: LinearGenomeView_1.LinearGenomeView,
         };
+        /**
+         * #config LinearGenomeViewConfigSchema
+         */
+        this.configurationSchema = (0, configuration_1.ConfigurationSchema)('LinearGenomeViewConfigSchema', {
+            /**
+             * #slot configuration.LinearGenomeViewPlugin.trackLabels
+             */
+            trackLabels: {
+                type: 'string',
+                defaultValue: 'overlapping',
+                model: mobx_state_tree_1.types.enumeration('trackLabelOptions', [
+                    'offset',
+                    'overlapping',
+                    'hidden',
+                ]),
+            },
+        });
     }
     install(pluginManager) {
         (0, FeatureTrack_1.default)(pluginManager);

package/esm/BaseLinearDisplay/components/LinearBlocks.js

@@ -45,7 +45,7 @@ const RenderedBlocks = observer(function ({ model, }) {
         if (block instanceof InterRegionPaddingBlock) {
             return (React.createElement(InterRegionPaddingBlockComponent, { key: block.key, width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
-        throw new Error(`invalid block type ${typeof block}`);
+        throw new Error(`invalid block type ${JSON.stringify(block)}`);
     })));
 });
 export { RenderedBlocks };

package/esm/BaseLinearDisplay/components/Tooltip.js

@@ -28,7 +28,8 @@ const TooltipContents = React.forwardRef(function TooltipContents2({ message },
     return (React.createElement("div", { ref: ref }, React.isValidElement(message) ? (message) : message ? (React.createElement(SanitizedHTML, { html: String(message) })) : null));
 });
 const Tooltip = observer(({ model, clientMouseCoord, }) => {
-    const { classes } = useStyles();
+    var _a, _b;
+    const { theme, classes } = useStyles();
     const { featureUnderMouse } = model;
     const [width, setWidth] = useState(0);
     const [popperElt, setPopperElt] = useState(null);
@@ -54,7 +55,8 @@ const Tooltip = observer(({ model, clientMouseCoord, }) => {
     const contents = featureUnderMouse
         ? getConf(model, 'mouseover', { feature: featureUnderMouse })
         : undefined;
-    return featureUnderMouse && contents ? (React.createElement(Portal, null,
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return featureUnderMouse && contents ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
         React.createElement("div", { ref: setPopperElt, className: classes.tooltip, 
             // zIndex needed to go over widget drawer
             style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -2,12 +2,12 @@ import React, { lazy, useEffect, useRef } from 'react';
 import { Button, Paper, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { LoadingEllipses } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 // icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import TrackContainer from './TrackContainer';
 import TracksContainer from './TracksContainer';
-import { getSession } from '@jbrowse/core/util';
 const ImportForm = lazy(() => import('./ImportForm'));
 const useStyles = makeStyles()(theme => ({
     note: {
@@ -15,14 +15,28 @@ const useStyles = makeStyles()(theme => ({
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(1),
     },
+    rel: {
+        position: 'relative',
+    },
+    top: {
+        zIndex: 1000,
+    },
 }));
+function NoTracksActive({ model }) {
+    const { classes } = useStyles();
+    const { hideNoTracksActive } = model;
+    return (React.createElement(Paper, { className: classes.note }, !hideNoTracksActive ? (React.createElement(React.Fragment, null,
+        React.createElement(Typography, null, "No tracks active."),
+        React.createElement(Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: React.createElement(TrackSelectorIcon, null) }, "Open track selector"))) : (React.createElement("div", { style: { height: '48px' } }))));
+}
 const LinearGenomeView = observer(({ model }) => {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
-    const { classes } = useStyles();
     const ref = useRef(null);
     const session = getSession(model);
+    const { classes } = useStyles();
     useEffect(() => {
-        // sets the focused view id based on a click within the LGV; necessary for subviews to be focused properly
+        // sets the focused view id based on a click within the LGV;
+        // necessary for subviews to be focused properly
         function handleSelectView(e) {
             var _a, _b;
             if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
@@ -44,11 +58,19 @@ const LinearGenomeView = observer(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (React.createElement("div", { style: { position: 'relative' }, ref: ref },
+    return (React.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => session.setHovered(undefined), onMouseMove: event => {
+            const c = ref.current;
+            if (!c) {
+                return;
+            }
+            const { tracks } = model;
+            const leftPx = event.clientX - c.getBoundingClientRect().left;
+            const hoverPosition = model.pxToBp(leftPx);
+            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
+            session.setHovered({ hoverPosition, hoverFeature });
+        } },
         React.createElement(HeaderComponent, { model: model }),
         React.createElement(MiniControlsComponent, { model: model }),
-        React.createElement(TracksContainer, { model: model }, !tracks.length ? (React.createElement(Paper, { variant: "outlined", className: classes.note }, !model.hideNoTracksActive ? (React.createElement(React.Fragment, null,
-            React.createElement(Typography, null, "No tracks active."),
-            React.createElement(Button, { variant: "contained", color: "primary", onClick: model.activateTrackSelector, style: { zIndex: 1000 }, startIcon: React.createElement(TrackSelectorIcon, null) }, "Open track selector"))) : (React.createElement("div", { style: { height: '48px' } })))) : (tracks.map(track => (React.createElement(TrackContainer, { key: track.id, model: model, track: track })))))));
+        React.createElement(TracksContainer, { model: model }, !tracks.length ? (React.createElement(NoTracksActive, { model: model })) : (tracks.map(track => (React.createElement(TrackContainer, { key: track.id, model: model, track: track })))))));
 });
 export default LinearGenomeView;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -18,6 +18,9 @@ const useStyles = makeStyles()({
         position: 'absolute',
         zIndex: 10,
     },
+    rel: {
+        position: 'relative',
+    },
 });
 const HoverTooltip = observer(function ({ model, open, guideX, overview, }) {
     var _a;
@@ -103,7 +106,7 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
         setGuideX(undefined);
     }
     if (startX === undefined) {
-        return (React.createElement("div", { style: { position: 'relative' } },
+        return (React.createElement("div", { className: classes.rel },
             guideX !== undefined ? (React.createElement(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null,
             React.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
     }
@@ -124,7 +127,7 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
             [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
         }
     }
-    return (React.createElement("div", { style: { position: 'relative' } },
+    return (React.createElement("div", { className: classes.rel },
         leftBpOffset && rightBpOffset ? (React.createElement(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
         React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
 });

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -9,10 +9,10 @@ import { SanitizedHTML } from '@jbrowse/core/ui';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import DragIcon from '@mui/icons-material/DragIndicator';
 import CloseIcon from '@mui/icons-material/Close';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 import AddIcon from '@mui/icons-material/Add';
+import TrackLabelDragHandle from './TrackLabelDragHandle';
 const useStyles = makeStyles()(theme => ({
     root: {
         background: alpha(theme.palette.background.paper, 0.8),
@@ -29,14 +29,6 @@ const useStyles = makeStyles()(theme => ({
         fontSize: '0.8rem',
         pointerEvents: 'none',
     },
-    dragHandle: {
-        cursor: 'grab',
-    },
-    dragHandleIcon: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        pointerEvents: 'none',
-    },
     iconButton: {
         padding: theme.spacing(1),
     },
@@ -60,15 +52,7 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
         ...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.createElement(Paper, { ref: ref, className: cx(className, classes.root) },
-        React.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.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })),
+        React.createElement(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }),
         React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             React.createElement(CloseIcon, { fontSize: "small" })),
         React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName },

package/esm/LinearGenomeView/components/TrackLabelContainer.js

@@ -18,9 +18,9 @@ const TrackLabelContainer = observer(function ({ track, view, }) {
     const { classes, cx } = useStyles();
     const display = track.displays[0];
     const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes;
-    const labelStyle = view.trackLabels !== 'overlapping' || display.prefersOffset
+    const labelStyle = view.trackLabelsSetting !== 'overlapping' || display.prefersOffset
         ? trackLabelOffset
         : trackLabelOverlap;
-    return view.trackLabels !== 'hidden' ? (React.createElement(TrackLabel, { track: track, className: cx(trackLabel, labelStyle) })) : null;
+    return view.trackLabelsSetting !== 'hidden' ? (React.createElement(TrackLabel, { track: track, className: cx(trackLabel, labelStyle) })) : null;
 });
 export default TrackLabelContainer;

package/esm/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/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+// icons
+import DragIcon from '@mui/icons-material/DragIndicator';
+const useStyles = makeStyles()({
+    dragHandle: {
+        cursor: 'grab',
+    },
+    dragHandleIcon: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        pointerEvents: 'none',
+    },
+});
+function TrackLabelDragHandle({ trackId, view, track, }) {
+    const { classes } = useStyles();
+    return (React.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.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })));
+}
+export default TrackLabelDragHandle;

package/esm/LinearGenomeView/index.d.ts

@@ -1,4 +1,3 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export * from './model';

package/esm/LinearGenomeView/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
 import { stateModelFactory } from './model';
-export default (pluginManager) => {
+export default function LinearGenomeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'LinearGenomeView',
@@ -10,5 +10,5 @@ export default (pluginManager) => {
             ReactComponent: lazy(() => import('./components/LinearGenomeView')),
         });
     });
-};
+}
 export * from './model';

package/esm/LinearGenomeView/model.d.ts

@@ -71,9 +71,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     width: number;
@@ -96,6 +96,12 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: BpOffset | undefined;
     rightOffset: BpOffset | undefined;
 } & {
+    /**
+     * #getter
+     * this is the effective value of the track labels setting, incorporating
+     * both the config and view state. use this instead of view.trackLabels
+     */
+    readonly trackLabelsSetting: any;
     /**
      * #getter
      */