@jbrowse/core 2.0.1 → 2.1.0

package/ui/App.js

@@ -1,274 +1,189 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _material = require("@mui/material");
-
-var _mui = require("tss-react/mui");
-
-var _Launch = _interopRequireDefault(require("@mui/icons-material/Launch"));
-
-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"));
-
-var _EditableTypography = _interopRequireDefault(require("./EditableTypography"));
-
-var _Logo = require("./Logo");
-
-var _Snackbar = _interopRequireDefault(require("./Snackbar"));
-
-var _ViewContainer = _interopRequireDefault(require("./ViewContainer"));
-
-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 __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const Launch_1 = __importDefault(require("@mui/icons-material/Launch"));
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
 // locals
-var useStyles = (0, _mui.makeStyles)()(function (theme) {
-  return {
+const configuration_1 = require("../configuration");
+const DrawerWidget_1 = __importDefault(require("./DrawerWidget"));
+const DropDownMenu_1 = __importDefault(require("./DropDownMenu"));
+const EditableTypography_1 = __importDefault(require("./EditableTypography"));
+const Logo_1 = require("./Logo");
+const Snackbar_1 = __importDefault(require("./Snackbar"));
+const ViewContainer_1 = __importDefault(require("./ViewContainer"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
-      fontFamily: 'Roboto',
-      display: 'grid',
-      height: '100vh',
-      width: '100%'
+        fontFamily: 'Roboto',
+        display: 'grid',
+        height: '100vh',
+        width: '100%',
     },
     fabLeft: {
-      zIndex: 10000,
-      position: 'fixed',
-      bottom: theme.spacing(2),
-      left: theme.spacing(2)
+        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)
+        zIndex: 10000,
+        position: 'fixed',
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
     },
     menuBarAndComponents: {
-      gridColumn: 'main',
-      display: 'grid',
-      gridTemplateRows: '[menubar] min-content [components] auto',
-      height: '100vh'
+        gridColumn: 'main',
+        display: 'grid',
+        gridTemplateRows: '[menubar] min-content [components] auto',
+        height: '100vh',
     },
     menuBar: {
-      gridRow: 'menubar'
+        gridRow: 'menubar',
     },
     components: {
-      overflowY: 'auto',
-      gridRow: 'components'
+        overflowY: 'auto',
+        gridRow: 'components',
     },
     appBar: {
-      flexGrow: 1
+        flexGrow: 1,
     },
     grow: {
-      flexGrow: 1
+        flexGrow: 1,
     },
     inputBase: {
-      color: theme.palette.primary.contrastText
+        color: theme.palette.primary.contrastText,
     },
     inputRoot: {
-      '&:hover': {
-        backgroundColor: theme.palette.primary.light
-      }
+        '&:hover': {
+            backgroundColor: theme.palette.primary.light,
+        },
     },
     inputFocused: {
-      borderColor: theme.palette.secondary.main,
-      backgroundColor: theme.palette.primary.light
+        borderColor: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.light,
     },
     selectPaper: {
-      padding: theme.spacing(4)
-    }
-  };
-});
-var Logo = (0, _mobxReact.observer)(function (_ref) {
-  var session = _ref.session;
-  var configuration = session.configuration;
-  var logoPath = (0, _configuration.readConfObject)(configuration, 'logoPath');
-
-  if (!(logoPath !== null && logoPath !== void 0 && logoPath.uri)) {
-    return /*#__PURE__*/_react.default.createElement(_Logo.LogoFull, {
-      variant: "white"
-    });
-  } else {
-    return /*#__PURE__*/_react.default.createElement("img", {
-      src: logoPath.uri,
-      alt: "Custom logo"
-    });
-  }
-});
-var App = (0, _mobxReact.observer)(function (_ref2) {
-  var _viewTypes$, _grid;
-
-  var session = _ref2.session,
-      _ref2$HeaderButtons = _ref2.HeaderButtons,
-      HeaderButtons = _ref2$HeaderButtons === void 0 ? /*#__PURE__*/_react.default.createElement("div", null) : _ref2$HeaderButtons;
-
-  var _useStyles = useStyles(),
-      classes = _useStyles.classes;
-
-  var _getEnv = (0, _mobxStateTree.getEnv)(session),
-      pluginManager = _getEnv.pluginManager;
-
-  var viewTypes = pluginManager.getElementTypeRecord('view').all();
-
-  var _useState = (0, _react.useState)((_viewTypes$ = viewTypes[0]) === null || _viewTypes$ === void 0 ? void 0 : _viewTypes$.name),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var visibleWidget = session.visibleWidget,
-      drawerWidth = session.drawerWidth,
-      minimized = session.minimized,
-      activeWidgets = session.activeWidgets,
-      savedSessionNames = session.savedSessionNames,
-      name = session.name,
-      menus = session.menus,
-      views = session.views,
-      drawerPosition = session.drawerPosition;
-
-  function handleNameChange(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: (_grid = grid) === null || _grid === void 0 ? void 0 : _grid.filter(function (f) {
-        return !!f;
-      }).join(' ')
-    }
-  }, 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, session.DialogProps)) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.menuBarAndComponents
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.menuBar
-  }, /*#__PURE__*/_react.default.createElement(_material.AppBar, {
-    className: classes.appBar,
-    position: "static"
-  }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, null, menus.map(function (menu) {
-    return /*#__PURE__*/_react.default.createElement(_DropDownMenu.default, {
-      key: menu.label,
-      menuTitle: menu.label,
-      menuItems: menu.menuItems,
-      session: session
-    });
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.grow
-  }), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: "Rename Session",
-    arrow: true
-  }, /*#__PURE__*/_react.default.createElement(_EditableTypography.default, {
-    value: name,
-    setValue: handleNameChange,
-    variant: "body1",
-    classes: {
-      inputBase: classes.inputBase,
-      inputRoot: classes.inputRoot,
-      inputFocused: classes.inputFocused
-    }
-  })), HeaderButtons, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.grow
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: 150,
-      maxHeight: 48
+        padding: theme.spacing(4),
+    },
+}));
+const Logo = (0, mobx_react_1.observer)(({ session }) => {
+    const { configuration } = session;
+    const logoPath = (0, configuration_1.readConfObject)(configuration, 'logoPath');
+    if (!(logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri)) {
+        return react_1.default.createElement(Logo_1.LogoFull, { variant: "white" });
     }
-  }, /*#__PURE__*/_react.default.createElement(Logo, {
-    session: session
-  }))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.components
-  }, views.length ? views.map(function (view) {
-    var viewType = pluginManager.getViewType(view.type);
-
-    if (!viewType) {
-      throw new Error("unknown view type ".concat(view.type));
+    else {
+        return react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" });
     }
-
-    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
-    })));
-  }) : /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    className: classes.selectPaper
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Select a view to launch"), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    value: value,
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
+});
+const App = (0, mobx_react_1.observer)(({ session, HeaderButtons = react_1.default.createElement("div", null), }) => {
+    var _a;
+    const { classes } = useStyles();
+    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
+    const viewTypes = pluginManager.getElementTypeRecord('view').all();
+    const [value, setValue] = (0, react_1.useState)((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name);
+    const { visibleWidget, drawerWidth, minimized, activeWidgets, savedSessionNames, name, menus, views, drawerPosition, } = session;
+    function handleNameChange(newName) {
+        if (savedSessionNames === null || savedSessionNames === void 0 ? void 0 : savedSessionNames.includes(newName)) {
+            session.notify(`Cannot rename session to "${newName}", a saved session with that name already exists`, 'warning');
+        }
+        else {
+            session.renameCurrentSession(newName);
+        }
     }
-  }, viewTypes.map(function (_ref3) {
-    var name = _ref3.name;
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      key: name,
-      value: name
-    }, name);
-  })), /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: function onClick() {
-      session.addView(value, {});
-    },
-    variant: "contained",
-    color: "primary"
-  }, "Launch view")), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: 300
+    const drawerVisible = visibleWidget && !minimized;
+    let grid;
+    if (drawerPosition === 'right') {
+        grid = [
+            `[main] 1fr`,
+            drawerVisible ? `[drawer] ${drawerWidth}px` : undefined,
+        ];
     }
-  }))), activeWidgets.size > 0 && minimized ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: "Open drawer widget"
-  }, /*#__PURE__*/_react.default.createElement(_material.Fab, {
-    className: drawerPosition === 'right' ? classes.fabRight : classes.fabLeft,
-    color: "primary",
-    "data-testid": "drawer-maximize",
-    onClick: function onClick() {
-      return session.showWidgetDrawer();
+    else if (drawerPosition === 'left') {
+        grid = [
+            drawerVisible ? `[drawer] ${drawerWidth}px` : undefined,
+            `[main] 1fr`,
+        ];
     }
-  }, /*#__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
-  }));
+    return (react_1.default.createElement("div", { className: classes.root, style: {
+            gridTemplateColumns: grid === null || grid === void 0 ? void 0 : grid.filter(f => !!f).join(' '),
+        } },
+        drawerVisible && drawerPosition === 'left' ? (react_1.default.createElement(DrawerWidget_1.default, { session: session })) : null,
+        session.DialogComponent ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(session.DialogComponent, { ...session.DialogProps }))) : null,
+        react_1.default.createElement("div", { className: classes.menuBarAndComponents },
+            react_1.default.createElement("div", { className: classes.menuBar },
+                react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
+                    react_1.default.createElement(material_1.Toolbar, null,
+                        menus.map(menu => (react_1.default.createElement(DropDownMenu_1.default, { key: menu.label, menuTitle: menu.label, menuItems: menu.menuItems, session: session }))),
+                        react_1.default.createElement("div", { className: classes.grow }),
+                        react_1.default.createElement(material_1.Tooltip, { title: "Rename Session", arrow: true },
+                            react_1.default.createElement(EditableTypography_1.default, { value: name, setValue: handleNameChange, variant: "body1", classes: {
+                                    inputBase: classes.inputBase,
+                                    inputRoot: classes.inputRoot,
+                                    inputFocused: classes.inputFocused,
+                                } })),
+                        HeaderButtons,
+                        react_1.default.createElement("div", { className: classes.grow }),
+                        react_1.default.createElement("div", { style: { width: 150, maxHeight: 48 } },
+                            react_1.default.createElement(Logo, { session: session }))))),
+            react_1.default.createElement("div", { className: classes.components },
+                views.length ? (views.map(view => {
+                    const viewType = pluginManager.getViewType(view.type);
+                    if (!viewType) {
+                        throw new Error(`unknown view type ${view.type}`);
+                    }
+                    const { ReactComponent } = viewType;
+                    return (react_1.default.createElement(ViewContainer_1.default, { key: `view-${view.id}`, view: view, onClose: () => {
+                            session.removeView(view);
+                            session.notify(`A view has been closed`, 'info', {
+                                name: 'undo',
+                                onClick: () => {
+                                    pluginManager.rootModel.history.undo();
+                                },
+                            });
+                        } },
+                        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null, "Loading...") },
+                            react_1.default.createElement(ReactComponent, { model: view, session: session, getTrackType: pluginManager.getTrackType }))));
+                })) : (react_1.default.createElement(material_1.Paper, { className: classes.selectPaper },
+                    react_1.default.createElement(material_1.Typography, null, "Select a view to launch"),
+                    react_1.default.createElement(material_1.Select, { value: value, onChange: event => setValue(event.target.value) }, viewTypes.map(({ name }) => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, name)))),
+                    react_1.default.createElement(material_1.Button, { onClick: () => {
+                            session.addView(value, {});
+                        }, variant: "contained", color: "primary" }, "Launch view"))),
+                react_1.default.createElement("div", { style: { height: 300 } }))),
+        activeWidgets.size > 0 && minimized ? (react_1.default.createElement(material_1.Tooltip, { title: "Open drawer widget" },
+            react_1.default.createElement(material_1.Fab, { className: drawerPosition === 'right' ? classes.fabRight : classes.fabLeft, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },
+                react_1.default.createElement(Launch_1.default, null)))) : null,
+        drawerVisible && drawerPosition === 'right' ? (react_1.default.createElement(DrawerWidget_1.default, { session: session })) : null,
+        react_1.default.createElement(Snackbar_1.default, { session: session })));
 });
-var _default = App;
-exports.default = _default;
+exports.default = App;

package/ui/AssemblySelector.js

@@ -1,125 +1,64 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobxReact = require("mobx-react");
-
-var _configuration = require("../configuration");
-
-var _material = require("@mui/material");
-
-var _mui = require("tss-react/mui");
-
-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 useStyles = (0, _mui.makeStyles)()(function () {
-  return {
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
+const mui_1 = require("tss-react/mui");
+// locals
+const configuration_1 = require("../configuration");
+const useStyles = (0, mui_1.makeStyles)()(() => ({
     importFormEntry: {
-      minWidth: 180
-    }
-  };
-}); // Hook from https://usehooks.com/useLocalStorage/
-
-function useLocalStorage(key, initialValue) {
-  var _useState = (0, _react.useState)(function () {
-    if (typeof window === 'undefined') {
-      return initialValue;
-    }
-
-    try {
-      var item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      console.error(error);
-      return initialValue;
-    }
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      storedValue = _useState2[0],
-      setStoredValue = _useState2[1];
-
-  var setValue = function setValue(value) {
-    try {
-      var valueToStore = value instanceof Function ? value(storedValue) : value;
-      setStoredValue(valueToStore);
-
-      if (typeof window !== 'undefined') {
-        window.localStorage.setItem(key, JSON.stringify(valueToStore));
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  return [storedValue, setValue];
-}
-
-var AssemblySelector = (0, _mobxReact.observer)(function (_ref) {
-  var session = _ref.session,
-      onChange = _ref.onChange,
-      selected = _ref.selected,
-      InputProps = _ref.InputProps,
-      _ref$extra = _ref.extra,
-      extra = _ref$extra === void 0 ? 0 : _ref$extra;
-
-  var _useStyles = useStyles(),
-      classes = _useStyles.classes;
-
-  var assemblyNames = session.assemblyNames,
-      assemblyManager = session.assemblyManager; // constructs a localstorage key based on host/path/config to help
-  // remember. non-config assists usage with e.g. embedded apps
-
-  var config = new URLSearchParams(window.location.search).get('config');
-
-  var _useLocalStorage = useLocalStorage("lastAssembly-".concat([window.location.host + window.location.pathname, config, extra].join('-')), selected),
-      _useLocalStorage2 = (0, _slicedToArray2.default)(_useLocalStorage, 2),
-      lastSelected = _useLocalStorage2[0],
-      setLastSelected = _useLocalStorage2[1];
-
-  var selection = assemblyNames.includes(lastSelected || '') ? lastSelected : selected;
-  (0, _react.useEffect)(function () {
-    if (selection && selection !== selected) {
-      onChange(selection);
-    }
-  }, [selection, onChange, selected]);
-  var error = assemblyNames.length ? '' : 'No configured assemblies';
-  return /*#__PURE__*/_react.default.createElement(_material.TextField, {
-    select: true,
-    label: "Assembly",
-    variant: "outlined",
-    helperText: error || 'Select assembly to view',
-    value: error ? '' : selection,
-    inputProps: {
-      'data-testid': 'assembly-selector'
-    },
-    onChange: function onChange(event) {
-      return setLastSelected(event.target.value);
+        minWidth: 180,
     },
-    error: !!error,
-    InputProps: InputProps,
-    disabled: !!error,
-    className: classes.importFormEntry
-  }, assemblyNames.map(function (name) {
-    var assembly = assemblyManager.get(name);
-    var displayName = assembly ? (0, _configuration.getConf)(assembly, 'displayName') : '';
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      key: name,
-      value: name
-    }, displayName || name);
-  }));
+}));
+const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, selected, InputProps, extra = 0, }) => {
+    const { classes } = useStyles();
+    const { assemblyNames, assemblyManager } = session;
+    // constructs a localstorage key based on host/path/config to help
+    // remember. non-config assists usage with e.g. embedded apps
+    const config = new URLSearchParams(window.location.search).get('config');
+    const [lastSelected, setLastSelected] = (0, util_1.useLocalStorage)(`lastAssembly-${[
+        window.location.host + window.location.pathname,
+        config,
+        extra,
+    ].join('-')}`, selected);
+    const selection = assemblyNames.includes(lastSelected || '')
+        ? lastSelected
+        : selected;
+    (0, react_1.useEffect)(() => {
+        if (selection && selection !== selected) {
+            onChange(selection);
+        }
+    }, [selection, onChange, selected]);
+    const error = assemblyNames.length ? '' : 'No configured assemblies';
+    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || 'Select assembly to view', value: error ? '' : selection, inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry }, assemblyNames.map(name => {
+        const assembly = assemblyManager.get(name);
+        const displayName = assembly ? (0, configuration_1.getConf)(assembly, 'displayName') : '';
+        return (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName || name));
+    })));
 });
-var _default = AssemblySelector;
-exports.default = _default;
+exports.default = AssemblySelector;