@jbrowse/plugin-linear-genome-view 1.7.9 → 2.0.0

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -1,179 +1,139 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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;
 });
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobxReact = require("mobx-react");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _ui = require("@jbrowse/core/ui");
-
-var _util = require("@jbrowse/core/util");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _ = require("..");
-
-var _TrackLabel = _interopRequireDefault(require("./TrackLabel"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
+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 });
+var react_1 = __importStar(require("react"));
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var mobx_react_1 = require("mobx-react");
+var mobx_state_tree_1 = require("mobx-state-tree");
+var configuration_1 = require("@jbrowse/core/configuration");
+var ui_1 = require("@jbrowse/core/ui");
+var util_1 = require("@jbrowse/core/util");
+var TrackLabel_1 = __importDefault(require("./TrackLabel"));
+var useStyles = (0, mui_1.makeStyles)()({
     root: {
-      marginTop: 2
+        marginTop: 2,
     },
     resizeHandle: {
-      height: _.RESIZE_HANDLE_HEIGHT,
-      boxSizing: 'border-box',
-      position: 'relative',
-      zIndex: 2
+        height: 3,
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 2,
     },
     overlay: {
-      pointerEvents: 'none',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      zIndex: 3,
-      borderRadius: theme.shape.borderRadius
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 3,
     },
     trackLabel: {
-      zIndex: 3
+        zIndex: 3,
     },
     // aligns with block bounderies. check for example the breakpoint split view
     // demo to see if features align if wanting to change things
     renderingComponentContainer: {
-      position: 'absolute',
-      // -1 offset because of the 1px border of the Paper
-      left: -1,
-      height: '100%',
-      width: '100%'
+        position: 'absolute',
+        // -1 offset because of the 1px border of the Paper
+        left: -1,
+        height: '100%',
+        width: '100%',
     },
     trackLabelInline: {
-      position: 'relative',
-      display: 'inline-block'
+        position: 'relative',
+        display: 'inline-block',
     },
     trackLabelOverlap: {
-      position: 'absolute'
+        position: 'absolute',
     },
     trackRenderingContainer: {
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      whiteSpace: 'nowrap',
-      position: 'relative',
-      background: 'none',
-      zIndex: 2
-    }
-  };
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap',
+        position: 'relative',
+        background: 'none',
+        zIndex: 2,
+    },
 });
-var TrackContainerLabel = (0, _mobxReact.observer)(function (_ref) {
-  var model = _ref.model,
-      view = _ref.view;
-  var classes = useStyles();
-  var labelStyle = view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline;
-  return view.trackLabels !== 'hidden' ? /*#__PURE__*/_react.default.createElement(_TrackLabel.default, {
-    track: model,
-    className: (0, _clsx.default)(classes.trackLabel, labelStyle)
-  }) : null;
+var TrackContainerLabel = (0, mobx_react_1.observer)(function (_a) {
+    var model = _a.model, view = _a.view;
+    var _b = useStyles(), classes = _b.classes, cx = _b.cx;
+    var labelStyle = view.trackLabels === 'overlapping'
+        ? classes.trackLabelOverlap
+        : classes.trackLabelInline;
+    return view.trackLabels !== 'hidden' ? (react_1.default.createElement(TrackLabel_1.default, { track: model, className: cx(classes.trackLabel, labelStyle) })) : null;
 });
-
-function TrackContainer(_ref2) {
-  var model = _ref2.model,
-      track = _ref2.track;
-  var classes = useStyles();
-  var display = track.displays[0];
-  var horizontalScroll = model.horizontalScroll,
-      draggingTrackId = model.draggingTrackId,
-      moveTrack = model.moveTrack;
-  var height = display.height;
-  var trackId = (0, _configuration.getConf)(track, 'trackId');
-  var ref = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (ref.current) {
-      model.trackRefs[trackId] = ref.current;
+function TrackContainer(_a) {
+    var model = _a.model, track = _a.track;
+    var classes = useStyles().classes;
+    var display = track.displays[0];
+    var horizontalScroll = model.horizontalScroll, draggingTrackId = model.draggingTrackId, moveTrack = model.moveTrack;
+    var height = display.height;
+    var trackId = (0, configuration_1.getConf)(track, 'trackId');
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (ref.current) {
+            model.trackRefs[trackId] = ref.current;
+        }
+        return function () {
+            delete model.trackRefs[trackId];
+        };
+    }, [model.trackRefs, trackId]);
+    function onDragEnter() {
+        if (draggingTrackId !== undefined &&
+            (0, mobx_state_tree_1.isAlive)(display) &&
+            draggingTrackId !== display.id) {
+            moveTrack(draggingTrackId, track.id);
+        }
     }
-
-    return function () {
-      delete model.trackRefs[trackId];
-    };
-  }, [model.trackRefs, trackId]);
-
-  function onDragEnter() {
-    if (draggingTrackId !== undefined && (0, _mobxStateTree.isAlive)(display) && draggingTrackId !== display.id) {
-      moveTrack(draggingTrackId, track.id);
-    }
-  }
-
-  var debouncedOnDragEnter = (0, _util.useDebouncedCallback)(onDragEnter, 100);
-  var RenderingComponent = display.RenderingComponent,
-      DisplayBlurb = display.DisplayBlurb;
-  var dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
-  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
-    className: classes.root,
-    variant: "outlined"
-  }, /*#__PURE__*/_react.default.createElement(TrackContainerLabel, {
-    model: track,
-    view: model
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.trackRenderingContainer,
-    style: {
-      height: height
-    },
-    onScroll: function onScroll(event) {
-      var target = event.target;
-      display.setScrollTop(target.scrollTop);
-    },
-    onDragEnter: debouncedOnDragEnter,
-    "data-testid": "trackRenderingContainer-".concat(model.id, "-").concat(trackId),
-    role: "presentation"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    className: classes.renderingComponentContainer,
-    style: {
-      transform: "scaleX(".concat(model.scaleFactor, ")")
-    }
-  }, /*#__PURE__*/_react.default.createElement(RenderingComponent, {
-    model: display,
-    onHorizontalScroll: horizontalScroll
-  })), DisplayBlurb ? /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: display.height - 20
-    }
-  }, /*#__PURE__*/_react.default.createElement(DisplayBlurb, {
-    model: display
-  })) : null), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.overlay,
-    style: {
-      height: display.height,
-      background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined
-    },
-    onDragEnter: debouncedOnDragEnter
-  }), /*#__PURE__*/_react.default.createElement(_ui.ResizeHandle, {
-    onDrag: display.resizeHeight,
-    className: classes.resizeHandle
-  }));
+    var debouncedOnDragEnter = (0, util_1.useDebouncedCallback)(onDragEnter, 100);
+    var RenderingComponent = display.RenderingComponent, DisplayBlurb = display.DisplayBlurb;
+    var dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
+    return (react_1.default.createElement(material_1.Paper, { className: classes.root, variant: "outlined" },
+        react_1.default.createElement(TrackContainerLabel, { model: track, view: model }),
+        react_1.default.createElement("div", { className: classes.trackRenderingContainer, style: { height: height }, onScroll: function (event) {
+                var target = event.target;
+                display.setScrollTop(target.scrollTop);
+            }, onDragEnter: debouncedOnDragEnter, "data-testid": "trackRenderingContainer-".concat(model.id, "-").concat(trackId), role: "presentation" },
+            react_1.default.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: "scaleX(".concat(model.scaleFactor, ")") } },
+                react_1.default.createElement(RenderingComponent, { model: display, onHorizontalScroll: horizontalScroll })),
+            DisplayBlurb ? (react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    left: 0,
+                    top: display.height - 20,
+                } },
+                react_1.default.createElement(DisplayBlurb, { model: display }))) : null),
+        react_1.default.createElement("div", { className: classes.overlay, style: {
+                height: display.height,
+                background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined,
+            }, onDragEnter: debouncedOnDragEnter }),
+        react_1.default.createElement(ui_1.ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
 }
-
-var _default = (0, _mobxReact.observer)(TrackContainer);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(TrackContainer);
+//# sourceMappingURL=TrackContainer.js.map

package/dist/LinearGenomeView/components/TrackContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackContainer.js","sourceRoot":"","sources":["../../../src/LinearGenomeView/components/TrackContainer.tsx"],"names":[],"mappings":"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"}

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

@@ -1,44 +1,8 @@
 import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<{
-    track: import("mobx-state-tree").ModelInstanceTypeProps<{
-        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-        type: import("mobx-state-tree").ISimpleType<string>;
-        configuration: import("mobx-state-tree").ITypeUnion<any, any, any>;
-        displays: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
-    }> & {
-        readonly rpcSessionId: any;
-        readonly name: any;
-        readonly textSearchAdapter: any;
-        readonly adapterType: any;
-        readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-        readonly canConfigure: any;
-    } & {
-        activateConfigurationUI(): void;
-        showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        hideDisplay(displayId: string): number;
-        replaceDisplay(oldDisplayId: string, newDisplayId: string, initialSnapshot?: {} | undefined): void;
-    } & {
-        trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-        id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-        type: import("mobx-state-tree").ISimpleType<string>;
-        configuration: import("mobx-state-tree").ITypeUnion<any, any, any>;
-        displays: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
-    }, {
-        readonly rpcSessionId: any;
-        readonly name: any;
-        readonly textSearchAdapter: any;
-        readonly adapterType: any;
-        readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-        readonly canConfigure: any;
-    } & {
-        activateConfigurationUI(): void;
-        showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        hideDisplay(displayId: string): number;
-        replaceDisplay(oldDisplayId: string, newDisplayId: string, initialSnapshot?: {} | undefined): void;
-    } & {
-        trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    className?: string | undefined;
-} & React.RefAttributes<unknown>>;
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+interface Props {
+    track: BaseTrackModel;
+    className?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -1,163 +1,128 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _ui = require("@jbrowse/core/ui");
-
-var _util = require("@jbrowse/core/util");
-
-var _core = require("@material-ui/core");
-
-var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
-
-var _DragIndicator = _interopRequireDefault(require("@material-ui/icons/DragIndicator"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _mobxReact = require("mobx-react");
-
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var mobx_react_1 = require("mobx-react");
+var configuration_1 = require("@jbrowse/core/configuration");
+var CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
+var util_1 = require("@jbrowse/core/util");
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var hooks_1 = require("material-ui-popup-state/hooks");
 // icons
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
+var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
     root: {
-      background: (0, _core.alpha)(theme.palette.background.paper, 0.8),
-      '&:hover': {
-        background: theme.palette.background.paper
-      },
-      transition: theme.transitions.create(['background'], {
-        duration: theme.transitions.duration.shortest
-      })
+        background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
+        '&:hover': {
+            background: theme.palette.background.paper,
+        },
+        transition: theme.transitions.create(['background'], {
+            duration: theme.transitions.duration.shortest,
+        }),
     },
     trackName: {
-      margin: '0 auto',
-      width: '90%',
-      fontSize: '0.8rem',
-      pointerEvents: 'none'
+        margin: '0 auto',
+        width: '90%',
+        fontSize: '0.8rem',
+        pointerEvents: 'none',
     },
     dragHandle: {
-      cursor: 'grab',
-      color: '#135560'
+        cursor: 'grab',
+        color: '#135560',
     },
     dragHandleIcon: {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      pointerEvents: 'none'
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        pointerEvents: 'none',
     },
     iconButton: {
-      padding: theme.spacing(1)
-    }
-  };
-});
-
-var TrackLabel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _session$getTrackActi;
-
-  var classes = useStyles();
-
-  var _React$useState = _react.default.useState(null),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      anchorEl = _React$useState2[0],
-      setAnchorEl = _React$useState2[1];
-
-  var track = props.track,
-      className = props.className;
-  var view = (0, _util.getContainingView)(track);
-  var session = (0, _util.getSession)(track);
-  var trackConf = track.configuration;
-  var trackId = (0, _configuration.getConf)(track, 'trackId');
-
-  var handleClick = function handleClick(event) {
-    setAnchorEl(event.currentTarget);
-  };
-
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
-
-  var onDragStart = function onDragStart(event) {
-    var target = event.target;
-
-    if (target.parentNode) {
-      event.dataTransfer.setDragImage(target.parentNode, 20, 20);
-      view.setDraggingTrackId(track.id);
-    }
-  };
-
-  var onDragEnd = function onDragEnd() {
-    view.setDraggingTrackId(undefined);
-  };
-
-  var trackName = (0, _configuration.getConf)(track, 'name');
-
-  if ((0, _configuration.getConf)(track, 'type') === 'ReferenceSequenceTrack') {
-    var r = session.assemblies.find(function (a) {
-      return a.sequence === trackConf;
-    });
-    trackName = (0, _configuration.readConfObject)(trackConf, 'name') || (r ? "Reference Sequence (".concat((0, _configuration.readConfObject)(r, 'name'), ")") : 'Reference Sequence');
-  }
-
-  function handleMenuItemClick(_, callback) {
-    callback();
-    handleClose();
-  }
-
-  var items = [].concat((0, _toConsumableArray2.default)(((_session$getTrackActi = session.getTrackActionMenuItems) === null || _session$getTrackActi === void 0 ? void 0 : _session$getTrackActi.call(session, trackConf)) || []), (0, _toConsumableArray2.default)(track.trackMenuItems())).sort(function (a, b) {
-    return (b.priority || 0) - (a.priority || 0);
-  });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Paper, {
-    ref: ref,
-    className: (0, _clsx.default)(className, classes.root)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    draggable: true,
-    className: classes.dragHandle,
-    onDragStart: onDragStart,
-    onDragEnd: onDragEnd,
-    "data-testid": "dragHandle-".concat(view.id, "-").concat(trackId)
-  }, /*#__PURE__*/_react.default.createElement(_DragIndicator.default, {
-    className: classes.dragHandleIcon
-  })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    onClick: function onClick() {
-      return view.hideTrack(trackId);
+        padding: theme.spacing(1),
     },
-    className: classes.iconButton,
-    title: "close this track",
-    color: "secondary"
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)), /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    variant: "body1",
-    component: "span",
-    className: classes.trackName
-  }, trackName), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    "aria-controls": "simple-menu",
-    "aria-haspopup": "true",
-    onClick: handleClick,
-    className: classes.iconButton,
-    color: "secondary",
-    "data-testid": "track_menu_icon",
-    disabled: !items.length
-  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))), /*#__PURE__*/_react.default.createElement(_ui.Menu, {
-    anchorEl: anchorEl,
-    onMenuItemClick: handleMenuItemClick,
-    open: Boolean(anchorEl),
-    onClose: handleClose,
-    menuItems: items
-  }));
+}); });
+var TrackLabel = react_1.default.forwardRef(function (_a, ref) {
+    var _b;
+    var track = _a.track, className = _a.className;
+    var _c = useStyles(), classes = _c.classes, cx = _c.cx;
+    var view = (0, util_1.getContainingView)(track);
+    var session = (0, util_1.getSession)(track);
+    var trackConf = track.configuration;
+    var trackId = (0, configuration_1.getConf)(track, 'trackId');
+    var popupState = (0, hooks_1.usePopupState)({
+        popupId: 'trackLabelMenu',
+        variant: 'popover',
+    });
+    var onDragStart = function (event) {
+        var target = event.target;
+        if (target.parentNode) {
+            var parent_1 = target.parentNode;
+            event.dataTransfer.setDragImage(parent_1, 20, 20);
+            view.setDraggingTrackId(track.id);
+        }
+    };
+    var onDragEnd = function () {
+        view.setDraggingTrackId(undefined);
+    };
+    var trackName = (0, configuration_1.getConf)(track, 'name');
+    if ((0, configuration_1.getConf)(track, 'type') === 'ReferenceSequenceTrack') {
+        var r = session.assemblies.find(function (a) { return a.sequence === trackConf; });
+        trackName =
+            trackName ||
+                (r
+                    ? "Reference Sequence (".concat((0, configuration_1.readConfObject)(r, 'name'), ")")
+                    : 'Reference Sequence');
+    }
+    var items = __spreadArray(__spreadArray([], __read((((_b = session.getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(session, trackConf)) || [])), false), __read(track.trackMenuItems()), false).sort(function (a, b) { return (b.priority || 0) - (a.priority || 0); });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        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: onDragStart, onDragEnd: onDragEnd, "data-testid": "dragHandle-".concat(view.id, "-").concat(trackId) },
+                react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })),
+            react_1.default.createElement(material_1.IconButton, { onClick: function () { return view.hideTrack(trackId); }, className: classes.iconButton, title: "close this track", color: "secondary" },
+                react_1.default.createElement(Close_1.default, { fontSize: "small" })),
+            react_1.default.createElement(material_1.Typography, { variant: "body1", component: "span", className: classes.trackName }, trackName),
+            react_1.default.createElement(material_1.IconButton, __assign({}, (0, hooks_1.bindTrigger)(popupState), { className: classes.iconButton, color: "secondary", "data-testid": "track_menu_icon", disabled: !items.length }),
+                react_1.default.createElement(MoreVert_1.default, { fontSize: "small" }))),
+        react_1.default.createElement(CascadingMenu_1.default, __assign({}, (0, hooks_1.bindPopover)(popupState), { onMenuItemClick: function (_, callback) { return callback(); }, menuItems: items, popupState: popupState }))));
 });
-
-var _default = (0, _mobxReact.observer)(TrackLabel);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(TrackLabel);
+//# sourceMappingURL=TrackLabel.js.map