@jbrowse/core 1.5.0 → 1.5.4

package/ui/EditableTypography.js

@@ -31,9 +31,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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, _styles.makeStyles)(function (theme) {
   return {

package/ui/ErrorMessage.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const ErrorMessage: ({ error }: {
+    error: unknown;
+}) => JSX.Element;
+export default ErrorMessage;

package/ui/ErrorMessage.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    message: {
+      border: '1px solid black',
+      background: '#f88',
+      overflow: 'auto',
+      maxHeight: 200,
+      margin: theme.spacing(1),
+      padding: theme.spacing(1)
+    },
+    errorBox: {
+      background: 'lightgrey',
+      border: '1px solid black',
+      margin: 20
+    }
+  };
+});
+
+var ErrorMessage = function ErrorMessage(_ref) {
+  var error = _ref.error;
+  var classes = useStyles();
+  var str = "".concat(error);
+  var snapshotError = ''; // best effort to make a better error message than the default
+  // mobx-state-tree
+
+  var match = str.match(/.*at path "(.*)" snapshot `(.*)` is not assignable/);
+
+  if (match) {
+    str = "Failed to load element at ".concat(match[1]);
+    snapshotError = match[2];
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.message
+  }, str.slice(0, 10000), snapshotError ? /*#__PURE__*/_react.default.createElement("div", null, "... Failed element had snapshot:", /*#__PURE__*/_react.default.createElement("pre", {
+    className: classes.errorBox
+  }, JSON.stringify(JSON.parse(snapshotError), null, 2))) : null);
+};
+
+var _default = ErrorMessage;
+exports.default = _default;

package/ui/FileSelector/FileSelector.js

@@ -41,9 +41,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function ToggleButtonWithTooltip(props) {
   var title = props.title,
@@ -54,6 +54,14 @@ function ToggleButtonWithTooltip(props) {
   }, /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, other, children));
 }
 
+function shorten(str, len) {
+  if (typeof str === 'string' && str.length > len) {
+    return "".concat(str.substring(0, len), "\u2026");
+  }
+
+  return str;
+}
+
 var FileSelector = (0, _mobxReact.observer)(function (props) {
   var location = props.location,
       name = props.name,
@@ -67,66 +75,55 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
       toggleButtonValue = _useState2[0],
       setToggleButtonValue = _useState2[1];
 
-  var internetAccounts = (0, _types.isAppRootModel)(rootModel) ? rootModel.internetAccounts.slice() : [];
-  var numAccountsShown = 2;
+  var accts = (0, _types.isAppRootModel)(rootModel) ? rootModel.internetAccounts.slice() : [];
+  var numShown = 2;
 
-  var _useState3 = (0, _react.useState)(internetAccounts.slice(0, numAccountsShown)),
+  var _useState3 = (0, _react.useState)(accts.slice(0, numShown)),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      shownInternetAccounts = _useState4[0],
-      setShownInternetAccounts = _useState4[1];
+      shownAccts = _useState4[0],
+      setShownAccts = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(internetAccounts.slice(numAccountsShown)),
+  var _useState5 = (0, _react.useState)(accts.slice(numShown)),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      hiddenInternetAccounts = _useState6[0],
-      setHiddenInternetAccounts = _useState6[1];
+      hiddenAccts = _useState6[0],
+      setHiddenAccts = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(null),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      moreMenuOpen = _useState8[0],
-      setMoreMenuOpen = _useState8[1];
+      anchorEl = _useState8[0],
+      setAnchorEl = _useState8[1];
 
-  var moreMenuRef = (0, _react.useRef)(null);
-  var selectedInternetAccount = internetAccounts.find(function (ia) {
+  var selectedAcct = accts.find(function (ia) {
     return ia.internetAccountId === toggleButtonValue;
   });
 
   var setLocationWithAccount = function setLocationWithAccount(location) {
     setLocation(_objectSpread(_objectSpread({}, location), {}, {
-      internetAccountId: selectedInternetAccount ? selectedInternetAccount.internetAccountId : undefined
+      internetAccountId: selectedAcct ? selectedAcct.internetAccountId : undefined
     }));
   }; // if you swap account selection after inputting url
 
 
-  if (location && selectedInternetAccount && (0, _types.isUriLocation)(location) && location.internetAccountId !== selectedInternetAccount.internetAccountId) {
+  if (location && selectedAcct && (0, _types.isUriLocation)(location) && location.internetAccountId !== selectedAcct.internetAccountId) {
     setLocationWithAccount(location);
   }
 
   var locationInput = /*#__PURE__*/_react.default.createElement(_UrlChooser.default, (0, _extends2.default)({}, props, {
     setLocation: setLocationWithAccount,
-    label: selectedInternetAccount === null || selectedInternetAccount === void 0 ? void 0 : selectedInternetAccount.selectorLabel
+    label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel
   }));
 
   if (toggleButtonValue === 'file') {
     locationInput = /*#__PURE__*/_react.default.createElement(_LocalFileChooser.default, props);
   }
 
-  if (selectedInternetAccount !== null && selectedInternetAccount !== void 0 && selectedInternetAccount.SelectorComponent) {
-    var SelectorComponent = selectedInternetAccount.SelectorComponent;
+  if (selectedAcct !== null && selectedAcct !== void 0 && selectedAcct.SelectorComponent) {
+    var SelectorComponent = selectedAcct.SelectorComponent;
     locationInput = /*#__PURE__*/_react.default.createElement(SelectorComponent, (0, _extends2.default)({}, props, {
       setLocation: setLocationWithAccount
     }));
   }
 
-  var handleChange = function handleChange(_event, newState) {
-    if (newState) {
-      setToggleButtonValue(newState);
-    }
-
-    if ((0, _types.isUriLocation)(location)) {
-      setLocationWithAccount(location);
-    }
-  };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Box, {
     display: "flex"
   }, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
@@ -137,7 +134,15 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
   }, /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_lab.ToggleButtonGroup, {
     value: toggleButtonValue,
     exclusive: true,
-    onChange: handleChange,
+    onChange: function onChange(_event, newState) {
+      if (newState) {
+        setToggleButtonValue(newState);
+      }
+
+      if ((0, _types.isUriLocation)(location)) {
+        setLocationWithAccount(location);
+      }
+    },
     "aria-label": "file, url, or account picker"
   }, new URLSearchParams(window.location.search).get('adminKey') ? null : /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
     value: "file",
@@ -145,79 +150,49 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
   }, "File"), /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
     value: "url",
     "aria-label": "url"
-  }, "URL"), shownInternetAccounts === null || shownInternetAccounts === void 0 ? void 0 : shownInternetAccounts.map(function (internetAccount) {
-    var customToggleContents = internetAccount.toggleContents,
-        name = internetAccount.name;
-    var toggleContents = customToggleContents || name;
-    var maxLength = 5;
-
-    if (typeof toggleContents === 'string' && toggleContents.length > maxLength) {
-      toggleContents = "".concat(toggleContents.substring(0, maxLength), "\u2026");
-    }
-
+  }, "URL"), shownAccts.map(function (_ref) {
+    var internetAccountId = _ref.internetAccountId,
+        toggleContents = _ref.toggleContents,
+        name = _ref.name;
     return /*#__PURE__*/_react.default.createElement(ToggleButtonWithTooltip, {
-      key: internetAccount.internetAccountId,
-      value: internetAccount.internetAccountId,
-      "aria-label": internetAccount.name,
+      key: internetAccountId,
+      value: internetAccountId,
+      "aria-label": name,
       title: name
-    }, toggleContents);
-  }), hiddenInternetAccounts.length ? /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
-    value: "moreMenu",
-    onClick: function onClick() {
-      setMoreMenuOpen(function (prevOpen) {
-        return !prevOpen;
-      });
+    }, shorten(toggleContents || name, 5));
+  }), hiddenAccts.length ? /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+    onClick: function onClick(event) {
+      return setAnchorEl(event.target);
     },
-    selected: false,
-    ref: moreMenuRef
-  }, "More", /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)) : null), /*#__PURE__*/_react.default.createElement(_core.Popper, {
-    open: moreMenuOpen,
-    anchorEl: moreMenuRef.current,
-    role: undefined,
-    transition: true,
-    disablePortal: true
-  }, function (_ref) {
-    var TransitionProps = _ref.TransitionProps,
-        placement = _ref.placement;
-    return /*#__PURE__*/_react.default.createElement(_core.Grow, (0, _extends2.default)({}, TransitionProps, {
-      style: {
-        transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
-      }
-    }), /*#__PURE__*/_react.default.createElement(_core.Paper, null, /*#__PURE__*/_react.default.createElement(_core.ClickAwayListener, {
-      onClickAway: function onClickAway() {
-        return setMoreMenuOpen(false);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_core.Menu, {
-      open: moreMenuOpen,
-      anchorEl: moreMenuRef.current,
-      id: "split-button-menu",
-      onClose: function onClose() {
-        return setMoreMenuOpen(false);
-      },
-      getContentAnchorEl: null,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'center'
+    selected: false
+  }, "More", /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)) : null), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    }
+  }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map(function (acct, idx) {
+    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+      key: acct.internetAccountId,
+      value: acct.internetAccountId,
+      onClick: function onClick() {
+        var prev = shownAccts[shownAccts.length - 1];
+        setShownAccts([].concat((0, _toConsumableArray2.default)(shownAccts.slice(0, shownAccts.length - 1)), [acct]));
+        setHiddenAccts([prev].concat((0, _toConsumableArray2.default)(hiddenAccts.slice(0, idx)), (0, _toConsumableArray2.default)(hiddenAccts.slice(idx + 1))));
+        setToggleButtonValue(acct.internetAccountId);
+        setAnchorEl(null);
       }
-    }, hiddenInternetAccounts === null || hiddenInternetAccounts === void 0 ? void 0 : hiddenInternetAccounts.map(function (account, idx) {
-      return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-        key: account.internetAccountId,
-        value: account.internetAccountId,
-        onClick: function onClick() {
-          var newlySelectedInternetAccount = hiddenInternetAccounts[idx];
-          var lastShownInternetAccount = shownInternetAccounts[shownInternetAccounts.length - 1];
-          setShownInternetAccounts([].concat((0, _toConsumableArray2.default)(shownInternetAccounts.slice(0, shownInternetAccounts.length - 1)), [newlySelectedInternetAccount]));
-          setHiddenInternetAccounts([lastShownInternetAccount].concat((0, _toConsumableArray2.default)(hiddenInternetAccounts.slice(0, idx)), (0, _toConsumableArray2.default)(hiddenInternetAccounts.slice(idx + 1))));
-          setToggleButtonValue(account.internetAccountId);
-          setMoreMenuOpen(false);
-        }
-      }, account.name);
-    })))));
-  }))), locationInput, /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, description));
+    }, acct.name);
+  })))), locationInput, /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, description));
 });
 var _default = FileSelector;
 exports.default = _default;

package/ui/Icons.js

@@ -5,14 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Cable = Cable;
 exports.ContentCopy = ContentCopy;
 exports.ContentCut = ContentCut;
 exports.ContentPaste = ContentPaste;
-exports.TrackSelector = TrackSelector;
-exports.SaveAs = SaveAs;
-exports.Save = Save;
 exports.DNA = DNA;
-exports.Cable = Cable;
+exports.Save = Save;
+exports.SaveAs = SaveAs;
+exports.TrackSelector = TrackSelector;
 
 var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
 

package/ui/Logo.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Logomark = Logomark;
 exports.LogoFull = LogoFull;
+exports.Logomark = Logomark;
 
 var _react = _interopRequireDefault(require("react"));
 

package/ui/Menu.js

@@ -39,9 +39,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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)({
   paper: {

package/ui/NewSessionCards.js

@@ -23,9 +23,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 /* babel-plugin-inline-import './emptyIcon.png' */
 var emptyIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACWCAYAAACb3McZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAB7CAAAewgBeCQdoQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAMUSURBVHic7dsxixRnAMbxd3anCZhGU4okkCOKhfU27uUTxAi3bYpY5Duk1cbGLyApUnog+A20kK2SxkawiWIKuayVVplz0mQhiD57566+c9nfr9tiXp7mzw4zTCkAAAAAAAAAAAAAAACcJE3tAdvk9NVrZ8uom6x1yJt2/vLu7ecbmsQKbe0BW2XUTZqm3FnniH7UzUop+xtaxAqj2gNgyAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQNDWHnAUn329e3Zc+kntHevqF692mi9OrXXG5I/Rzjfnftzb0KRq2sNmfvPP289r71jlRAQyLv2k6cud2jvW1T07KG1THozOnJp+yPWXn4zvf/Wy3Nj0rhq6cT8rpezX3rGKW6xPrHt6MH2zePXguNf9G8fuR5hEIJAKjhuJOOoRSCVHjUQcdQmkolWRiKM+gVT2vkjEMQwCGYC3IxHHcJyIx7zboHt6MG1HzcNv//q8+1Icg+EfZEB+ufzo7+uz32vP4D8EMhC//vDi/pVLr3cvXFxMr/3027Hfk/BxCGQAlnEsf4tkOARS2dtxLIlkGARS0fviWBJJfQKpZFUcSyKpSyAVHDWOJZHUI5BP7LhxLImkjhPxovCwNPNx089q71jXre8XO1cuvf7g7zkuXFxMr+49/vnu/vknm9xVQ3vYzGtvOIqm9oBt0t87t1dKv+aHX82s+e7Z4D80+r9wiwWBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAI2toDtkp3OC/teLb2GQAAAAAAAAAAAAAAAMA7/QMEwsCcxccm/QAAAABJRU5ErkJggg==";

package/ui/PrerenderedCanvas.d.ts

@@ -7,6 +7,7 @@ declare function PrerenderedCanvas(props: {
     style: any;
     imageData: any;
     showSoftClip?: boolean;
+    blockKey?: string;
 }): JSX.Element;
 declare namespace PrerenderedCanvas {
     var propTypes: {

package/ui/PrerenderedCanvas.js

@@ -23,9 +23,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function PrerenderedCanvas(props) {
   var width = props.width,
@@ -33,6 +33,7 @@ function PrerenderedCanvas(props) {
       highResolutionScaling = props.highResolutionScaling,
       style = props.style,
       imageData = props.imageData,
+      blockKey = props.blockKey,
       showSoftClip = props.showSoftClip;
   var featureCanvas = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -78,8 +79,10 @@ function PrerenderedCanvas(props) {
     }
   }, [imageData]);
   var softClipString = showSoftClip ? '_softclipped' : '';
+  var blockKeyStr = blockKey ? '_' + blockKey : '';
+  var testId = "prerendered_canvas".concat(softClipString).concat(blockKeyStr);
   return /*#__PURE__*/_react.default.createElement("canvas", {
-    "data-testid": "prerendered_canvas".concat(softClipString),
+    "data-testid": testId,
     ref: featureCanvas,
     width: width * highResolutionScaling,
     height: height * highResolutionScaling,

package/ui/SanitizedHTML.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isHTML = isHTML;
 exports.default = SanitizedHTML;
+exports.isHTML = isHTML;
 
 var _react = _interopRequireDefault(require("react"));
 

package/ui/SnackbarModel.d.ts

@@ -0,0 +1,16 @@
+import { IModelType, ModelProperties } from 'mobx-state-tree';
+import { IObservableArray } from 'mobx';
+import { NotificationLevel } from '../util/types';
+declare function makeExtension(snackbarMessages: IObservableArray<any>): {
+    views: {
+        readonly snackbarMessages: IObservableArray<any>;
+    };
+    actions: {
+        notify(message: string, level?: NotificationLevel | undefined): void;
+        pushSnackbarMessage(message: string, level?: NotificationLevel | undefined): number;
+        popSnackbarMessage(): any;
+        removeSnackbarMessage(message: string): void;
+    };
+};
+export default function addSnackbarToModel<PROPS extends ModelProperties, OTHERS>(tree: IModelType<PROPS, OTHERS>): IModelType<PROPS, OTHERS & ReturnType<typeof makeExtension>['actions'] & ReturnType<typeof makeExtension>['views']>;
+export {};

package/ui/SnackbarModel.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = addSnackbarToModel;
+
+var _mobx = require("mobx");
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeExtension(snackbarMessages) {
+  return {
+    views: {
+      get snackbarMessages() {
+        return snackbarMessages;
+      }
+
+    },
+    actions: {
+      notify: function notify(message, level) {
+        var _this = this;
+
+        this.pushSnackbarMessage(message, level);
+
+        if (level === 'info' || level === 'success') {
+          setTimeout(function () {
+            _this.removeSnackbarMessage(message);
+          }, 5000);
+        }
+      },
+      pushSnackbarMessage: function pushSnackbarMessage(message, level) {
+        return snackbarMessages.push([message, level]);
+      },
+      popSnackbarMessage: function popSnackbarMessage() {
+        return snackbarMessages.pop();
+      },
+      removeSnackbarMessage: function removeSnackbarMessage(message) {
+        var element = snackbarMessages.find(function (f) {
+          return f[0] === message;
+        });
+
+        if (element) {
+          snackbarMessages.remove(element);
+        }
+      }
+    }
+  };
+}
+
+function addSnackbarToModel(tree) {
+  return tree.extend(function () {
+    var snackbarMessages = _mobx.observable.array();
+
+    return makeExtension(snackbarMessages);
+  });
+}

package/ui/ViewContainer.js

@@ -39,9 +39,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 {
@@ -183,7 +183,8 @@ var _default = (0, _reactMeasure.withContentRect)('bounds')((0, _mobxReact.obser
     title: "Rename view",
     arrow: true
   }, /*#__PURE__*/_react.default.createElement(_EditableTypography.default, {
-    value: view.displayName || (view.assemblyNames ? // @ts-ignore
+    value: view.displayName || ( // @ts-ignore
+    view.assemblyNames ? // @ts-ignore
     view.assemblyNames.join(',') : 'Untitled view'),
     setValue: function setValue(val) {
       view.setDisplayName(val);