@jbrowse/plugin-linear-genome-view 1.7.6 → 1.7.9

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts

@@ -172,8 +172,8 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         signal?: AbortSignal;
         filters?: string[];
     }): Promise<{}>;
-    setRegionStatsP(p?: Promise<Stats> | undefined): void;
-    setRegionStats(estimatedRegionStats?: Stats | undefined): void;
+    setRegionStatsP(p?: Promise<Stats>): void;
+    setRegionStats(estimatedRegionStats?: Stats): void;
     clearRegionStats(): void;
     setHeight(displayHeight: number): number;
     resizeHeight(distance: number): number;
@@ -186,7 +186,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature: string | undefined): void;
     reload(): void;
-    setContextMenuFeature(feature?: Feature | undefined): void;
+    setContextMenuFeature(feature?: Feature): void;
 } & {
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -693,8 +693,6 @@ var BaseLinearDisplay = _mobxStateTree.types.compose('BaseLinearDisplay', _model
                   // version, or just get the default if none available
 
 
-                  // regionCannotBeRendered can return jsx so look for plaintext
-                  // version, or just get the default if none available
                   var cannotBeRenderedReason = self.regionCannotBeRenderedText(block) || self.regionCannotBeRendered(block);
 
                   if (cannotBeRenderedReason) {

package/dist/LinearGenomeView/components/ExportSvgDialog.js

@@ -17,17 +17,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
-
 var _core = require("@material-ui/core");
 
+var _ui = require("@jbrowse/core/ui");
+
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
 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, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _core.makeStyles)(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -38,6 +38,17 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
+function LoadingMessage() {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.CircularProgress, {
+    size: 20,
+    style: {
+      marginRight: 20
+    }
+  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    display: "inline"
+  }, "Creating SVG"));
+}
+
 function ExportSvgDlg(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
@@ -54,10 +65,15 @@ function ExportSvgDlg(_ref) {
       loading = _useState4[0],
       setLoading = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(),
+  var _useState5 = (0, _react.useState)('jbrowse.svg'),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      error = _useState6[0],
-      setError = _useState6[1];
+      filename = _useState6[0],
+      setFilename = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      error = _useState8[0],
+      setError = _useState8[1];
 
   var classes = useStyles();
   return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
@@ -66,18 +82,15 @@ function ExportSvgDlg(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, "Export SVG", /*#__PURE__*/_react.default.createElement(_core.IconButton, {
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, error ? /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      color: 'red'
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, error ? /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
+    error: error
+  }) : loading ? /*#__PURE__*/_react.default.createElement(LoadingMessage, null) : null, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+    helperText: "filename",
+    value: filename,
+    onChange: function onChange(event) {
+      return setFilename(event.target.value);
     }
-  }, "".concat(error)) : loading ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.CircularProgress, {
-    size: 20,
-    style: {
-      marginRight: 20
-    }
-  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    display: "inline"
-  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/_react.default.createElement(_core.FormControlLabel, {
+  }), offscreenCanvas ? /*#__PURE__*/_react.default.createElement(_core.FormControlLabel, {
     control: /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
       checked: rasterizeLayers,
       onChange: function onChange() {
@@ -107,12 +120,13 @@ function ExportSvgDlg(_ref) {
               _context.prev = 2;
               _context.next = 5;
               return model.exportSvg({
-                rasterizeLayers: rasterizeLayers
+                rasterizeLayers: rasterizeLayers,
+                filename: filename
               });
 
             case 5:
               handleClose();
-              _context.next = 12;
+              _context.next = 13;
               break;
 
             case 8:
@@ -120,18 +134,14 @@ function ExportSvgDlg(_ref) {
               _context.t0 = _context["catch"](2);
               console.error(_context.t0);
               setError(_context.t0);
-
-            case 12:
-              _context.prev = 12;
               setLoading(false);
-              return _context.finish(12);
 
-            case 15:
+            case 13:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[2, 8, 12, 15]]);
+      }, _callee, null, [[2, 8]]);
     }))
   }, "Submit")));
 }

package/dist/LinearGenomeView/components/ImportForm.js

@@ -70,35 +70,35 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
       textSearchManager = session.textSearchManager;
   var rankSearchResults = model.rankSearchResults,
       isSearchDialogDisplayed = model.isSearchDialogDisplayed,
-      modelError = model.error;
+      error = model.error;
 
   var _useState = (0, _react.useState)(assemblyNames[0]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       selectedAsm = _useState2[0],
       setSelectedAsm = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(modelError),
+  var _useState3 = (0, _react.useState)(error),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
+      importError = _useState4[0],
+      setImportError = _useState4[1];
 
   var searchScope = model.searchScope(selectedAsm);
   var assembly = assemblyManager.get(selectedAsm);
   var assemblyError = assemblyNames.length ? assembly === null || assembly === void 0 ? void 0 : assembly.error : 'No configured assemblies';
   var regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
-  var err = assemblyError || error;
+  var err = assemblyError || importError;
 
-  var _useState5 = (0, _react.useState)(),
+  var _useState5 = (0, _react.useState)(''),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      myOption = _useState6[0],
-      setOption = _useState6[1]; // use this instead of useState initializer because the useState initializer
-  // won't update in response to an observable
+      myVal = _useState6[0],
+      setValue = _useState6[1];
 
+  var value = myVal || ((_regions$ = regions[0]) === null || _regions$ === void 0 ? void 0 : _regions$.refName); // use this instead of useState initializer because the useState initializer
+  // won't update in response to an observable
 
-  var option = myOption || new _BaseResults.default({
-    label: (_regions$ = regions[0]) === null || _regions$ === void 0 ? void 0 : _regions$.refName
+  var option = new _BaseResults.default({
+    label: value
   });
-  var selectedRegion = option === null || option === void 0 ? void 0 : option.getLocation();
 
   function fetchResults(_x, _x2) {
     return _fetchResults.apply(this, arguments);
@@ -155,7 +155,7 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
 
   function _handleSelectedRegion() {
     _handleSelectedRegion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(input) {
-      var trackId, location, _assembly$allRefNames2, results;
+      var trackId, location, _location$split, _location$split2, ref, rest, allRefs, results;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -171,61 +171,63 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
             case 2:
               trackId = option.getTrackId();
               location = input || option.getLocation() || '';
-              _context2.prev = 4;
+              _location$split = location.split(':'), _location$split2 = (0, _slicedToArray2.default)(_location$split, 2), ref = _location$split2[0], rest = _location$split2[1];
+              allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) || [];
+              _context2.prev = 6;
 
-              if (!(assembly !== null && assembly !== void 0 && (_assembly$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
-                _context2.next = 9;
+              if (!(allRefs.includes(location) || allRefs.includes(ref) && rest !== undefined && !Number.isNaN(parseInt(rest, 10)))) {
+                _context2.next = 11;
                 break;
               }
 
               model.navToLocString(location, selectedAsm);
-              _context2.next = 20;
+              _context2.next = 22;
               break;
 
-            case 9:
-              _context2.next = 11;
+            case 11:
+              _context2.next = 13;
               return fetchResults(input, 'exact');
 
-            case 11:
+            case 13:
               results = _context2.sent;
 
-              if (!(results && results.length > 1)) {
-                _context2.next = 17;
+              if (!(results.length > 1)) {
+                _context2.next = 19;
                 break;
               }
 
               model.setSearchResults(results, input.toLowerCase());
               return _context2.abrupt("return");
 
-            case 17:
-              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+            case 19:
+              if (results.length === 1) {
                 location = results[0].getLocation();
                 trackId = results[0].getTrackId();
               }
 
-            case 18:
+            case 20:
               model.navToLocString(location, selectedAsm);
 
               if (trackId) {
                 model.showTrack(trackId);
               }
 
-            case 20:
-              _context2.next = 26;
+            case 22:
+              _context2.next = 28;
               break;
 
-            case 22:
-              _context2.prev = 22;
-              _context2.t0 = _context2["catch"](4);
+            case 24:
+              _context2.prev = 24;
+              _context2.t0 = _context2["catch"](6);
               console.error(_context2.t0);
               session.notify("".concat(_context2.t0), 'warning');
 
-            case 26:
+            case 28:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[4, 22]]);
+      }, _callee2, null, [[6, 24]]);
     }));
     return _handleSelectedRegion.apply(this, arguments);
   }
@@ -241,7 +243,12 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     className: classes.importFormContainer
   }, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: function onSubmit(event) {
-      return event.preventDefault();
+      event.preventDefault();
+      model.setError(undefined);
+
+      if (value) {
+        handleSelectedRegion(value);
+      }
     }
   }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
     container: true,
@@ -252,7 +259,7 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_AssemblySelector.default, {
     onChange: function onChange(val) {
-      setError(undefined);
+      setImportError('');
       setSelectedAsm(val);
     },
     session: session,
@@ -268,15 +275,15 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     style: {
       color: 'red'
     }
-  }) : selectedRegion ? /*#__PURE__*/_react.default.createElement(_RefNameAutocomplete.default, {
+  }) : value ? /*#__PURE__*/_react.default.createElement(_RefNameAutocomplete.default, {
     fetchResults: fetchResults,
     model: model,
     assemblyName: assemblyError ? undefined : selectedAsm,
-    value: selectedRegion // note: minWidth 270 accomodates full width of helperText
+    value: value // note: minWidth 270 accomodates full width of helperText
     ,
     minWidth: 270,
-    onSelect: function onSelect(option) {
-      return setOption(option);
+    onChange: function onChange(str) {
+      return setValue(str);
     },
     TextFieldProps: {
       variant: 'outlined',
@@ -298,19 +305,12 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     type: "submit",
-    disabled: !selectedRegion,
+    disabled: !value,
     className: classes.button,
-    onClick: function onClick() {
-      model.setError(undefined);
-
-      if (selectedRegion) {
-        handleSelectedRegion(selectedRegion);
-      }
-    },
     variant: "contained",
     color: "primary"
   }, "Open"), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    disabled: !selectedRegion,
+    disabled: !value,
     className: classes.button,
     onClick: function onClick() {
       model.setError(undefined);

package/dist/LinearGenomeView/components/RefNameAutocomplete.d.ts

@@ -6,9 +6,10 @@ export interface Option {
     group?: string;
     result: BaseResult;
 }
-declare function RefNameAutocomplete({ model, showHelp, onSelect, assemblyName, style, fetchResults, value, minWidth, TextFieldProps, }: {
+declare function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, TextFieldProps, }: {
     model: LinearGenomeViewModel;
-    onSelect: (region: BaseResult) => void;
+    onSelect?: (region: BaseResult) => void;
+    onChange?: (val: string) => void;
     assemblyName?: string;
     value?: string;
     fetchResults: (query: string) => Promise<BaseResult[]>;

package/dist/LinearGenomeView/components/RefNameAutocomplete.js

@@ -80,13 +80,14 @@ var MyPopper = function MyPopper(props) {
 
 function RefNameAutocomplete(_ref) {
   var model = _ref.model,
-      _ref$showHelp = _ref.showHelp,
-      showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp,
       onSelect = _ref.onSelect,
       assemblyName = _ref.assemblyName,
       style = _ref.style,
       fetchResults = _ref.fetchResults,
+      onChange = _ref.onChange,
       value = _ref.value,
+      _ref$showHelp = _ref.showHelp,
+      showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp,
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
       _ref$TextFieldProps = _ref.TextFieldProps,
@@ -223,7 +224,8 @@ function RefNameAutocomplete(_ref) {
     loading: !loaded,
     inputValue: inputValue,
     onInputChange: function onInputChange(event, newInputValue) {
-      return setInputValue(newInputValue);
+      setInputValue(newInputValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
     },
     loadingText: "loading results",
     open: open,
@@ -246,11 +248,11 @@ function RefNameAutocomplete(_ref) {
 
       if (typeof selectedOption === 'string') {
         // handles string inputs on keyPress enter
-        onSelect(new _BaseResults.default({
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(new _BaseResults.default({
           label: selectedOption
         }));
       } else {
-        onSelect(selectedOption.result);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
       }
 
       setInputValue(inputBoxVal);

package/dist/LinearGenomeView/components/SearchBox.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -54,7 +56,12 @@ function SearchBox(_ref) {
 
   function fetchResults(_x, _x2) {
     return _fetchResults.apply(this, arguments);
-  }
+  } // gets a string as input, or use stored option results from previous query,
+  // then re-query and
+  // 1) if it has multiple results: pop a dialog
+  // 2) if it's a single result navigate to it
+  // 3) else assume it's a locstring and navigate to it
+
 
   function _fetchResults() {
     _fetchResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query, searchType) {
@@ -104,7 +111,7 @@ function SearchBox(_ref) {
 
   function _handleSelectedRegion() {
     _handleSelectedRegion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(option) {
-      var trackId, location, label, _assembly$allRefNames2, results;
+      var trackId, location, label, _location$split, _location$split2, ref, rest, allRefs, results;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -113,61 +120,63 @@ function SearchBox(_ref) {
               trackId = option.getTrackId();
               location = option.getLocation();
               label = option.getLabel();
-              _context2.prev = 3;
+              _location$split = location.split(':'), _location$split2 = (0, _slicedToArray2.default)(_location$split, 2), ref = _location$split2[0], rest = _location$split2[1];
+              allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) || [];
+              _context2.prev = 5;
 
-              if (!(assembly !== null && assembly !== void 0 && (_assembly$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
-                _context2.next = 8;
+              if (!(allRefs.includes(location) || allRefs.includes(ref) && rest !== undefined && !Number.isNaN(parseInt(rest, 10)))) {
+                _context2.next = 10;
                 break;
               }
 
-              model.navToLocString(location);
-              _context2.next = 19;
+              model.navToLocString(location, assemblyName);
+              _context2.next = 21;
               break;
 
-            case 8:
-              _context2.next = 10;
+            case 10:
+              _context2.next = 12;
               return fetchResults(label, 'exact');
 
-            case 10:
+            case 12:
               results = _context2.sent;
 
-              if (!(results && results.length > 1)) {
-                _context2.next = 16;
+              if (!(results.length > 1)) {
+                _context2.next = 18;
                 break;
               }
 
               model.setSearchResults(results, label.toLowerCase());
               return _context2.abrupt("return");
 
-            case 16:
-              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+            case 18:
+              if (results.length === 1) {
                 location = results[0].getLocation();
                 trackId = results[0].getTrackId();
               }
 
-            case 17:
+            case 19:
               model.navToLocString(location, assemblyName);
 
               if (trackId) {
                 model.showTrack(trackId);
               }
 
-            case 19:
-              _context2.next = 25;
+            case 21:
+              _context2.next = 27;
               break;
 
-            case 21:
-              _context2.prev = 21;
-              _context2.t0 = _context2["catch"](3);
+            case 23:
+              _context2.prev = 23;
+              _context2.t0 = _context2["catch"](5);
               console.error(_context2.t0);
               session.notify("".concat(_context2.t0), 'warning');
 
-            case 25:
+            case 27:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 21]]);
+      }, _callee2, null, [[5, 23]]);
     }));
     return _handleSelectedRegion.apply(this, arguments);
   }

package/dist/LinearGenomeView/index.d.ts

@@ -20,6 +20,7 @@ export interface BpOffset {
 }
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
+    filename?: string;
 }
 export interface NavLocation {
     refName: string;
@@ -180,7 +181,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     toggleCenterLine(): void;
     setDisplayedRegions(regions: Region[]): void;
     activateTrackSelector(): import("@jbrowse/core/util").Widget;
-    navToLocString(locString: string, optAssemblyName?: string | undefined): void;
+    navToLocString(locString: string, optAssemblyName?: string): void;
     /**
      * Navigate to a location based on its refName and optionally start, end,
      * and assemblyName. Can handle if there are multiple displayedRegions
@@ -245,8 +246,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     centerAt(bp: number, refName: string, regionIndex: number): void;
     center(): void;
     showAllRegions(): void;
-    showAllRegionsInAssembly(assemblyName?: string | undefined): void;
-    setDraggingTrackId(idx?: string | undefined): void;
+    showAllRegionsInAssembly(assemblyName?: string): void;
+    setDraggingTrackId(idx?: string): void;
     setScaleFactor(factor: number): void;
 } & {
     slide: (viewWidths: number) => void;

package/dist/LinearGenomeView/index.js

@@ -1380,7 +1380,7 @@ function stateModelFactory(pluginManager) {
                   blob = new Blob([html], {
                     type: 'image/svg+xml'
                   });
-                  (0, _fileSaver.saveAs)(blob, 'image.svg');
+                  (0, _fileSaver.saveAs)(blob, opts.filename || 'image.svg');
 
                 case 6:
                 case "end":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.7.6",
+  "version": "1.7.9",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dbd73f99714e395cf20877d5e05d26855857a0e3"
+  "gitHead": "a6504c385d703ce6e755d05652ef659ffe28c864"
 }

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -642,6 +642,7 @@ export const BaseLinearDisplay = types
             const { offsetPx } = roundedDynamicBlocks[index]
             const offset = offsetPx - viewOffsetPx
             const clipid = getId(id, index)
+
             return (
               <React.Fragment key={`frag-${index}`}>
                 <defs>

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -1,17 +1,19 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import {
   Button,
+  Checkbox,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
-  Checkbox,
   FormControlLabel,
-  CircularProgress,
+  IconButton,
+  TextField,
   Typography,
+  makeStyles,
 } from '@material-ui/core'
+import { ErrorMessage } from '@jbrowse/core/ui'
 import CloseIcon from '@material-ui/icons/Close'
 import { LinearGenomeViewModel as LGV } from '..'
 
@@ -24,6 +26,15 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
+function LoadingMessage() {
+  return (
+    <div>
+      <CircularProgress size={20} style={{ marginRight: 20 }} />
+      <Typography display="inline">Creating SVG</Typography>
+    </div>
+  )
+}
+
 export default function ExportSvgDlg({
   model,
   handleClose,
@@ -35,6 +46,7 @@ export default function ExportSvgDlg({
   const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
   const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
   const [loading, setLoading] = useState(false)
+  const [filename, setFilename] = useState('jbrowse.svg')
   const [error, setError] = useState<unknown>()
   const classes = useStyles()
   return (
@@ -47,13 +59,15 @@ export default function ExportSvgDlg({
       </DialogTitle>
       <DialogContent>
         {error ? (
-          <div style={{ color: 'red' }}>{`${error}`}</div>
+          <ErrorMessage error={error} />
         ) : loading ? (
-          <div>
-            <CircularProgress size={20} style={{ marginRight: 20 }} />
-            <Typography display="inline">Creating SVG</Typography>
-          </div>
+          <LoadingMessage />
         ) : null}
+        <TextField
+          helperText="filename"
+          value={filename}
+          onChange={event => setFilename(event.target.value)}
+        />
         {offscreenCanvas ? (
           <FormControlLabel
             control={
@@ -87,12 +101,11 @@ export default function ExportSvgDlg({
             setLoading(true)
             setError(undefined)
             try {
-              await model.exportSvg({ rasterizeLayers })
+              await model.exportSvg({ rasterizeLayers, filename })
               handleClose()
             } catch (e) {
               console.error(e)
               setError(e)
-            } finally {
               setLoading(false)
             }
           }}

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -37,13 +37,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   const session = getSession(model)
   const { assemblyNames, assemblyManager, textSearchManager } = session
-  const {
-    rankSearchResults,
-    isSearchDialogDisplayed,
-    error: modelError,
-  } = model
+  const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [error, setError] = useState<typeof modelError | undefined>(modelError)
+  const [importError, setImportError] = useState(error)
   const searchScope = model.searchScope(selectedAsm)
 
   const assembly = assemblyManager.get(selectedAsm)
@@ -51,19 +47,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     ? assembly?.error
     : 'No configured assemblies'
   const regions = assembly?.regions || []
-  const err = assemblyError || error
-
-  const [myOption, setOption] = useState<BaseResult>()
+  const err = assemblyError || importError
+  const [myVal, setValue] = useState('')
+  const value = myVal || regions[0]?.refName
 
   // use this instead of useState initializer because the useState initializer
   // won't update in response to an observable
-  const option =
-    myOption ||
-    new BaseResult({
-      label: regions[0]?.refName,
-    })
-
-  const selectedRegion = option?.getLocation()
+  const option = new BaseResult({
+    label: value,
+  })
 
   async function fetchResults(query: string, searchType?: SearchType) {
     if (!textSearchManager) {
@@ -98,15 +90,26 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     }
     let trackId = option.getTrackId()
     let location = input || option.getLocation() || ''
+    const [ref, rest] = location.split(':')
+    const allRefs = assembly?.allRefNames || []
     try {
-      if (assembly?.allRefNames?.includes(location)) {
+      // instead of querying text-index, first:
+      // - check if input matches a refname directly
+      // - or looks like locstring
+      // then just navigate as if it were a locstring
+      if (
+        allRefs.includes(location) ||
+        (allRefs.includes(ref) &&
+          rest !== undefined &&
+          !Number.isNaN(parseInt(rest, 10)))
+      ) {
         model.navToLocString(location, selectedAsm)
       } else {
         const results = await fetchResults(input, 'exact')
-        if (results && results.length > 1) {
+        if (results.length > 1) {
           model.setSearchResults(results, input.toLowerCase())
           return
-        } else if (results?.length === 1) {
+        } else if (results.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }
@@ -130,7 +133,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     <div className={classes.container}>
       {err ? <ErrorMessage error={err} /> : null}
       <Container className={classes.importFormContainer}>
-        <form onSubmit={event => event.preventDefault()}>
+        <form
+          onSubmit={event => {
+            event.preventDefault()
+            model.setError(undefined)
+            if (value) {
+              handleSelectedRegion(value)
+            }
+          }}
+        >
           <Grid
             container
             spacing={1}
@@ -140,7 +151,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <AssemblySelector
                 onChange={val => {
-                  setError(undefined)
+                  setImportError('')
                   setSelectedAsm(val)
                 }}
                 session={session}
@@ -152,15 +163,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               {selectedAsm ? (
                 err ? (
                   <CloseIcon style={{ color: 'red' }} />
-                ) : selectedRegion ? (
+                ) : value ? (
                   <RefNameAutocomplete
                     fetchResults={fetchResults}
                     model={model}
                     assemblyName={assemblyError ? undefined : selectedAsm}
-                    value={selectedRegion}
+                    value={value}
                     // note: minWidth 270 accomodates full width of helperText
                     minWidth={270}
-                    onSelect={option => setOption(option)}
+                    onChange={str => setValue(str)}
                     TextFieldProps={{
                       variant: 'outlined',
                       helperText:
@@ -181,21 +192,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <Button
                 type="submit"
-                disabled={!selectedRegion}
+                disabled={!value}
                 className={classes.button}
-                onClick={() => {
-                  model.setError(undefined)
-                  if (selectedRegion) {
-                    handleSelectedRegion(selectedRegion)
-                  }
-                }}
                 variant="contained"
                 color="primary"
               >
                 Open
               </Button>
               <Button
-                disabled={!selectedRegion}
+                disabled={!value}
                 className={classes.button}
                 onClick={() => {
                   model.setError(undefined)

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -66,17 +66,19 @@ const MyPopper = function (
 
 function RefNameAutocomplete({
   model,
-  showHelp = true,
   onSelect,
   assemblyName,
   style,
   fetchResults,
+  onChange,
   value,
+  showHelp = true,
   minWidth = 200,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
-  onSelect: (region: BaseResult) => void
+  onSelect?: (region: BaseResult) => void
+  onChange?: (val: string) => void
   assemblyName?: string
   value?: string
   fetchResults: (query: string) => Promise<BaseResult[]>
@@ -171,7 +173,10 @@ function RefNameAutocomplete({
         value={inputBoxVal}
         loading={!loaded}
         inputValue={inputValue}
-        onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
+        onInputChange={(event, newInputValue) => {
+          setInputValue(newInputValue)
+          onChange?.(newInputValue)
+        }}
         loadingText="loading results"
         open={open}
         onOpen={() => setOpen(true)}
@@ -190,9 +195,9 @@ function RefNameAutocomplete({
 
           if (typeof selectedOption === 'string') {
             // handles string inputs on keyPress enter
-            onSelect(new BaseResult({ label: selectedOption }))
+            onSelect?.(new BaseResult({ label: selectedOption }))
           } else {
-            onSelect(selectedOption.result)
+            onSelect?.(selectedOption.result)
           }
           setInputValue(inputBoxVal)
         }}

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -58,19 +58,35 @@ function SearchBox({
     )
   }
 
+  // gets a string as input, or use stored option results from previous query,
+  // then re-query and
+  // 1) if it has multiple results: pop a dialog
+  // 2) if it's a single result navigate to it
+  // 3) else assume it's a locstring and navigate to it
   async function handleSelectedRegion(option: BaseResult) {
     let trackId = option.getTrackId()
     let location = option.getLocation()
     const label = option.getLabel()
+    const [ref, rest] = location.split(':')
+    const allRefs = assembly?.allRefNames || []
     try {
-      if (assembly?.allRefNames?.includes(location)) {
-        model.navToLocString(location)
+      // instead of querying text-index, first:
+      // - check if input matches a refName directly
+      // - or looks like locString
+      // then just navigate as if it were a locString
+      if (
+        allRefs.includes(location) ||
+        (allRefs.includes(ref) &&
+          rest !== undefined &&
+          !Number.isNaN(parseInt(rest, 10)))
+      ) {
+        model.navToLocString(location, assemblyName)
       } else {
         const results = await fetchResults(label, 'exact')
-        if (results && results.length > 1) {
+        if (results.length > 1) {
           model.setSearchResults(results, label.toLowerCase())
           return
-        } else if (results?.length === 1) {
+        } else if (results.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }

package/src/LinearGenomeView/index.tsx

@@ -67,6 +67,7 @@ export interface BpOffset {
 
 export interface ExportSvgOptions {
   rasterizeLayers?: boolean
+  filename?: string
 }
 
 function calculateVisibleLocStrings(contentBlocks: BaseBlock[]) {
@@ -1330,7 +1331,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const html = await renderToSvg(self as any, opts)
         const blob = new Blob([html], { type: 'image/svg+xml' })
-        saveAs(blob, 'image.svg')
+        saveAs(blob, opts.filename || 'image.svg')
       },
     }))
     .views(self => ({