@jbrowse/plugin-linear-genome-view 1.6.7 → 1.7.0

package/dist/plugin-linear-genome-view.cjs.development.js

@@ -21,8 +21,8 @@ var simpleFeature = require('@jbrowse/core/util/simpleFeature');
 var tracks = require('@jbrowse/core/util/tracks');
 var mobxStateTree = require('mobx-state-tree');
 var MenuOpenIcon = _interopDefault(require('@material-ui/icons/MenuOpen'));
-var ui = require('@jbrowse/core/ui');
 var mobxReact = require('mobx-react');
+var ui = require('@jbrowse/core/ui');
 var reactPopper = require('react-popper');
 var styles = require('@material-ui/core/styles');
 var blockTypes = require('@jbrowse/core/util/blockTypes');
@@ -1467,14 +1467,17 @@ var BaseLinearDisplay = /*#__PURE__*/mobxReact.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__default.createElement(DisplayMessageComponent, {
     model: model
   }) : /*#__PURE__*/React__default.createElement(LinearBlocks$1, Object.assign({}, props)), children, /*#__PURE__*/React__default.createElement(TooltipComponent, {
@@ -4671,7 +4674,7 @@ var TrackLabel$1 = /*#__PURE__*/mobxReact.observer(TrackLabel);
 var useStyles$c = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     root: {
-      margin: 2
+      marginTop: 2
     },
     resizeHandle: {
       height: RESIZE_HANDLE_HEIGHT,
@@ -4691,6 +4694,15 @@ var useStyles$c = /*#__PURE__*/styles.makeStyles(function (theme) {
     trackLabel: {
       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',
       display: 'inline-block'
@@ -4704,13 +4716,11 @@ var useStyles$c = /*#__PURE__*/styles.makeStyles(function (theme) {
       whiteSpace: 'nowrap',
       position: 'relative',
       background: 'none',
-      zIndex: 2,
-      boxSizing: 'content-box'
+      zIndex: 2
     }
   };
 });
-
-function TrackContainerLabel(_ref) {
+var TrackContainerLabel = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model,
       view = _ref.view;
   var classes = useStyles$c();
@@ -4719,7 +4729,7 @@ function TrackContainerLabel(_ref) {
     track: model,
     className: clsx(classes.trackLabel, labelStyle)
   }) : null;
-}
+});
 
 function TrackContainer(_ref2) {
   var model = _ref2.model,
@@ -4772,6 +4782,7 @@ function TrackContainer(_ref2) {
     role: "presentation"
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
+    className: classes.renderingComponentContainer,
     style: {
       transform: "scaleX(".concat(model.scaleFactor, ")")
     }
@@ -8064,26 +8075,30 @@ function SetMaxHeightDlg$1(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, {
     className: classes.root
-  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set max height for the track"), /*#__PURE__*/React__default.createElement(core.TextField, {
+  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""), /*#__PURE__*/React__default.createElement(core.TextField, {
     value: max,
     onChange: function onChange(event) {
-      setMax(event.target.value);
+      return setMax(event.target.value);
     },
     placeholder: "Enter max score"
-  }), /*#__PURE__*/React__default.createElement(core.Button, {
+  }), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     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__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetMaxHeight = /*#__PURE__*/mobxReact.observer(SetMaxHeightDlg$1);