@jbrowse/plugin-linear-genome-view 1.6.6 → 1.6.9

package/dist/plugin-linear-genome-view.esm.js

@@ -14,8 +14,8 @@ import { isFeature } from '@jbrowse/core/util/simpleFeature';
 import { getParentRenderProps, getTrackAssemblyNames, getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { getParent, types, cast, isAlive, addDisposer, getEnv, resolveIdentifier, getRoot, getSnapshot } from 'mobx-state-tree';
 import MenuOpenIcon from '@material-ui/icons/MenuOpen';
-import { Menu, ResizeHandle, ReturnToImportFormDialog } from '@jbrowse/core/ui';
 import { observer, PropTypes } from 'mobx-react';
+import { Menu, ResizeHandle, ReturnToImportFormDialog } from '@jbrowse/core/ui';
 import { usePopper } from 'react-popper';
 import { makeStyles } from '@material-ui/core/styles';
 import { ContentBlock as ContentBlock$1, ElidedBlock as ElidedBlock$1, InterRegionPaddingBlock as InterRegionPaddingBlock$1 } from '@jbrowse/core/util/blockTypes';
@@ -50,13 +50,13 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import IconButton$1 from '@material-ui/core/IconButton';
 import Slider from '@material-ui/core/Slider';
 import ZoomOut from '@material-ui/icons/ZoomOut';
+import Paper$1 from '@material-ui/core/Paper';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import DragIcon from '@material-ui/icons/DragIndicator';
 import normalizeWheel from 'normalize-wheel';
 import { alpha as alpha$1 } from '@material-ui/core/styles/colorManipulator';
 import Popover$1 from '@material-ui/core/Popover';
 import Tooltip$2 from '@material-ui/core/Tooltip';
-import Paper$1 from '@material-ui/core/Paper';
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
 import ArrowDown from '@material-ui/icons/KeyboardArrowDown';
@@ -1459,14 +1459,17 @@ var BaseLinearDisplay = /*#__PURE__*/observer(function (props) {
       }
     },
     onMouseMove: function onMouseMove(event) {
-      if (ref.current) {
-        var rect = ref.current.getBoundingClientRect();
-        setOffsetMouseCoord([event.clientX - rect.left, event.clientY - rect.top]);
-        setClientMouseCoord([event.clientX, event.clientY]);
-        setClientRect(rect);
+      if (!ref.current) {
+        return;
       }
-    },
-    role: "presentation"
+
+      var rect = ref.current.getBoundingClientRect();
+      var left = rect.left,
+          top = rect.top;
+      setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
+      setClientMouseCoord([event.clientX, event.clientY]);
+      setClientRect(rect);
+    }
   }, DisplayMessageComponent ? /*#__PURE__*/React.createElement(DisplayMessageComponent, {
     model: model
   }) : /*#__PURE__*/React.createElement(LinearBlocks$1, Object.assign({}, props)), children, /*#__PURE__*/React.createElement(TooltipComponent, {
@@ -4660,11 +4663,15 @@ var TrackLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var TrackLabel$1 = /*#__PURE__*/observer(TrackLabel);
 
-var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    root: {},
+    root: {
+      marginTop: 2
+    },
     resizeHandle: {
       height: RESIZE_HANDLE_HEIGHT,
+      boxSizing: 'border-box',
+      position: 'relative',
       zIndex: 2
     },
     overlay: {
@@ -4677,8 +4684,16 @@ var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
       borderRadius: theme.shape.borderRadius
     },
     trackLabel: {
-      zIndex: 3,
-      margin: theme.spacing(1)
+      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%'
     },
     trackLabelInline: {
       position: 'relative',
@@ -4697,15 +4712,23 @@ var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
     }
   };
 });
-
-function TrackContainer(_ref) {
+var TrackContainerLabel = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model,
-      track = _ref.track;
+      view = _ref.view;
+  var classes = useStyles$c();
+  var labelStyle = view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline;
+  return view.trackLabels !== 'hidden' ? /*#__PURE__*/React.createElement(TrackLabel$1, {
+    track: model,
+    className: clsx(classes.trackLabel, labelStyle)
+  }) : null;
+});
+
+function TrackContainer(_ref2) {
+  var model = _ref2.model,
+      track = _ref2.track;
   var classes = useStyles$c();
   var display = track.displays[0];
-  var id = model.id,
-      trackLabels = model.trackLabels,
-      horizontalScroll = model.horizontalScroll,
+  var horizontalScroll = model.horizontalScroll,
       draggingTrackId = model.draggingTrackId,
       moveTrack = model.moveTrack;
   var height = display.height;
@@ -4731,10 +4754,13 @@ function TrackContainer(_ref) {
   var RenderingComponent = display.RenderingComponent,
       DisplayBlurb = display.DisplayBlurb;
   var dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Paper, {
-    variant: "outlined",
+  return /*#__PURE__*/React.createElement(Paper$1, {
+    className: classes.root,
+    variant: "outlined"
+  }, /*#__PURE__*/React.createElement(TrackContainerLabel, {
+    model: track,
+    view: model
+  }), /*#__PURE__*/React.createElement("div", {
     className: classes.trackRenderingContainer,
     style: {
       height: height
@@ -4744,19 +4770,16 @@ function TrackContainer(_ref) {
       display.setScrollTop(target.scrollTop);
     },
     onDragEnter: debouncedOnDragEnter,
-    "data-testid": "trackRenderingContainer-".concat(id, "-").concat(trackId),
+    "data-testid": "trackRenderingContainer-".concat(model.id, "-").concat(trackId),
     role: "presentation"
-  }, trackLabels !== 'hidden' ? /*#__PURE__*/React.createElement(TrackLabel$1, {
-    track: track,
-    className: clsx(classes.trackLabel, trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline)
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
+    className: classes.renderingComponentContainer,
     style: {
       transform: "scaleX(".concat(model.scaleFactor, ")")
     }
   }, /*#__PURE__*/React.createElement(RenderingComponent, {
     model: display,
-    blockState: {},
     onHorizontalScroll: horizontalScroll
   })), DisplayBlurb ? /*#__PURE__*/React.createElement("div", {
     style: {
@@ -5535,8 +5558,6 @@ function TracksContainer(_ref) {
         boxSizing: 'border-box'
       }
     })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.spacer
   }), children);
 }
 
@@ -8046,26 +8067,30 @@ function SetMaxHeightDlg$1(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, {
     className: classes.root
-  }, /*#__PURE__*/React.createElement(Typography$1, null, "Set max height for the track"), /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(Typography$1, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""), /*#__PURE__*/React.createElement(TextField, {
     value: max,
     onChange: function onChange(event) {
-      setMax(event.target.value);
+      return setMax(event.target.value);
     },
     placeholder: "Enter max score"
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
     variant: "contained",
     color: "primary",
     type: "submit",
-    style: {
-      marginLeft: 20
-    },
+    autoFocus: true,
     onClick: function onClick() {
       model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetMaxHeight = /*#__PURE__*/observer(SetMaxHeightDlg$1);