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

package/dist/LinearGenomeView/components/ScaleBar.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _core = require("@material-ui/core");
+
+var _blockTypes = require("@jbrowse/core/util/blockTypes");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _mobxReact = require("mobx-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Block = require("../../BaseLinearDisplay/components/Block");
+
+var _util = require("../util");
+
+var _excluded = ["model", "style", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    scaleBarContainer: {
+      overflow: 'hidden',
+      position: 'relative'
+    },
+    scaleBarZoomContainer: {
+      position: 'relative',
+      zIndex: 1
+    },
+    scaleBar: {
+      position: 'absolute',
+      display: 'flex',
+      pointerEvents: 'none'
+    },
+    majorTickLabel: {
+      fontSize: '11px',
+      zIndex: 1,
+      background: theme.palette.background.paper,
+      lineHeight: 'normal',
+      pointerEvents: 'none'
+    },
+    tick: {
+      position: 'absolute',
+      width: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      pointerEvents: 'none'
+    },
+    refLabel: {
+      fontSize: '11px',
+      position: 'absolute',
+      left: '2px',
+      top: '-1px',
+      fontWeight: 'bold',
+      lineHeight: 'normal',
+      zIndex: 1,
+      pointerEvents: 'none',
+      background: theme.palette.background.paper
+    }
+  };
+});
+var RenderedRefNameLabels = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model;
+  var classes = useStyles(); // find the block that needs pinning to the left side for context
+
+  var lastLeftBlock = 0;
+  model.staticBlocks.forEach(function (block, i) {
+    if (block.offsetPx - model.offsetPx < 0) {
+      lastLeftBlock = i;
+    }
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, model.staticBlocks.map(function (block, index) {
+    return block instanceof _blockTypes.ContentBlock && (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      key: "refLabel-".concat(block.key, "-").concat(index),
+      style: {
+        left: index === lastLeftBlock ? Math.max(0, -model.offsetPx) : block.offsetPx - model.offsetPx - 1,
+        paddingLeft: index === lastLeftBlock ? 0 : 1
+      },
+      className: classes.refLabel,
+      "data-testid": "refLabel-".concat(block.refName)
+    }, block.refName) : null;
+  }));
+});
+var RenderedScaleBarLabels = (0, _mobxReact.observer)(function (_ref2) {
+  var model = _ref2.model;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, model.staticBlocks.map(function (block, index) {
+    if (block instanceof _blockTypes.ContentBlock) {
+      var ticks = (0, _util.makeTicks)(block.start, block.end, model.bpPerPx, true, false);
+      return /*#__PURE__*/_react["default"].createElement(_Block.ContentBlock, {
+        key: "".concat(block.key, "-").concat(index),
+        block: block
+      }, ticks.map(function (tick) {
+        if (tick.type === 'major') {
+          var x = (block.reversed ? block.end - tick.base : tick.base - block.start) / model.bpPerPx;
+          var baseNumber = (tick.base + 1).toLocaleString('en-US');
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            key: tick.base,
+            className: classes.tick,
+            style: {
+              left: x
+            }
+          }, baseNumber ? /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+            className: classes.majorTickLabel
+          }, baseNumber) : null);
+        }
+
+        return null;
+      }));
+    }
+
+    if (block instanceof _blockTypes.ElidedBlock) {
+      return /*#__PURE__*/_react["default"].createElement(_Block.ElidedBlock, {
+        key: block.key,
+        width: block.widthPx
+      });
+    }
+
+    if (block instanceof _blockTypes.InterRegionPaddingBlock) {
+      return /*#__PURE__*/_react["default"].createElement(_Block.InterRegionPaddingBlock, {
+        key: block.key,
+        width: block.widthPx,
+        style: {
+          background: 'none'
+        },
+        boundary: block.variant === 'boundary'
+      });
+    }
+
+    return null;
+  }));
+});
+
+var ScaleBar = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
+  var model = _ref3.model,
+      style = _ref3.style,
+      className = _ref3.className,
+      other = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
+  var classes = useStyles();
+  var offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
+  return /*#__PURE__*/_react["default"].createElement(_core.Paper, (0, _extends2["default"])({
+    "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
+    ,
+    className: (0, _clsx["default"])(classes.scaleBarContainer, className),
+    variant: "outlined",
+    ref: ref,
+    style: style
+  }, other), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.scaleBarZoomContainer,
+    style: {
+      transform: model.scaleFactor !== 1 ? "scaleX(".concat(model.scaleFactor, ")") : undefined
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.scaleBar,
+    style: _objectSpread({
+      left: offsetLeft - 1,
+      width: model.staticBlocks.totalWidthPx
+    }, style)
+  }, /*#__PURE__*/_react["default"].createElement(RenderedScaleBarLabels, {
+    model: model
+  }))), /*#__PURE__*/_react["default"].createElement(RenderedRefNameLabels, {
+    model: model
+  }));
+});
+
+var _default = (0, _mobxReact.observer)(ScaleBar);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/ScaleBar.test.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _rootModel = require("@jbrowse/web/src/rootModel");
+
+var _ScaleBar = _interopRequireDefault(require("./ScaleBar"));
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+jest.mock('@jbrowse/web/src/makeWorkerInstance', function () {
+  return function () {};
+});
+describe('ScaleBar genome view component', function () {
+  it('renders two regions', function () {
+    var session = (0, _rootModel.createTestSession)({
+      views: [{
+        type: 'LinearGenomeView',
+        offsetPx: 0,
+        bpPerPx: 1,
+        displayedRegions: [{
+          assemblyName: 'volvox',
+          refName: 'ctgA',
+          start: 0,
+          end: 100
+        }, {
+          assemblyName: 'volvox',
+          refName: 'ctgB',
+          start: 100,
+          end: 200
+        }],
+        tracks: [],
+        configuration: {}
+      }]
+    });
+    session.addAssemblyConf({
+      name: 'volMyt1',
+      sequence: {
+        trackId: 'ref0',
+        type: 'ReferenceSequenceTrack',
+        adapter: {
+          type: 'FromConfigSequenceAdapter',
+          features: [{
+            refName: 'ctgA',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 10,
+            seq: 'cattgttgcg'
+          }]
+        }
+      }
+    });
+    var model = session.views[0];
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ScaleBar["default"], {
+      model: model
+    })),
+        getByTestId = _render.getByTestId;
+
+    var ret1 = getByTestId('refLabel-ctgA');
+    var ret2 = getByTestId('refLabel-ctgB');
+    expect(ret1.style.left).toBe('-1px');
+    expect(ret2.style.left).toBe('101px');
+  });
+  it('renders two regions when scrolled to the left, the label is ctgA to the actual blocks', function () {
+    var session = (0, _rootModel.createTestSession)({
+      views: [{
+        type: 'LinearGenomeView',
+        offsetPx: -100,
+        bpPerPx: 1,
+        displayedRegions: [{
+          assemblyName: 'volvox',
+          refName: 'ctgA',
+          start: 0,
+          end: 100
+        }, {
+          assemblyName: 'volvox',
+          refName: 'ctgB',
+          start: 0,
+          end: 100
+        }],
+        tracks: [],
+        configuration: {}
+      }]
+    });
+    session.addAssemblyConf({
+      name: 'volMyt1',
+      sequence: {
+        trackId: 'ref0',
+        type: 'ReferenceSequenceTrack',
+        adapter: {
+          type: 'FromConfigSequenceAdapter',
+          features: [{
+            refName: 'ctgA',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 10,
+            seq: 'cattgttgcg'
+          }]
+        }
+      }
+    });
+    var model = session.views[0];
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ScaleBar["default"], {
+      model: model
+    })),
+        getByTestId = _render2.getByTestId;
+
+    var ret1 = getByTestId('refLabel-ctgA');
+    var ret2 = getByTestId('refLabel-ctgB');
+    expect(ret1.style.left).toBe('99px');
+    expect(ret2.style.left).toBe('201px');
+  });
+  it('renders two regions when scrolled to the left, the label is ctgA to the actual blocks', function () {
+    var session = (0, _rootModel.createTestSession)({
+      views: [{
+        type: 'LinearGenomeView',
+        offsetPx: -100,
+        bpPerPx: 1,
+        displayedRegions: [{
+          assemblyName: 'volvox',
+          refName: 'ctgA',
+          start: 0,
+          end: 1000
+        }, {
+          assemblyName: 'volvox',
+          refName: 'ctgB',
+          start: 0,
+          end: 1
+        }, {
+          assemblyName: 'volvox',
+          refName: 'ctgC',
+          start: 0,
+          end: 1
+        }, {
+          assemblyName: 'volvox',
+          refName: 'ctgD',
+          start: 0,
+          end: 1
+        }],
+        tracks: [],
+        configuration: {}
+      }]
+    });
+    session.addAssemblyConf({
+      name: 'volMyt1',
+      sequence: {
+        trackId: 'ref0',
+        type: 'ReferenceSequenceTrack',
+        adapter: {
+          type: 'FromConfigSequenceAdapter',
+          features: [{
+            refName: 'ctgA',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 10,
+            seq: 'cattgttgcg'
+          }]
+        }
+      }
+    });
+    var model = session.views[0];
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ScaleBar["default"], {
+      model: model
+    })),
+        queryByTestId = _render3.queryByTestId;
+
+    var ret2 = queryByTestId('refLabel-ctgB');
+    var ret3 = queryByTestId('refLabel-ctgC');
+    var ret4 = queryByTestId('refLabel-ctgD');
+    expect(ret2).toBe(null);
+    expect(ret3).toBe(null);
+    expect(ret4).toBe(null);
+  });
+});

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { LinearGenomeViewModel } from '..';
-declare function SearchBox({ model, showHelp, }: {
-    showHelp?: boolean;
-    model: LinearGenomeViewModel;
-}): JSX.Element;
-declare const _default: typeof SearchBox;
-export default _default;
+/// <reference types="react" />
+import { LinearGenomeViewModel } from '..';
+declare function SearchBox({ model, showHelp, }: {
+    showHelp?: boolean;
+    model: LinearGenomeViewModel;
+}): JSX.Element;
+declare const _default: typeof SearchBox;
+export default _default;

package/dist/LinearGenomeView/components/SearchBox.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _core = require("@material-ui/core");
+
+var _BaseResults = _interopRequireDefault(require("@jbrowse/core/TextSearch/BaseResults"));
+
+var _util = require("@jbrowse/core/util");
+
+var _RefNameAutocomplete = _interopRequireDefault(require("./RefNameAutocomplete"));
+
+var _util2 = require("./util");
+
+var _ = require("..");
+
+// locals
+var useStyles = (0, _core.makeStyles)(function () {
+  return {
+    headerRefName: {
+      minWidth: 100
+    }
+  };
+});
+
+function SearchBox(_ref) {
+  var model = _ref.model,
+      showHelp = _ref.showHelp;
+  var classes = useStyles();
+  var theme = (0, _core.useTheme)();
+  var session = (0, _util.getSession)(model);
+  var textSearchManager = session.textSearchManager,
+      assemblyManager = session.assemblyManager;
+  var assemblyNames = model.assemblyNames,
+      rankSearchResults = model.rankSearchResults;
+  var assemblyName = assemblyNames[0];
+  var assembly = assemblyManager.get(assemblyName);
+  var searchScope = model.searchScope(assemblyName);
+
+  function fetchResults(_x, _x2) {
+    return _fetchResults.apply(this, arguments);
+  }
+
+  function _fetchResults() {
+    _fetchResults = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(query, searchType) {
+      var _assembly$allRefNames;
+
+      var textSearchResults, refNameResults;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!textSearchManager) {
+                console.warn('No text search manager');
+              }
+
+              _context.next = 3;
+              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
+                queryString: query,
+                searchType: searchType
+              }, searchScope, rankSearchResults);
+
+            case 3:
+              textSearchResults = _context.sent;
+              refNameResults = assembly === null || assembly === void 0 ? void 0 : (_assembly$allRefNames = assembly.allRefNames) === null || _assembly$allRefNames === void 0 ? void 0 : _assembly$allRefNames.filter(function (refName) {
+                return refName.startsWith(query);
+              }).map(function (r) {
+                return new _BaseResults["default"]({
+                  label: r
+                });
+              }).slice(0, 10);
+              return _context.abrupt("return", (0, _util2.dedupe)([].concat((0, _toConsumableArray2["default"])(refNameResults || []), (0, _toConsumableArray2["default"])(textSearchResults || [])), function (elt) {
+                return elt.getId();
+              }));
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _fetchResults.apply(this, arguments);
+  }
+
+  function handleSelectedRegion(_x3) {
+    return _handleSelectedRegion.apply(this, arguments);
+  }
+
+  function _handleSelectedRegion() {
+    _handleSelectedRegion = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(option) {
+      var trackId, location, label, _assembly$allRefNames2, results;
+
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              trackId = option.getTrackId();
+              location = option.getLocation();
+              label = option.getLabel();
+              _context2.prev = 3;
+
+              if (!(assembly !== null && assembly !== void 0 && (_assembly$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
+                _context2.next = 8;
+                break;
+              }
+
+              model.navToLocString(location);
+              _context2.next = 19;
+              break;
+
+            case 8:
+              _context2.next = 10;
+              return fetchResults(label, 'exact');
+
+            case 10:
+              results = _context2.sent;
+
+              if (!(results && results.length > 1)) {
+                _context2.next = 16;
+                break;
+              }
+
+              model.setSearchResults(results, label.toLowerCase());
+              return _context2.abrupt("return");
+
+            case 16:
+              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+                location = results[0].getLocation();
+                trackId = results[0].getTrackId();
+              }
+
+            case 17:
+              model.navToLocString(location, assemblyName);
+
+              if (trackId) {
+                model.showTrack(trackId);
+              }
+
+            case 19:
+              _context2.next = 25;
+              break;
+
+            case 21:
+              _context2.prev = 21;
+              _context2.t0 = _context2["catch"](3);
+              console.error(_context2.t0);
+              session.notify("".concat(_context2.t0), 'warning');
+
+            case 25:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[3, 21]]);
+    }));
+    return _handleSelectedRegion.apply(this, arguments);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_RefNameAutocomplete["default"], {
+    showHelp: showHelp,
+    onSelect: handleSelectedRegion,
+    assemblyName: assemblyName,
+    fetchResults: fetchResults,
+    model: model,
+    TextFieldProps: {
+      variant: 'outlined',
+      className: classes.headerRefName,
+      style: {
+        margin: _.SPACING,
+        minWidth: '175px'
+      },
+      InputProps: {
+        style: {
+          padding: 0,
+          height: _.WIDGET_HEIGHT,
+          background: (0, _core.alpha)(theme.palette.background.paper, 0.8)
+        }
+      }
+    }
+  });
+}
+
+var _default = (0, _mobxReact.observer)(SearchBox);
+
+exports["default"] = _default;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { LinearGenomeViewModel } from '../..';
-export declare const useStyles: (props?: any) => Record<"dialogContent" | "closeButton", string>;
-export default function SearchResultsDialog({ model, optAssemblyName, handleClose, }: {
-    model: LinearGenomeViewModel;
-    optAssemblyName?: string;
-    handleClose: () => void;
-}): JSX.Element;
+/// <reference types="react" />
+import { LinearGenomeViewModel } from '../..';
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"closeButton" | "dialogContent">;
+export default function SearchResultsDialog({ model, optAssemblyName, handleClose, }: {
+    model: LinearGenomeViewModel;
+    optAssemblyName?: string;
+    handleClose: () => void;
+}): JSX.Element;