@jbrowse/core 1.4.4 → 1.5.3

package/ui/App.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -23,6 +21,8 @@ var _mobxReact = require("mobx-react");
 
 var _mobxStateTree = require("mobx-state-tree");
 
+var _configuration = require("../configuration");
+
 var _DrawerWidget = _interopRequireDefault(require("./DrawerWidget"));
 
 var _DropDownMenu = _interopRequireDefault(require("./DropDownMenu"));
@@ -35,12 +35,11 @@ var _Snackbar = _interopRequireDefault(require("./Snackbar"));
 
 var _ViewContainer = _interopRequireDefault(require("./ViewContainer"));
 
-var _configuration = require("../configuration");
-
 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; }
 
+// locals
 var useStyles = (0, _core.makeStyles)(function (theme) {
   return {
     '@global': {
@@ -72,10 +71,15 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
       height: '100vh',
       width: '100%'
     },
-    fab: {
-      float: 'right',
-      position: 'sticky',
-      marginTop: theme.spacing(2),
+    fabLeft: {
+      zIndex: 10000,
+      position: 'fixed',
+      bottom: theme.spacing(2),
+      left: theme.spacing(2)
+    },
+    fabRight: {
+      zIndex: 10000,
+      position: 'fixed',
       bottom: theme.spacing(2),
       right: theme.spacing(2)
     },
@@ -132,11 +136,11 @@ var Logo = (0, _mobxReact.observer)(function (_ref) {
   }
 });
 var App = (0, _mobxReact.observer)(function (_ref2) {
-  var _viewTypes$;
+  var _viewTypes$, _grid;
 
   var session = _ref2.session,
       _ref2$HeaderButtons = _ref2.HeaderButtons,
-      HeaderButtons = _ref2$HeaderButtons === void 0 ? null : _ref2$HeaderButtons;
+      HeaderButtons = _ref2$HeaderButtons === void 0 ? /*#__PURE__*/_react.default.createElement("div", null) : _ref2$HeaderButtons;
   var classes = useStyles();
 
   var _getEnv = (0, _mobxStateTree.getEnv)(session),
@@ -156,28 +160,38 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
       savedSessionNames = session.savedSessionNames,
       name = session.name,
       menus = session.menus,
-      views = session.views;
+      views = session.views,
+      drawerPosition = session.drawerPosition;
 
   function handleNameChange(newName) {
-    if (savedSessionNames && savedSessionNames.includes(newName)) {
+    if (savedSessionNames !== null && savedSessionNames !== void 0 && savedSessionNames.includes(newName)) {
       session.notify("Cannot rename session to \"".concat(newName, "\", a saved session with that name already exists"), 'warning');
     } else {
       session.renameCurrentSession(newName);
     }
   }
 
+  var drawerVisible = visibleWidget && !minimized;
+  var grid;
+
+  if (drawerPosition === 'right') {
+    grid = ["[main] 1fr", drawerVisible ? "[drawer] ".concat(drawerWidth, "px") : undefined];
+  } else if (drawerPosition === 'left') {
+    grid = [drawerVisible ? "[drawer] ".concat(drawerWidth, "px") : undefined, "[main] 1fr"];
+  }
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root,
     style: {
-      gridTemplateColumns: "[main] 1fr".concat(visibleWidget && !minimized ? " [drawer] ".concat(drawerWidth, "px") : '')
+      gridTemplateColumns: (_grid = grid) === null || _grid === void 0 ? void 0 : _grid.filter(function (f) {
+        return !!f;
+      }).join(' ')
     }
-  }, session.DialogComponent ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, drawerVisible && drawerPosition === 'left' ? /*#__PURE__*/_react.default.createElement(_DrawerWidget.default, {
+    session: session
+  }) : null, session.DialogComponent ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement("div", null)
-  }, /*#__PURE__*/_react.default.createElement(session.DialogComponent, (0, _extends2.default)({
-    handleClose: function handleClose() {
-      return session.setDialogComponent(undefined, undefined);
-    }
-  }, session.DialogProps))) : null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(session.DialogComponent, session.DialogProps)) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.menuBarAndComponents
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.menuBar
@@ -224,19 +238,23 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
     }
 
     var ReactComponent = viewType.ReactComponent;
-    return /*#__PURE__*/_react.default.createElement(_ViewContainer.default, {
-      key: "view-".concat(view.id),
-      view: view,
-      onClose: function onClose() {
-        return session.removeView(view);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-      fallback: /*#__PURE__*/_react.default.createElement("div", null, "Loading...")
-    }, /*#__PURE__*/_react.default.createElement(ReactComponent, {
-      model: view,
-      session: session,
-      getTrackType: pluginManager.getTrackType
-    })));
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      _react.default.createElement(_ViewContainer.default, {
+        key: "view-".concat(view.id),
+        view: view,
+        onClose: function onClose() {
+          return session.removeView(view);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+        fallback: /*#__PURE__*/_react.default.createElement("div", null, "Loading...")
+      }, /*#__PURE__*/_react.default.createElement(ReactComponent, {
+        model: view,
+        session: session,
+        getTrackType: pluginManager.getTrackType
+      })))
+    );
   }) : /*#__PURE__*/_react.default.createElement(_core.Paper, {
     className: classes.selectPaper
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Select a view to launch"), /*#__PURE__*/_react.default.createElement(_core.Select, {
@@ -260,20 +278,16 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
     style: {
       height: 300
     }
-  }))), activeWidgets.size > 0 && minimized ? /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.fab
+  }))), activeWidgets.size > 0 && minimized ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    title: "Open drawer widget"
   }, /*#__PURE__*/_react.default.createElement(_core.Fab, {
+    className: drawerPosition === 'right' ? classes.fabRight : classes.fabLeft,
     color: "primary",
-    size: "small",
-    "aria-label": "show",
     "data-testid": "drawer-maximize",
-    style: {
-      float: 'right'
-    },
     onClick: function onClick() {
-      session.showWidgetDrawer();
+      return session.showWidgetDrawer();
     }
-  }, /*#__PURE__*/_react.default.createElement(_Launch.default, null))) : null, visibleWidget && !minimized ? /*#__PURE__*/_react.default.createElement(_DrawerWidget.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Launch.default, null))) : null, drawerVisible && drawerPosition === 'right' ? /*#__PURE__*/_react.default.createElement(_DrawerWidget.default, {
     session: session
   }) : null, /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
     session: session

package/ui/Drawer.d.ts

@@ -1,16 +1,8 @@
-declare function _default({ children, session }: {
-    children: any;
-    session: any;
+import React from 'react';
+import { SessionWithDrawerWidgets } from '../util/types';
+declare function Drawer({ children, session, }: {
+    children: React.ReactNode;
+    session: SessionWithDrawerWidgets;
 }): JSX.Element;
-declare namespace _default {
-    export namespace propTypes {
-        export const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export const session: PropTypes.Validator<any>;
-    }
-    export namespace defaultProps {
-        const children_1: null;
-        export { children_1 as children };
-    }
-}
+declare const _default: typeof Drawer;
 export default _default;
-import PropTypes from "prop-types";

package/ui/Drawer.js

@@ -15,8 +15,6 @@ var _styles = require("@material-ui/core/styles");
 
 var _mobxReact = require("mobx-react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ResizeHandle = _interopRequireDefault(require("./ResizeHandle"));
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
@@ -40,26 +38,27 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 function Drawer(_ref) {
   var children = _ref.children,
       session = _ref.session;
+  var drawerPosition = session.drawerPosition,
+      drawerWidth = session.drawerWidth;
   var classes = useStyles();
   return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     className: classes.paper,
     elevation: 16,
     square: true
-  }, /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
+  }, drawerPosition === 'right' ? /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
+    onDrag: session.resizeDrawer,
+    className: classes.resizeHandle,
+    vertical: true
+  }) : null, children, drawerPosition === 'left' ? /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
     onDrag: session.resizeDrawer,
     className: classes.resizeHandle,
+    style: {
+      left: drawerWidth
+    },
     vertical: true
-  }), children);
+  }) : null);
 }
 
-Drawer.propTypes = {
-  children: _propTypes.default.node,
-  session: _mobxReact.PropTypes.observableObject.isRequired
-};
-Drawer.defaultProps = {
-  children: null
-};
-
 var _default = (0, _mobxReact.observer)(Drawer);
 
 exports.default = _default;

package/ui/DrawerWidget.d.ts

@@ -1,4 +1,6 @@
+/// <reference types="react" />
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerWidget: ({ session }: {
+    session: SessionWithDrawerWidgets;
+}) => JSX.Element;
 export default DrawerWidget;
-declare function DrawerWidget({ session }: {
-    session: any;
-}): JSX.Element;

package/ui/DrawerWidget.js

@@ -15,17 +15,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@material-ui/core");
 
+var _mobxReact = require("mobx-react");
+
+var _mobxStateTree = require("mobx-state-tree");
+
 var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
 
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
 var _Minimize = _interopRequireDefault(require("@material-ui/icons/Minimize"));
 
-var _mobxReact = require("mobx-react");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _styles = require("@material-ui/core/styles");
+var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
 
 var _Drawer = _interopRequireDefault(require("./Drawer"));
 
@@ -33,12 +33,14 @@ 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; }
 
+// icons
+// locals
 var useStyles = (0, _core.makeStyles)(function (theme) {
   return {
     drawerActions: {
       float: 'right',
       '&:hover': {
-        backgroundColor: (0, _styles.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
+        backgroundColor: (0, _core.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
@@ -58,70 +60,88 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
     },
     dropDownIcon: {
       color: theme.palette.secondary.contrastText
+    },
+    header: {
+      background: theme.palette.secondary.main
     }
   };
 });
-var DrawerHeader = (0, _mobxReact.observer)(function (props) {
-  var session = props.session,
-      setToolbarHeight = props.setToolbarHeight;
+var DrawerHeader = (0, _mobxReact.observer)(function (_ref) {
+  var session = _ref.session,
+      setToolbarHeight = _ref.setToolbarHeight;
+
+  var _getEnv = (0, _mobxStateTree.getEnv)(session),
+      pluginManager = _getEnv.pluginManager;
+
   var visibleWidget = session.visibleWidget,
-      activeWidgets = session.activeWidgets;
+      activeWidgets = session.activeWidgets,
+      drawerPosition = session.drawerPosition;
   var classes = useStyles();
 
-  var handleChange = function handleChange(e, option) {
-    session.showWidget(option.props.value);
-  };
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      anchorEl = _React$useState2[0],
+      setAnchorEl = _React$useState2[1];
 
-  var theme = (0, _styles.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_core.AppBar, {
     position: "sticky",
-    ref: function ref(_ref) {
-      return setToolbarHeight((_ref === null || _ref === void 0 ? void 0 : _ref.getBoundingClientRect().height) || 0);
-    },
-    style: {
-      background: theme.palette.secondary.main
+    className: classes.header,
+    ref: function ref(_ref2) {
+      return setToolbarHeight((_ref2 === null || _ref2 === void 0 ? void 0 : _ref2.getBoundingClientRect().height) || 0);
     }
   }, /*#__PURE__*/_react.default.createElement(_core.Toolbar, {
     disableGutters: true,
     className: classes.drawerToolbar
   }, /*#__PURE__*/_react.default.createElement(_core.Select, {
-    value: visibleWidget || '',
+    value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id,
     "data-testid": "widget-drawer-selects",
     className: classes.drawerSelect,
     classes: {
       icon: classes.dropDownIcon
     },
-    renderValue: function renderValue(selected) {
-      var _getEnv$pluginManager = (0, _mobxStateTree.getEnv)(session).pluginManager.getWidgetType(selected.type),
-          HeadingComp = _getEnv$pluginManager.HeadingComponent,
-          headingText = _getEnv$pluginManager.heading;
+    renderValue: function renderValue(widgetId) {
+      var widget = session.activeWidgets.get(widgetId);
+
+      if (!widget) {
+        return /*#__PURE__*/_react.default.createElement(_core.Typography, {
+          variant: "h6",
+          color: "inherit"
+        }, "Unknown widget");
+      }
 
-      return /*#__PURE__*/_react.default.createElement(_core.Typography, {
+      var widgetType = pluginManager.getWidgetType(widget.type);
+      var HeadingComponent = widgetType.HeadingComponent,
+          heading = widgetType.heading;
+      return HeadingComponent ? /*#__PURE__*/_react.default.createElement(HeadingComponent, {
+        model: widget
+      }) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
         variant: "h6",
         color: "inherit"
-      }, HeadingComp ? /*#__PURE__*/_react.default.createElement(HeadingComp, {
-        model: selected
-      }) : headingText || undefined);
+      }, heading);
     },
-    onChange: function onChange(e, value) {
-      handleChange(e, value);
-    }
-  }, Array.from(activeWidgets.values()).map(function (widget, index) {
-    var _getEnv$pluginManager2 = (0, _mobxStateTree.getEnv)(session).pluginManager.getWidgetType(widget.type),
-        HeadingComp = _getEnv$pluginManager2.HeadingComponent,
-        headingText = _getEnv$pluginManager2.heading;
+    onChange: function onChange(e) {
+      var w = session.activeWidgets.get(e.target.value);
 
+      if (!w) {
+        session.notify('Widget not found ' + e.target.value, 'warning');
+      }
+
+      session.showWidget(w);
+    }
+  }, Array.from(activeWidgets.values()).map(function (widget) {
+    var widgetType = pluginManager.getWidgetType(widget.type);
+    var HeadingComponent = widgetType.HeadingComponent,
+        heading = widgetType.heading;
     return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
       "data-testid": "widget-drawer-selects-item-".concat(widget.type),
-      key: "".concat(widget.id, "-").concat(index),
-      value: widget
-    }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+      key: widget.id,
+      value: widget.id
+    }, HeadingComponent ? /*#__PURE__*/_react.default.createElement(HeadingComponent, {
+      model: widget
+    }) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
       variant: "h6",
       color: "inherit"
-    }, HeadingComp ? /*#__PURE__*/_react.default.createElement(HeadingComp, {
-      model: widget
-    }) : headingText || undefined), /*#__PURE__*/_react.default.createElement(_core.ListItemSecondaryAction, null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-      className: classes.drawerCloseButton,
+    }, heading), /*#__PURE__*/_react.default.createElement(_core.ListItemSecondaryAction, null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
       "data-testid": "".concat(widget.type, "-drawer-delete"),
       color: "inherit",
       "aria-label": "Delete",
@@ -131,36 +151,56 @@ var DrawerHeader = (0, _mobxReact.observer)(function (props) {
     }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))));
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.spacer
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.drawerCloseButton
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    "data-testid": "drawer-close",
+    color: "inherit",
+    onClick: function onClick(event) {
+      return setAnchorEl(event.currentTarget);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null)), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    title: "Minimize drawer"
   }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    className: classes.drawerCloseButton,
     "data-testid": "drawer-minimize",
     color: "inherit",
     onClick: function onClick() {
+      session.notify("Drawer minimized, click button on ".concat(drawerPosition, " side of screen to re-open"), 'info');
       session.minimizeWidgetDrawer();
     }
-  }, /*#__PURE__*/_react.default.createElement(_Minimize.default, null)), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_Minimize.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    title: "Close drawer"
+  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
     "data-testid": "drawer-close",
     color: "inherit",
     onClick: function onClick() {
       session.hideWidget(visibleWidget);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)))));
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, ['left', 'right'].map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+      key: option,
+      selected: drawerPosition === 'option',
+      onClick: function onClick() {
+        session.setDrawerPosition(option);
+        setAnchorEl(null);
+      }
+    }, option);
+  })));
 });
-var DrawerWidget = (0, _mobxReact.observer)(function (_ref2) {
-  var session = _ref2.session;
-  var visibleWidget = session.visibleWidget,
-      activeWidgets = session.activeWidgets;
+var DrawerWidget = (0, _mobxReact.observer)(function (_ref3) {
+  var session = _ref3.session;
+  var visibleWidget = session.visibleWidget;
 
-  var _getEnv = (0, _mobxStateTree.getEnv)(session),
-      pluginManager = _getEnv.pluginManager;
-
-  var _pluginManager$getWid = pluginManager.getWidgetType(visibleWidget.type),
-      ReactComponent = _pluginManager$getWid.ReactComponent; // we track the toolbar height because components that use virtualized height
-  // want to be able to fill the contained, minus the toolbar height (the
-  // position static/sticky is included in AutoSizer estimates)
+  var _getEnv2 = (0, _mobxStateTree.getEnv)(session),
+      pluginManager = _getEnv2.pluginManager;
 
+  var DrawerComponent = visibleWidget ? pluginManager.getWidgetType(visibleWidget.type).ReactComponent : null; // we track the toolbar height because components that use virtualized
+  // height want to be able to fill the contained, minus the toolbar height
+  // (the position static/sticky is included in AutoSizer estimates)
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -168,14 +208,13 @@ var DrawerWidget = (0, _mobxReact.observer)(function (_ref2) {
       setToolbarHeight = _useState2[1];
 
   return /*#__PURE__*/_react.default.createElement(_Drawer.default, {
-    session: session,
-    open: Boolean(activeWidgets.size)
+    session: session
   }, /*#__PURE__*/_react.default.createElement(DrawerHeader, {
     session: session,
     setToolbarHeight: setToolbarHeight
   }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement("div", null, "Loading...")
-  }, /*#__PURE__*/_react.default.createElement(ReactComponent, {
+  }, /*#__PURE__*/_react.default.createElement(DrawerComponent, {
     model: visibleWidget,
     session: session,
     toolbarHeight: toolbarHeight

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FileLocation, AbstractRootModel } from '../../util/types';
+declare const FileSelector: (props: {
+    location?: FileLocation | undefined;
+    setLocation: (param: FileLocation) => void;
+    setName?: ((str: string) => void) | undefined;
+    name?: string | undefined;
+    description?: string | undefined;
+    rootModel?: AbstractRootModel | undefined;
+}) => JSX.Element;
+export default FileSelector;