@jbrowse/plugin-linear-genome-view 1.7.8 → 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/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/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.8",
+  "version": "1.7.9",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b429fa2bb5734fc8a5380988f6dfdd3f7a41a39f"
+  "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/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 => ({