@jbrowse/core 1.7.9 → 1.7.10

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/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/index.d.ts

@@ -342,6 +342,9 @@ 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 getTickDisplayStr2(totalBp: number, bpPerPx: number): string;
 export declare function getViewParams(model: IAnyStateTreeNode, exportSVG?: boolean): {
     offsetPx: number;
     offsetPx1: number;

package/util/index.js

@@ -58,6 +58,9 @@ var _exportNames = {
   viewBpToPx: true,
   supportedIndexingAdapters: true,
   getBpDisplayStr: true,
+  toLocale: true,
+  getTickDisplayStr: true,
+  getTickDisplayStr2: true,
   getViewParams: true,
   getLayoutId: true,
   SimpleFeature: true,
@@ -91,6 +94,8 @@ exports.getContainingTrack = getContainingTrack;
 exports.getContainingView = getContainingView;
 exports.getLayoutId = getLayoutId;
 exports.getSession = getSession;
+exports.getTickDisplayStr = getTickDisplayStr;
+exports.getTickDisplayStr2 = getTickDisplayStr2;
 exports.getViewParams = getViewParams;
 exports.hashCode = hashCode;
 exports.isElectron = exports.inProduction = exports.inDevelopment = void 0;
@@ -118,6 +123,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 +1423,35 @@ 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(Math.floor(totalBp).toLocaleString('en-US'), "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;
+}
+
+function getTickDisplayStr2(totalBp, bpPerPx) {
+  var str;
+
+  if (Math.floor(bpPerPx / 1000) > 0) {
+    str = "".concat(toLocale(parseFloat((totalBp / 1000000).toFixed(2))), "Mbp");
+  } else {
+    str = "".concat(toLocale(Math.floor(totalBp)), "bp");
   }
 
   return str;

package/util/jexl.js

@@ -25,15 +25,14 @@ _default() {
   j.addFunction('id', function (feature) {
     return feature.id();
   }); // let user cast a jexl type into a javascript type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   j.addFunction('cast', function (arg) {
     return arg;
   }); // logging
 
   j.addFunction('log', function (thing) {
-    // eslint-disable-next-line no-console
-    console.log(thing);
+    console.log(thing); // eslint-disable-line no-console
+
     return thing;
   }); // math
   // addfunction added in jexl 2.3 but types/jexl still on 2.2
@@ -49,66 +48,66 @@ _default() {
   j.addFunction('parseInt', Number.parseInt);
   j.addFunction('parseFloat', Number.parseFloat); // string
 
-  j.addFunction('split', function (str, char) {
-    return str.split(char);
+  j.addFunction('split', function (s, char) {
+    return s.split(char);
   });
-  j.addFunction('charAt', function (str, index) {
-    return str.charAt(index);
+  j.addFunction('charAt', function (s, index) {
+    return s.charAt(index);
   });
-  j.addFunction('charCodeAt', function (str, index) {
-    return str.charCodeAt(index);
+  j.addFunction('charCodeAt', function (s, index) {
+    return s.charCodeAt(index);
   });
-  j.addFunction('codePointAt', function (str, pos) {
-    return str.codePointAt(pos);
+  j.addFunction('codePointAt', function (s, pos) {
+    return s.codePointAt(pos);
   });
-  j.addFunction('startsWith', function (str, searchStr, length) {
-    return str.startsWith(searchStr, length);
+  j.addFunction('startsWith', function (s, search, len) {
+    return s.startsWith(search, len);
   });
-  j.addFunction('endsWith', function (str, searchStr, length) {
-    return str.endsWith(searchStr, length);
+  j.addFunction('endsWith', function (s, search, len) {
+    return s.endsWith(search, len);
   });
-  j.addFunction('padEnd', function (str, targetLength, padString) {
-    return str.padEnd(targetLength, padString);
+  j.addFunction('padEnd', function (s, len, pad) {
+    return s.padEnd(len, pad);
   });
-  j.addFunction('padStart', function (str, targetLength, fillString) {
-    return str.padStart(targetLength, fillString);
+  j.addFunction('padStart', function (s, len, fill) {
+    return s.padStart(len, fill);
   });
-  j.addFunction('repeat', function (str, count) {
-    return str.repeat(count);
+  j.addFunction('repeat', function (s, count) {
+    return s.repeat(count);
   });
-  j.addFunction('replace', function (str, match, newSubStr) {
-    return str.replace(match, newSubStr);
+  j.addFunction('replace', function (s, match, sub) {
+    return s.replace(match, sub);
   });
-  j.addFunction('replaceAll', function (str, match, newSubStr) {
-    return str.replaceAll(match, newSubStr);
+  j.addFunction('replaceAll', function (s, match, sub) {
+    return s.replaceAll(match, sub);
   });
-  j.addFunction('slice', function (str, start, end) {
-    return str.slice(start, end);
+  j.addFunction('slice', function (s, start, end) {
+    return s.slice(start, end);
   });
-  j.addFunction('startsWith', function (str, searchStr, position) {
-    return str.startsWith(searchStr, position);
+  j.addFunction('startsWith', function (s, search, pos) {
+    return s.startsWith(search, pos);
   });
-  j.addFunction('substring', function (str, start, end) {
-    return str.substring(start, end);
+  j.addFunction('substring', function (s, start, end) {
+    return s.substring(start, end);
   });
-  j.addFunction('toLowerCase', function (str) {
-    return str.toLowerCase();
+  j.addFunction('toLowerCase', function (s) {
+    return s.toLowerCase();
   });
-  j.addFunction('toUpperCase', function (str) {
-    return str.toUpperCase();
+  j.addFunction('toUpperCase', function (s) {
+    return s.toUpperCase();
   });
-  j.addFunction('trim', function (str) {
-    str.trim();
+  j.addFunction('trim', function (s) {
+    return s.trim();
   });
-  j.addFunction('trimEnd', function (str) {
-    return str.trimEnd();
+  j.addFunction('trimEnd', function (s) {
+    return s.trimEnd();
   });
-  j.addFunction('trimStart', function (str) {
-    return str.trimStart();
+  j.addFunction('trimStart', function (s) {
+    return s.trimStart();
   });
-  j.addFunction('getTag', function (feature, str) {
+  j.addFunction('getTag', function (feature, s) {
     var tags = feature.get('tags');
-    return tags ? tags[str] : feature.get(str);
+    return tags ? tags[s] : feature.get(s);
   });
   j.addBinaryOp('&', 15, function (a, b) {
     return a & b;

package/util/types/index.d.ts

@@ -13,7 +13,7 @@ export * from './util';
 export interface AbstractViewContainer extends IAnyStateTreeNode {
     views: AbstractViewModel[];
     removeView(view: AbstractViewModel): void;
-    addView(typeName: string, initialState: Record<string, unknown>): void | AbstractViewModel;
+    addView(typeName: string, initialState?: Record<string, unknown>): void | AbstractViewModel;
 }
 export declare function isViewContainer(thing: unknown): thing is AbstractViewContainer;
 export declare type NotificationLevel = 'error' | 'info' | 'warning' | 'success';