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

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -7,30 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _configuration = require("@jbrowse/core/configuration");
 
-var _ui = require("@jbrowse/core/ui");
+var _CascadingMenu = _interopRequireDefault(require("@jbrowse/core/ui/CascadingMenu"));
 
 var _util = require("@jbrowse/core/util");
 
 var _core = require("@material-ui/core");
 
+var _hooks = require("material-ui-popup-state/hooks");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _mobxReact = require("mobx-react");
+
 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");
-
 // icons
 var useStyles = (0, _core.makeStyles)(function (theme) {
   return {
@@ -64,30 +66,20 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
   };
 });
 
-var TrackLabel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var TrackLabel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _session$getTrackActi;
 
+  var track = _ref.track,
+      className = _ref.className;
   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 popupState = (0, _hooks.usePopupState)({
+    popupId: 'trackLabelMenu',
+    variant: 'popover'
+  });
 
   var onDragStart = function onDragStart(event) {
     var target = event.target;
@@ -108,12 +100,7 @@ var TrackLabel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     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();
+    trackName = trackName || (r ? "Reference Sequence (".concat((0, _configuration.readConfObject)(r, 'name'), ")") : 'Reference Sequence');
   }
 
   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) {
@@ -141,21 +128,18 @@ var TrackLabel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     variant: "body1",
     component: "span",
     className: classes.trackName
-  }, trackName), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    "aria-controls": "simple-menu",
-    "aria-haspopup": "true",
-    onClick: handleClick,
+  }, trackName), /*#__PURE__*/_react.default.createElement(_core.IconButton, (0, _extends2.default)({}, (0, _hooks.bindTrigger)(popupState), {
     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
-  }));
+  }), /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))), /*#__PURE__*/_react.default.createElement(_CascadingMenu.default, (0, _extends2.default)({}, (0, _hooks.bindPopover)(popupState), {
+    onMenuItemClick: function onMenuItemClick(_, callback) {
+      return callback();
+    },
+    menuItems: items,
+    popupState: popupState
+  })));
 });
 
 var _default = (0, _mobxReact.observer)(TrackLabel);

package/dist/LinearGenomeView/index.d.ts

@@ -56,6 +56,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
     hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     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<"hierarchical">, [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]>;
@@ -87,6 +88,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     readonly width: number;
     readonly interRegionPaddingWidth: number;
+    readonly assemblyNames: string[];
 } & {
     readonly assemblyErrors: string;
     readonly assembliesInitialized: boolean;
@@ -106,19 +108,11 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     readonly minOffset: number;
     readonly displayedRegionsTotalPx: number;
     renderProps(): any;
-    readonly assemblyNames: string[];
     searchScope(assemblyName: string): {
         assemblyName: string;
         includeAggregateIndexes: boolean;
         tracks: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IAnyType> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>>;
     };
-    /**
-     * @param refName - refName of the displayedRegion
-     * @param coord - coordinate at the displayed Region
-     * @param regionNumber - optional param used as identifier when
-     * there are multiple displayedRegions with the same refName
-     * @returns offsetPx of the displayed region that it lands in
-     */
     bpToPx({ refName, coord, regionNumber, }: {
         refName: string;
         coord: number;
@@ -164,6 +158,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     setError(error: Error | undefined): void;
     toggleHeader(): void;
     toggleHeaderOverview(): void;
+    toggleNoTracksActive(): void;
     scrollTo(offsetPx: number): number;
     zoomTo(bpPerPx: number): number;
     setOffsets(left: undefined | BpOffset, right: undefined | BpOffset): void;

package/dist/LinearGenomeView/index.js

@@ -155,6 +155,7 @@ function stateModelFactory(pluginManager) {
     tracks: _mobxStateTree.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
     hideHeader: false,
     hideHeaderOverview: false,
+    hideNoTracksActive: false,
     trackSelectorType: _mobxStateTree.types.optional(_mobxStateTree.types.enumeration(['hierarchical']), 'hierarchical'),
     trackLabels: _mobxStateTree.types.optional(_mobxStateTree.types.string, function () {
       return localStorageGetItem('lgv-trackLabels') || 'overlapping';
@@ -199,6 +200,12 @@ function stateModelFactory(pluginManager) {
 
       get interRegionPaddingWidth() {
         return INTER_REGION_PADDING_WIDTH;
+      },
+
+      get assemblyNames() {
+        return (0, _toConsumableArray2.default)(new Set(self.displayedRegions.map(function (region) {
+          return region.assemblyName;
+        })));
       }
 
     };
@@ -208,7 +215,8 @@ function stateModelFactory(pluginManager) {
         var _getSession = (0, _util.getSession)(self),
             assemblyManager = _getSession.assemblyManager;
 
-        return this.assemblyNames.map(function (a) {
+        var assemblyNames = self.assemblyNames;
+        return assemblyNames.map(function (a) {
           var _assemblyManager$get;
 
           return (_assemblyManager$get = assemblyManager.get(a)) === null || _assemblyManager$get === void 0 ? void 0 : _assemblyManager$get.error;
@@ -221,7 +229,8 @@ function stateModelFactory(pluginManager) {
         var _getSession2 = (0, _util.getSession)(self),
             assemblyManager = _getSession2.assemblyManager;
 
-        return this.assemblyNames.every(function (a) {
+        var assemblyNames = self.assemblyNames;
+        return assemblyNames.every(function (a) {
           var _assemblyManager$get2;
 
           return (_assemblyManager$get2 = assemblyManager.get(a)) === null || _assemblyManager$get2 === void 0 ? void 0 : _assemblyManager$get2.initialized;
@@ -312,13 +321,6 @@ function stateModelFactory(pluginManager) {
           highResolutionScaling: (0, _configuration.getConf)((0, _util.getSession)(self), 'highResolutionScaling')
         });
       },
-
-      get assemblyNames() {
-        return (0, _toConsumableArray2.default)(new Set(self.displayedRegions.map(function (region) {
-          return region.assemblyName;
-        })));
-      },
-
       searchScope: function searchScope(assemblyName) {
         return {
           assemblyName: assemblyName,
@@ -326,14 +328,6 @@ function stateModelFactory(pluginManager) {
           tracks: self.tracks
         };
       },
-
-      /**
-       * @param refName - refName of the displayedRegion
-       * @param coord - coordinate at the displayed Region
-       * @param regionNumber - optional param used as identifier when
-       * there are multiple displayedRegions with the same refName
-       * @returns offsetPx of the displayed region that it lands in
-       */
       bpToPx: function bpToPx(_ref) {
         var refName = _ref.refName,
             coord = _ref.coord,
@@ -432,10 +426,8 @@ function stateModelFactory(pluginManager) {
           return track.configuration.trackId;
         });
         results.forEach(function (result) {
-          if (openTrackIds !== []) {
-            if (openTrackIds.includes(result.trackId)) {
-              result.updateScore(result.getScore() + 1);
-            }
+          if (openTrackIds.includes(result.trackId)) {
+            result.updateScore(result.getScore() + 1);
           }
         });
         return results;
@@ -509,6 +501,9 @@ function stateModelFactory(pluginManager) {
       toggleHeaderOverview: function toggleHeaderOverview() {
         self.hideHeaderOverview = !self.hideHeaderOverview;
       },
+      toggleNoTracksActive: function toggleNoTracksActive() {
+        self.hideNoTracksActive = !self.hideNoTracksActive;
+      },
       scrollTo: function scrollTo(offsetPx) {
         var newOffsetPx = (0, _util.clamp)(offsetPx, self.minOffset, self.maxOffset);
         self.offsetPx = newOffsetPx;
@@ -692,6 +687,8 @@ function stateModelFactory(pluginManager) {
         throw new Error("invalid track selector type ".concat(self.trackSelectorType));
       },
       navToLocString: function navToLocString(locString, optAssemblyName) {
+        var _parsedLocStrings;
+
         var assemblyNames = self.assemblyNames;
 
         var _getSession3 = (0, _util.getSession)(self),
@@ -699,14 +696,38 @@ function stateModelFactory(pluginManager) {
 
         var isValidRefName = assemblyManager.isValidRefName;
         var assemblyName = optAssemblyName || assemblyNames[0];
-        var parsedLocStrings = locString.split(' ').filter(function (f) {
-          return !!f.trim();
-        }).map(function (l) {
-          return (0, _util.parseLocString)(l, function (ref) {
-            return isValidRefName(ref, assemblyName);
+        var parsedLocStrings;
+        var inputs = locString.split(/(\s+)/).map(function (f) {
+          return f.trim();
+        }).filter(function (f) {
+          return !!f;
+        }); // first try interpreting as a whitespace-separated sequence of
+        // multiple locstrings
+
+        try {
+          parsedLocStrings = inputs.map(function (l) {
+            return (0, _util.parseLocString)(l, function (ref) {
+              return isValidRefName(ref, assemblyName);
+            });
           });
-        });
-        var locations = parsedLocStrings.map(function (region) {
+        } catch (e) {
+          // if this fails, try interpreting as a whitespace-separated refname,
+          // start, end if start and end are integer inputs
+          var _inputs = (0, _slicedToArray2.default)(inputs, 3),
+              refName = _inputs[0],
+              start = _inputs[1],
+              end = _inputs[2];
+
+          if ("".concat(e).match(/Unknown reference sequence/) && Number.isInteger(+start) && Number.isInteger(+end)) {
+            parsedLocStrings = [(0, _util.parseLocString)(refName + ':' + start + '..' + end, function (ref) {
+              return isValidRefName(ref, assemblyName);
+            })];
+          } else {
+            throw e;
+          }
+        }
+
+        var locations = (_parsedLocStrings = parsedLocStrings) === null || _parsedLocStrings === void 0 ? void 0 : _parsedLocStrings.map(function (region) {
           var asmName = region.assemblyName || assemblyName;
           var asm = assemblyManager.get(asmName);
           var refName = region.refName;
@@ -746,12 +767,12 @@ function stateModelFactory(pluginManager) {
           this.setDisplayedRegions([_objectSpread({
             reversed: loc.reversed
           }, loc.parentRegion)]);
-          var start = loc.start,
-              end = loc.end,
+          var _start = loc.start,
+              _end = loc.end,
               parentRegion = loc.parentRegion;
           this.navTo(_objectSpread(_objectSpread({}, loc), {}, {
-            start: (0, _util.clamp)(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
-            end: (0, _util.clamp)(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end)
+            start: (0, _util.clamp)(_start !== null && _start !== void 0 ? _start : 0, 0, parentRegion.end),
+            end: (0, _util.clamp)(_end !== null && _end !== void 0 ? _end : parentRegion.end, 0, parentRegion.end)
           }));
         } else {
           this.setDisplayedRegions( // @ts-ignore
@@ -1230,6 +1251,12 @@ function stateModelFactory(pluginManager) {
           checked: !self.hideHeaderOverview,
           onClick: self.toggleHeaderOverview,
           disabled: self.hideHeader
+        }, {
+          label: 'Show no tracks active button',
+          icon: _Visibility.default,
+          type: 'checkbox',
+          checked: !self.hideNoTracksActive,
+          onClick: self.toggleNoTracksActive
         }, {
           label: 'Track labels',
           icon: _Label.default,

package/dist/LinearGenomeView/index.test.js

@@ -82,7 +82,7 @@ function initialize() {
   }).actions(function (self) {
     return {
       isValidRefName: function isValidRefName(str) {
-        return !str.includes(':');
+        return str === 'ctgA' || str === 'ctgB';
       },
       get: function get(str) {
         return self.assemblies.get(str);
@@ -1163,8 +1163,25 @@ test('multi region', function () {
   model.setDisplayedRegions(_volvoxDisplayedRegions.default.slice(0, 1));
   model.navToLocString('ctgA ctgB');
   expect(model.displayedRegions[0].refName).toBe('ctgA');
-  expect(model.displayedRegions[1].refName).toBe('ctgB'); // [
-  //   { refName: 'ctgA', start: 0, end: 50001 },
-  //   { refName: 'ctgB', start: 0, end: 6079 },
-  // ])
+  expect(model.displayedRegions[1].refName).toBe('ctgB');
+});
+test('space separated locstring', function () {
+  var _initialize15 = initialize(),
+      Session = _initialize15.Session,
+      LinearGenomeModel = _initialize15.LinearGenomeModel;
+
+  var model = Session.create({
+    configuration: {}
+  }).setView(LinearGenomeModel.create({
+    type: 'LinearGenomeView',
+    tracks: [{
+      name: 'foo track',
+      type: 'BasicTrack'
+    }]
+  }));
+  model.setWidth(800);
+  model.setDisplayedRegions(_volvoxDisplayedRegions.default.slice(0, 1));
+  model.navToLocString('ctgA 0 100');
+  expect(model.offsetPx).toBe(0);
+  expect(model.bpPerPx).toBe(0.125);
 });

package/dist/index.js

@@ -211,36 +211,37 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
               switch (_context.prev = _context.next) {
                 case 0:
                   session = _ref.session, assembly = _ref.assembly, loc = _ref.loc, _ref$tracks = _ref.tracks, tracks = _ref$tracks === void 0 ? [] : _ref$tracks;
+                  _context.prev = 1;
                   assemblyManager = session.assemblyManager;
                   view = session.addView('LinearGenomeView', {});
-                  _context.next = 5;
+                  _context.next = 6;
                   return (0, _mobx.when)(function () {
                     return !!view.volatileWidth;
                   });
 
-                case 5:
+                case 6:
                   if (assembly) {
-                    _context.next = 7;
+                    _context.next = 8;
                     break;
                   }
 
                   throw new Error('No assembly provided when launching linear genome view');
 
-                case 7:
-                  _context.next = 9;
+                case 8:
+                  _context.next = 10;
                   return assemblyManager.waitForAssembly(assembly);
 
-                case 9:
+                case 10:
                   asm = _context.sent;
 
                   if (asm) {
-                    _context.next = 12;
+                    _context.next = 13;
                     break;
                   }
 
                   throw new Error("Assembly \"".concat(assembly, "\" not found when launching linear genome view"));
 
-                case 12:
+                case 13:
                   view.navToLocString(loc, assembly);
                   idsNotFound = [];
                   tracks.forEach(function (track) {
@@ -256,18 +257,28 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
                   });
 
                   if (!idsNotFound.length) {
-                    _context.next = 17;
+                    _context.next = 18;
                     break;
                   }
 
                   throw new Error("Could not resolve identifiers: ".concat(idsNotFound.join(',')));
 
-                case 17:
+                case 18:
+                  _context.next = 24;
+                  break;
+
+                case 20:
+                  _context.prev = 20;
+                  _context.t0 = _context["catch"](1);
+                  session.notify("".concat(_context.t0), 'error');
+                  throw _context.t0;
+
+                case 24:
                 case "end":
                   return _context.stop();
               }
             }
-          }, _callee);
+          }, _callee, null, [[1, 20]]);
         }));
 
         return function (_x) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -40,6 +40,7 @@
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
+    "material-ui-popup-state": "^1.9.3",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0"
   },
@@ -57,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6504c385d703ce6e755d05652ef659ffe28c864"
+  "gitHead": "02d8c1e88e5603ea5855faed4ccb814e28071b32"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,19 +1,15 @@
-import React, { useState, useRef, useMemo } from 'react'
+import React, { useState, useRef } from 'react'
 import { observer } from 'mobx-react'
-import { Portal, alpha, useTheme, makeStyles } from '@material-ui/core'
+import { useTheme, makeStyles } from '@material-ui/core'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
-import { usePopper } from 'react-popper'
 
 // locals
+import Tooltip from './Tooltip'
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   display: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -21,89 +17,8 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     minHeight: '100%',
   },
-
-  // these styles come from
-  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-  tooltip: {
-    pointerEvents: 'none',
-    backgroundColor: alpha(theme.palette.grey[700], 0.9),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-    padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
-
-const TooltipContents = React.forwardRef<
-  HTMLDivElement,
-  { message: React.ReactNode | string }
->(({ message }: { message: React.ReactNode | string }, ref) => {
-  return <div ref={ref}>{message}</div>
 })
 
-const Tooltip = observer(
-  ({
-    model,
-    clientMouseCoord,
-  }: {
-    model: BaseLinearDisplayModel
-    clientMouseCoord: Coord
-  }) => {
-    const classes = useStyles()
-    const { featureUnderMouse } = model
-    const [width, setWidth] = useState(0)
-    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
-
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = useMemo(
-      () => ({
-        getBoundingClientRect: () => {
-          const x = clientMouseCoord[0] + width / 2 + 20
-          const y = clientMouseCoord[1]
-          return {
-            top: y,
-            left: x,
-            bottom: y,
-            right: x,
-            width: 0,
-            height: 0,
-            x,
-            y,
-            toJSON() {},
-          }
-        },
-      }),
-      [clientMouseCoord, width],
-    )
-    const { styles, attributes } = usePopper(virtElement, popperElt)
-
-    const contents = featureUnderMouse
-      ? getConf(model, 'mouseover', { feature: featureUnderMouse })
-      : undefined
-
-    return featureUnderMouse && contents ? (
-      <Portal>
-        <div
-          ref={setPopperElt}
-          className={classes.tooltip}
-          // zIndex needed to go over widget drawer
-          style={{ ...styles.popper, zIndex: 100000 }}
-          {...attributes.popper}
-        >
-          <TooltipContents
-            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
-            message={contents}
-          />
-        </div>
-      </Portal>
-    ) : null
-  },
-)
-
 type Coord = [number, number]
 const BaseLinearDisplay = observer(
   (props: { model: BaseLinearDisplayModel; children?: React.ReactNode }) => {