@jbrowse/core 1.7.8 → 1.7.11

package/ui/AboutDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AnyConfigurationModel } from '../configuration/configurationSchema';
+import { AnyConfigurationModel } from '../configuration';
 export default function AboutDialog({ config, handleClose, }: {
     config: AnyConfigurationModel;
     handleClose: () => void;

package/ui/AboutDialog.js

@@ -17,6 +17,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+
 var _core = require("@material-ui/core");
 
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
@@ -57,6 +59,11 @@ function AboutDialog(_ref) {
       error = _useState4[0],
       setError = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      copied = _useState6[0],
+      setCopied = _useState6[1];
+
   var session = (0, _util.getSession)(config);
   var rpcManager = session.rpcManager;
   var conf = (0, _configuration.readConfObject)(config);
@@ -112,12 +119,10 @@ function AboutDialog(_ref) {
   var trackName = (0, _configuration.readConfObject)(config, 'name');
 
   if ((0, _configuration.readConfObject)(config, 'type') === 'ReferenceSequenceTrack') {
-    trackName = 'Reference Sequence';
-    session.assemblies.forEach(function (assembly) {
-      if (assembly.sequence === config.configuration) {
-        trackName = "Reference Sequence (".concat((0, _configuration.readConfObject)(assembly, 'name'), ")");
-      }
+    var asm = session.assemblies.find(function (a) {
+      return a.sequence === config.configuration;
     });
+    trackName = asm ? "Reference Sequence (".concat((0, _configuration.readConfObject)(asm, 'name'), ")") : 'Reference Sequence';
   }
 
   var details = typeof info === 'string' ? {
@@ -133,14 +138,26 @@ function AboutDialog(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.BaseCard, {
     title: "Configuration"
-  }, /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
+  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    variant: "contained",
+    style: {
+      float: 'right'
+    },
+    onClick: function onClick() {
+      (0, _copyToClipboard.default)(JSON.stringify(conf, null, 2));
+      setCopied(true);
+      setTimeout(function () {
+        return setCopied(false);
+      }, 1000);
+    }
+  }, copied ? 'Copied to clipboard!' : 'Copy config'), /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
     attributes: conf,
     omit: ['displays', 'baseUri', 'refNames']
   })), info !== null ? /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.BaseCard, {
     title: "File info"
   }, error ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
     color: "error"
-  }, "".concat(error)) : !info ? 'Loading file data...' : /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
+  }, "".concat(error)) : info === undefined ? 'Loading file data...' : /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
     attributes: details
   })) : null));
 }

package/ui/CascadingMenu.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MenuItem as JBMenuItem } from './Menu';
+import { PopupState } from 'material-ui-popup-state/hooks';
+declare function CascadingMenuChildren(props: {
+    onMenuItemClick: Function;
+    menuItems: JBMenuItem[];
+    popupState: PopupState;
+}): JSX.Element;
+export default CascadingMenuChildren;

package/ui/CascadingMenu.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _Menu = require("./Menu");
+
+var _hooks = require("material-ui-popup-state/hooks");
+
+var _HoverMenu = _interopRequireDefault(require("material-ui-popup-state/HoverMenu"));
+
+var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
+
+var _excluded = ["onClick"],
+    _excluded2 = ["title", "inset", "popupId"],
+    _excluded3 = ["popupState", "onMenuItemClick", "menuItems", "classes"],
+    _excluded4 = ["popupState", "onMenuItemClick", "menuItems"],
+    _excluded5 = ["onMenuItemClick", "menuItems"];
+
+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 CascadingContext = /*#__PURE__*/_react.default.createContext({
+  parentPopupState: null,
+  rootPopupState: null
+});
+
+function CascadingMenuItem(_ref) {
+  var onClick = _ref.onClick,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(CascadingContext),
+      rootPopupState = _useContext.rootPopupState;
+
+  if (!rootPopupState) {
+    throw new Error('must be used inside a CascadingMenu');
+  }
+
+  var handleClick = (0, _react.useCallback)(function (event) {
+    // @ts-ignore
+    rootPopupState.close(event);
+
+    if (onClick) {
+      onClick(event);
+    }
+  }, [rootPopupState, onClick]);
+  return /*#__PURE__*/_react.default.createElement(_core.MenuItem, (0, _extends2.default)({}, props, {
+    onClick: handleClick
+  }));
+}
+
+function CascadingSubmenu(_ref2) {
+  var title = _ref2.title,
+      inset = _ref2.inset,
+      popupId = _ref2.popupId,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+
+  var _React$useContext = _react.default.useContext(CascadingContext),
+      parentPopupState = _React$useContext.parentPopupState;
+
+  var popupState = (0, _hooks.usePopupState)({
+    popupId: popupId,
+    variant: 'popover',
+    parentPopupState: parentPopupState
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.MenuItem, (0, _extends2.default)({}, (0, _hooks.bindHover)(popupState), (0, _hooks.bindFocus)(popupState)), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+    primary: title,
+    inset: inset
+  }), /*#__PURE__*/_react.default.createElement(_ChevronRight.default, null)), /*#__PURE__*/_react.default.createElement(CascadingSubmenuHover, (0, _extends2.default)({}, props, {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    popupState: popupState
+  })));
+}
+
+function CascadingSubmenuHover(_ref3) {
+  var popupState = _ref3.popupState,
+      onMenuItemClick = _ref3.onMenuItemClick,
+      menuItems = _ref3.menuItems,
+      classes = _ref3.classes,
+      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+
+  var _useContext2 = (0, _react.useContext)(CascadingContext),
+      rootPopupState = _useContext2.rootPopupState;
+
+  var context = (0, _react.useMemo)(function () {
+    return {
+      rootPopupState: rootPopupState || popupState,
+      parentPopupState: popupState
+    };
+  }, [rootPopupState, popupState]);
+  return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_HoverMenu.default, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+}
+
+function CascadingMenu(_ref4) {
+  var popupState = _ref4.popupState,
+      onMenuItemClick = _ref4.onMenuItemClick,
+      menuItems = _ref4.menuItems,
+      props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+
+  var _React$useContext2 = _react.default.useContext(CascadingContext),
+      rootPopupState = _React$useContext2.rootPopupState;
+
+  var context = _react.default.useMemo(function () {
+    return {
+      rootPopupState: rootPopupState || popupState,
+      parentPopupState: popupState
+    };
+  }, [rootPopupState, popupState]);
+
+  return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_core.Menu, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+}
+
+function EndDecoration(_ref5) {
+  var item = _ref5.item;
+
+  if ('subMenu' in item) {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItemEndDecoration, {
+      type: "subMenu"
+    });
+  } else if (item.type === 'checkbox' || item.type === 'radio') {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItemEndDecoration, {
+      type: item.type,
+      checked: item.checked,
+      disabled: item.disabled
+    });
+  }
+
+  return null;
+}
+
+function CascadingMenuList(_ref6) {
+  var onMenuItemClick = _ref6.onMenuItemClick,
+      menuItems = _ref6.menuItems,
+      props = (0, _objectWithoutProperties2.default)(_ref6, _excluded5);
+
+  function handleClick(callback) {
+    return function (event) {
+      onMenuItemClick(event, callback);
+    };
+  }
+
+  var hasIcon = menuItems.some(function (menuItem) {
+    return 'icon' in menuItem && menuItem.icon;
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menuItems.map(function (item, idx) {
+    return 'subMenu' in item ? /*#__PURE__*/_react.default.createElement(CascadingSubmenu, {
+      key: "subMenu-".concat(item.label, "-").concat(idx),
+      popupId: "subMenu-".concat(item.label),
+      title: item.label,
+      inset: hasIcon,
+      onMenuItemClick: onMenuItemClick,
+      menuItems: item.subMenu
+    }, /*#__PURE__*/_react.default.createElement(CascadingMenuList, (0, _extends2.default)({}, props, {
+      onMenuItemClick: onMenuItemClick,
+      menuItems: item.subMenu
+    }))) : item.type === 'divider' ? /*#__PURE__*/_react.default.createElement(_core.Divider, {
+      key: "divider-".concat(idx),
+      component: "li"
+    }) : item.type === 'subHeader' ? /*#__PURE__*/_react.default.createElement(_core.ListSubheader, {
+      key: "subHeader-".concat(item.label, "-").concat(idx)
+    }, item.label) : /*#__PURE__*/_react.default.createElement(CascadingMenuItem, {
+      key: "".concat(item.label, "-").concat(idx),
+      onClick: 'onClick' in item ? handleClick(item.onClick) : undefined,
+      disabled: Boolean(item.disabled)
+    }, item.icon ? /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(item.icon, null)) : null, ' ', /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+      primary: item.label,
+      secondary: item.subLabel,
+      inset: hasIcon && !item.icon
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flexGrow: 1,
+        minWidth: 10
+      }
+    }), /*#__PURE__*/_react.default.createElement(EndDecoration, {
+      item: item
+    }));
+  }));
+}
+
+function CascadingMenuChildren(props) {
+  return /*#__PURE__*/_react.default.createElement(CascadingMenu, props, /*#__PURE__*/_react.default.createElement(CascadingMenuList, props));
+}
+
+var _default = CascadingMenuChildren;
+exports.default = _default;

package/ui/Menu.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 import { PopoverProps, SvgIconProps } from '@material-ui/core';
+interface MenuItemEndDecorationSubMenuProps {
+    type: 'subMenu';
+}
+interface MenuItemEndDecorationSelectorProps {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+    disabled?: boolean;
+}
+declare type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
+export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): JSX.Element;
 export interface MenuDivider {
     priority?: number;
     type: 'divider';

package/ui/Menu.js

@@ -7,6 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MenuItemEndDecoration = MenuItemEndDecoration;
 exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -59,13 +60,9 @@ var useStyles = (0, _core.makeStyles)({
     outline: 0
   },
   menuItemEndDecoration: {
-    position: 'absolute',
-    right: 16,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    padding: 2,
-    marginRight: -12,
-    display: 'inline-flex'
+    padding: 0,
+    margin: 0,
+    height: 16
   }
 });
 
@@ -215,18 +212,11 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setPosition({});
     }
   }, [position, anchorEl]);
-  var hasEndDecoration = menuItems.some(function (menuItem) {
-    return 'subMenu' in menuItem || menuItem.type === 'checkbox' || menuItem.type === 'radio';
-  });
   var hasIcon = menuItems.some(function (menuItem) {
     return 'icon' in menuItem && menuItem.icon;
   });
   var menuItemStyle = {};
 
-  if (hasEndDecoration) {
-    menuItemStyle.paddingRight = 48;
-  }
-
   function handleClick(callback) {
     return function (event) {
       onMenuItemClick(event, callback);
@@ -314,6 +304,11 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       primary: menuItem.label,
       secondary: menuItem.subLabel,
       inset: hasIcon && !menuItem.icon
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flexGrow: 1,
+        minWidth: 10
+      }
     }), endDecoration);
   })), menuItems.map(function (menuItem, idx) {
     var subMenu = null;

package/ui/SanitizedHTML.js

@@ -2,24 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SanitizedHTML;
 exports.isHTML = isHTML;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _escapeHtml = _interopRequireDefault(require("escape-html"));
 
 var _dompurify = _interopRequireDefault(require("dompurify"));
 
+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; }
+
 // source https://github.com/sindresorhus/html-tags/blob/master/html-tags.json
 // with some random uncommon ones removed. note: we just use this to run the content
 // through dompurify without escaping if we see an htmlTag from this list
 // otherwise we escape angle brackets and things prematurely because it might be
 // something like <TRA> in VCF. Ref #657
-var htmlTags = ['a', 'b', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'img', 'li', 'p', 'pre', 'span', 'small', 'strong', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u', 'ul']; // adapted from is-html https://github.com/sindresorhus/is-html/blob/master/index.js
+var htmlTags = ['a', 'b', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'img', 'li', 'p', 'pre', 'span', 'small', 'strong', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u', 'ul'];
+var added = false; // adapted from is-html
+// https://github.com/sindresorhus/is-html/blob/master/index.js
 
 var full = new RegExp(htmlTags.map(function (tag) {
   return "<".concat(tag, "\\b[^>]*>");
@@ -31,9 +39,23 @@ function isHTML(str) {
 
 function SanitizedHTML(_ref) {
   var html = _ref.html;
-  var value = isHTML(html) ? html : (0, _escapeHtml.default)(html); // eslint-disable-next-line react/no-danger
-
+  var value = isHTML(html) ? html : (0, _escapeHtml.default)(html);
+  (0, _react.useEffect)(function () {
+    if (!added) {
+      added = true; // see https://github.com/cure53/DOMPurify/issues/317
+      // only have to add this once, and can't do it globally because dompurify
+      // not yet initialized at global scope
+
+      _dompurify.default.addHook('afterSanitizeAttributes', function (node) {
+        if (node.tagName === 'A') {
+          node.setAttribute('rel', 'noopener noreferrer');
+          node.setAttribute('target', '_blank');
+        }
+      });
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: _dompurify.default.sanitize(value)
     }

package/ui/SnackbarModel.d.ts

@@ -6,8 +6,8 @@ declare function makeExtension(snackbarMessages: IObservableArray<any>): {
         readonly snackbarMessages: IObservableArray<any>;
     };
     actions: {
-        notify(message: string, level?: NotificationLevel | undefined, action?: SnackAction | undefined): void;
-        pushSnackbarMessage(message: string, level?: NotificationLevel | undefined, action?: SnackAction | undefined): number;
+        notify(message: string, level?: NotificationLevel, action?: SnackAction): void;
+        pushSnackbarMessage(message: string, level?: NotificationLevel, action?: SnackAction): number;
         popSnackbarMessage(): any;
         removeSnackbarMessage(message: string): void;
     };

package/ui/index.d.ts

@@ -12,5 +12,6 @@ export { default as FactoryResetDialog } from './FactoryResetDialog';
 export { default as Tooltip } from './Tooltip';
 export { default as FatalErrorDialog } from './FatalErrorDialog';
 export { default as Menu } from './Menu';
+export { default as CascadingMenu } from './CascadingMenu';
 export { default as SanitizedHTML } from './SanitizedHTML';
 export * from './Menu';

package/ui/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   Tooltip: true,
   FatalErrorDialog: true,
   Menu: true,
+  CascadingMenu: true,
   SanitizedHTML: true
 };
 Object.defineProperty(exports, "App", {
@@ -36,6 +37,12 @@ Object.defineProperty(exports, "AssemblySelector", {
     return _AssemblySelector.default;
   }
 });
+Object.defineProperty(exports, "CascadingMenu", {
+  enumerable: true,
+  get: function get() {
+    return _CascadingMenu.default;
+  }
+});
 Object.defineProperty(exports, "EditableTypography", {
   enumerable: true,
   get: function get() {
@@ -167,6 +174,8 @@ Object.keys(_Menu).forEach(function (key) {
   });
 });
 
+var _CascadingMenu = _interopRequireDefault(require("./CascadingMenu"));
+
 var _SanitizedHTML = _interopRequireDefault(require("./SanitizedHTML"));
 
 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); }

package/util/declare.d.js

@@ -0,0 +1 @@
+"use strict";

package/util/index.d.ts

@@ -24,7 +24,7 @@ export declare function getSession(node: IAnyStateTreeNode): import("./types").A
 /** get the state model of the view in the state tree that contains the given node */
 export declare function getContainingView(node: IAnyStateTreeNode): import("./types").AbstractViewModel & IAnyStateTreeNode;
 /** get the state model of the view in the state tree that contains the given node */
-export declare function getContainingTrack(node: IAnyStateTreeNode): IAnyStateTreeNode;
+export declare function getContainingTrack(node: IAnyStateTreeNode): import("./types").AbstractTrackModel & IAnyStateTreeNode;
 export declare function getContainingDisplay(node: IAnyStateTreeNode): import("./types").AbstractDisplayModel & IAnyStateTreeNode;
 /**
  * Assemble a 1-based "locString" from an interbase genomic location
@@ -342,6 +342,8 @@ export declare function viewBpToPx({ refName, coord, regionNumber, self, }: {
 } | undefined;
 export declare function supportedIndexingAdapters(type: string): boolean;
 export declare function getBpDisplayStr(totalBp: number): string;
+export declare function toLocale(n: number): string;
+export declare function getTickDisplayStr(totalBp: number, bpPerPx: number): string;
 export declare function getViewParams(model: IAnyStateTreeNode, exportSVG?: boolean): {
     offsetPx: number;
     offsetPx1: number;

package/util/index.js

@@ -58,6 +58,8 @@ var _exportNames = {
   viewBpToPx: true,
   supportedIndexingAdapters: true,
   getBpDisplayStr: true,
+  toLocale: true,
+  getTickDisplayStr: true,
   getViewParams: true,
   getLayoutId: true,
   SimpleFeature: true,
@@ -91,6 +93,7 @@ exports.getContainingTrack = getContainingTrack;
 exports.getContainingView = getContainingView;
 exports.getLayoutId = getLayoutId;
 exports.getSession = getSession;
+exports.getTickDisplayStr = getTickDisplayStr;
 exports.getViewParams = getViewParams;
 exports.hashCode = hashCode;
 exports.isElectron = exports.inProduction = exports.inDevelopment = void 0;
@@ -118,6 +121,7 @@ exports.revcom = revcom;
 exports.springAnimate = springAnimate;
 exports.stringify = stringify;
 exports.supportedIndexingAdapters = supportedIndexingAdapters;
+exports.toLocale = toLocale;
 exports.updateStatus = updateStatus;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
@@ -1417,7 +1421,23 @@ function getBpDisplayStr(totalBp) {
   } else if (Math.floor(totalBp / 1000) > 0) {
     str = "".concat(parseFloat((totalBp / 1000).toPrecision(3)), "Kbp");
   } else {
-    str = "".concat(Math.floor(totalBp), "bp");
+    str = "".concat(toLocale(Math.floor(totalBp)), "bp");
+  }
+
+  return str;
+}
+
+function toLocale(n) {
+  return n.toLocaleString('en-US');
+}
+
+function getTickDisplayStr(totalBp, bpPerPx) {
+  var str;
+
+  if (Math.floor(bpPerPx / 1000) > 0) {
+    str = "".concat(toLocale(parseFloat((totalBp / 1000000).toFixed(2))), "M");
+  } else {
+    str = "".concat(toLocale(Math.floor(totalBp)));
   }
 
   return str;