@jbrowse/plugin-circular-view 2.3.4 → 2.4.1

package/esm/CircularView/svgcomponents/SVGCircularView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGCircularView.js","sourceRoot":"","sources":["../../../src/CircularView/svgcomponents/SVGCircularView.tsx"],"names":[],"mappings":"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"}

package/esm/LaunchCircularView/index.js

@@ -1,7 +1,7 @@
 import { when } from 'mobx';
 export default (pluginManager) => {
     pluginManager.addToExtensionPoint('LaunchView-CircularView', 
-    // @ts-ignore
+    // @ts-expect-error
     async ({ session, assembly, loc, tracks = [], }) => {
         const { assemblyManager } = session;
         const view = session.addView('CircularView', {});

package/esm/LaunchCircularView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/LaunchCircularView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAS3B,eAAe,CAAC,aAA4B,EAAE,EAAE;IAC9C,aAAa,CAAC,mBAAmB,CAC/B,yBAAyB;IACzB,aAAa;IACb,KAAK,EAAE,EACL,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,GAAG,EAAE,GAMZ,EAAE,EAAE;QACH,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAA;QACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAQ,CAAA;QAEvD,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAElC,IAAI,CAAC,QAAQ,EAAE;YACb,MAAM,IAAI,KAAK,CACb,0DAA0D,CAC3D,CAAA;SACF;QAED,MAAM,GAAG,GAAG,MAAM,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;QAC3D,IAAI,CAAC,GAAG,EAAE;YACR,MAAM,IAAI,KAAK,CACb,aAAa,QAAQ,iDAAiD,CACvE,CAAA;SACF;QAED,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAA;QAE3C,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IAChD,CAAC,CACF,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/LaunchCircularView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAS3B,eAAe,CAAC,aAA4B,EAAE,EAAE;IAC9C,aAAa,CAAC,mBAAmB,CAC/B,yBAAyB;IACzB,mBAAmB;IACnB,KAAK,EAAE,EACL,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,GAAG,EAAE,GAMZ,EAAE,EAAE;QACH,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAA;QACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAQ,CAAA;QAEvD,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAElC,IAAI,CAAC,QAAQ,EAAE;YACb,MAAM,IAAI,KAAK,CACb,0DAA0D,CAC3D,CAAA;SACF;QAED,MAAM,GAAG,GAAG,MAAM,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;QAC3D,IAAI,CAAC,GAAG,EAAE;YACR,MAAM,IAAI,KAAK,CACb,aAAa,QAAQ,iDAAiD,CACvE,CAAA;SACF;QAED,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAA;QAE3C,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IAChD,CAAC,CACF,CAAA;AACH,CAAC,CAAA"}

package/esm/index.d.ts

@@ -1,10 +1,9 @@
 import PluginManager from '@jbrowse/core/PluginManager';
 import Plugin from '@jbrowse/core/Plugin';
-import { CircularViewModel, CircularViewStateModel } from './CircularView/models/CircularView';
 export default class CircularViewPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;
     configure(pluginManager: PluginManager): void;
 }
 export { baseChordDisplayConfig, BaseChordDisplayModel, BaseChordDisplayComponent, } from './BaseChordDisplay';
-export type { CircularViewModel, CircularViewStateModel };
+export { type CircularViewModel, type CircularViewStateModel, } from './CircularView/models/CircularView';

package/esm/index.js

@@ -1,5 +1,6 @@
 import { isAbstractMenuManager } from '@jbrowse/core/util';
 import Plugin from '@jbrowse/core/Plugin';
+// locals
 import CircularViewF from './CircularView';
 import LaunchCircularViewF from './LaunchCircularView';
 // icons

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAOzC,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AAEtD,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,MAAM;IAAtD;;QACE,SAAI,GAAG,oBAAoB,CAAA;IAkB7B,CAAC;IAhBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,mBAAmB,CAAC,aAAa,CAAC,CAAA;IACpC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;gBACrC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,SAAS;AAET,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AAEtD,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,MAAM;IAAtD;;QACE,SAAI,GAAG,oBAAoB,CAAA;IAkB7B,CAAC;IAhBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,mBAAmB,CAAC,aAAa,CAAC,CAAA;IACpC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;gBACrC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -38,7 +38,9 @@
   },
   "dependencies": {
     "@mui/icons-material": "^5.0.1",
-    "clone": "^2.1.2"
+    "@types/file-saver": "^2.0.0",
+    "clone": "^2.1.2",
+    "file-saver": "^2.0.0"
   },
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",
@@ -56,5 +58,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "98ae48be91ee2371e1b2768a907b4997995e9915"
+  "gitHead": "747c50c4edc0184827efa4f8dfc576ca9a72caeb"
 }

package/src/BaseChordDisplay/components/Loading.tsx

@@ -32,6 +32,7 @@ const useStyles = makeStyles()(theme => {
         stroke: primary.light,
       },
     },
+
     '@keyframes dash': {
       '0%': {
         strokeDashoffset: offset,

package/src/BaseChordDisplay/index.ts

@@ -1,3 +1,3 @@
 export { default as BaseChordDisplayComponent } from './components/BaseChordDisplay'
-export { BaseChordDisplayModel } from './models/BaseChordDisplayModel'
-export { baseChordDisplayConfig } from './models/baseChordDisplayConfig'
+export { BaseChordDisplayModel } from './models/model'
+export { baseChordDisplayConfig } from './models/configSchema'

package/src/BaseChordDisplay/models/{BaseChordDisplayModel.ts → model.tsx}

@@ -15,7 +15,7 @@ import {
   makeAbortableReaction,
   AnyReactComponentType,
   Feature,
-  Region,
+  ReactRendering,
 } from '@jbrowse/core/util'
 import {
   getParentRenderProps,
@@ -25,7 +25,11 @@ import {
 
 // locals
 import { renderReactionData, renderReactionEffect } from './renderReaction'
-import { CircularViewModel } from '../../CircularView/models/CircularView'
+import {
+  CircularViewModel,
+  ExportSvgOptions,
+} from '../../CircularView/models/CircularView'
+import { ThemeOptions } from '@mui/material'
 
 /**
  * #stateModel BaseChordDisplay
@@ -48,19 +52,17 @@ export const BaseChordDisplayModel = types
       assemblyName: types.maybe(types.string),
     }),
   )
-  .volatile(() => {
-    return {
-      // NOTE: all this volatile stuff has to be filled in at once
-      // so that it stays consistent
-      filled: false,
-      reactElement: undefined as React.ReactElement | undefined,
-      data: undefined,
-      html: undefined as string | undefined,
-      message: '',
-      renderingComponent: undefined as undefined | AnyReactComponentType,
-      refNameMap: undefined as Record<string, string> | undefined,
-    }
-  })
+  .volatile(() => ({
+    // NOTE: all this volatile stuff has to be filled in at once
+    // so that it stays consistent
+    filled: false,
+    reactElement: undefined as React.ReactElement | undefined,
+    data: undefined,
+    html: undefined as string | undefined,
+    message: '',
+    renderingComponent: undefined as undefined | AnyReactComponentType,
+    refNameMap: undefined as Record<string, string> | undefined,
+  }))
   .actions(self => {
     const { pluginManager } = getEnv(self)
     const track = self
@@ -78,20 +80,19 @@ export const BaseChordDisplayModel = types
      * #getter
      */
     get blockDefinitions() {
-      const origSlices = (getContainingView(self) as CircularViewModel)
-        .staticSlices
+      const view = getContainingView(self) as CircularViewModel
+      const origSlices = view.staticSlices
       if (!self.refNameMap) {
         return origSlices
       }
 
       const slices = clone(origSlices)
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      slices.forEach((slice: any) => {
+      slices.forEach(slice => {
         const regions = slice.region.elided
           ? slice.region.regions
           : [slice.region]
-        regions.forEach((region: Region) => {
+        regions.forEach(region => {
           const renamed = self.refNameMap?.[region.refName]
           if (renamed && region.refName !== renamed) {
             region.refName = renamed
@@ -243,7 +244,7 @@ export const BaseChordDisplayModel = types
         self,
         renderReactionData,
 
-        // @ts-ignore
+        // @ts-expect-error
         renderReactionEffect,
         {
           name: `${self.type} ${self.id} rendering`,
@@ -254,10 +255,11 @@ export const BaseChordDisplayModel = types
         self.renderSuccess,
         self.renderError,
       )
+
       makeAbortableReaction(
         self,
         () => ({
-          assemblyNames: getTrackAssemblyNames(self.parentTrack) as string[],
+          assemblyNames: getTrackAssemblyNames(self.parentTrack),
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           adapter: getConf(getParent<any>(self, 2), 'adapter'),
           assemblyManager: getSession(self).assemblyManager,
@@ -275,9 +277,7 @@ export const BaseChordDisplayModel = types
           fireImmediately: true,
         },
         () => {},
-        refNameMap => {
-          self.setRefNameMap(refNameMap)
-        },
+        refNameMap => self.setRefNameMap(refNameMap),
         error => {
           console.error(error)
           self.setError(error)
@@ -285,3 +285,25 @@ export const BaseChordDisplayModel = types
       )
     },
   }))
+  .views(self => ({
+    /**
+     * #method
+     */
+    async renderSvg(
+      opts: ExportSvgOptions & {
+        theme: ThemeOptions
+      },
+    ) {
+      const data = renderReactionData(self)
+      const rendering = await renderReactionEffect(
+        {
+          ...data,
+          exportSVG: opts,
+          theme: opts.theme || data.renderProps.theme,
+        },
+        undefined,
+        self,
+      )
+      return <ReactRendering rendering={rendering} />
+    },
+  }))

package/src/BaseChordDisplay/models/renderReaction.ts

@@ -27,7 +27,7 @@ export function renderReactionData(self: any) {
 export async function renderReactionEffect(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   props: any,
-  signal: AbortSignal,
+  signal: AbortSignal | undefined,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   self: any,
 ) {
@@ -41,6 +41,7 @@ export async function renderReactionEffect(
     cannotBeRenderedReason,
     renderArgs,
     renderProps,
+    exportSVG,
   } = props
 
   if (cannotBeRenderedReason) {
@@ -48,11 +49,7 @@ export async function renderReactionEffect(
   }
 
   // don't try to render 0 or NaN radius or no regions
-  if (
-    !props.renderProps.radius ||
-    !props.renderArgs.regions ||
-    !props.renderArgs.regions.length
-  ) {
+  if (!renderProps.radius || !renderArgs.regions?.length) {
     return { message: 'Skipping render' }
   }
 
@@ -66,7 +63,7 @@ export async function renderReactionEffect(
   const { html, ...data } = await rendererType.renderInClient(rpcManager, {
     ...renderArgs,
     ...renderProps,
-    signal,
+    exportSVG,
   })
 
   return {

package/src/CircularView/components/CircularView.tsx

@@ -17,17 +17,10 @@ const useStyles = makeStyles()(theme => ({
     position: 'relative',
     marginBottom: theme.spacing(1),
     overflow: 'hidden',
-    background: 'white',
   },
   scroller: {
     overflow: 'auto',
   },
-  sliceRoot: {
-    background: 'none',
-    // background: theme.palette.background.paper,
-    boxSizing: 'content-box',
-    display: 'block',
-  },
 }))
 
 const Slices = observer(({ model }: { model: CircularViewModel }) => {
@@ -36,7 +29,6 @@ const Slices = observer(({ model }: { model: CircularViewModel }) => {
       {model.staticSlices.map(slice => (
         <Ruler
           key={assembleLocString(
-            // @ts-ignore
             slice.region.elided ? slice.region.regions[0] : slice.region,
           )}
           model={model}
@@ -97,29 +89,22 @@ const CircularViewLoaded = observer(function ({
   return (
     <div className={classes.root} style={{ width, height }} data-testid={id}>
       <div className={classes.scroller} style={{ width, height }}>
-        <div
+        <svg
           style={{
-            transform: [`rotate(${offsetRadians}rad)`].join(' '),
+            transform: `rotate(${offsetRadians}rad)`,
             transition: 'transform 0.5s',
             transformOrigin: centerXY.map(x => `${x}px`).join(' '),
+            position: 'absolute',
+            left: 0,
+            top: 0,
           }}
+          width={figureWidth}
+          height={figureHeight}
         >
-          <svg
-            style={{
-              position: 'absolute',
-              left: 0,
-              top: 0,
-            }}
-            className={classes.sliceRoot}
-            width={figureWidth + 'px'}
-            height={figureHeight + 'px'}
-            version="1.1"
-          >
-            <g transform={`translate(${centerXY})`}>
-              <Slices model={model} />
-            </g>
-          </svg>
-        </div>
+          <g transform={`translate(${centerXY})`}>
+            <Slices model={model} />
+          </g>
+        </svg>
       </div>
       <Controls model={model} />
       {hideVerticalResizeHandle ? null : (

package/src/CircularView/components/Controls.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { IconButton } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { grey } from '@mui/material/colors'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
 
 // icons
 import ZoomOutIcon from '@mui/icons-material/ZoomOut'
@@ -11,96 +11,109 @@ import RotateLeftIcon from '@mui/icons-material/RotateLeft'
 import RotateRightIcon from '@mui/icons-material/RotateRight'
 import LockOpenIcon from '@mui/icons-material/LockOpen'
 import LockIcon from '@mui/icons-material/Lock'
+import PhotoCamera from '@mui/icons-material/PhotoCamera'
+import MoreVert from '@mui/icons-material/MoreVert'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 
 // locals
 import { CircularViewModel } from '../models/CircularView'
+import { getSession } from '@jbrowse/core/util'
+import ExportSvgDlg from './ExportSvgDialog'
 
-const useStyles = makeStyles()({
-  iconButton: {
-    padding: '4px',
-    margin: '0 2px 0 2px',
-  },
+const useStyles = makeStyles()(theme => ({
   controls: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
     position: 'absolute',
-    background: grey[200],
-    boxSizing: 'border-box',
-    borderRight: '1px solid #a2a2a2',
-    borderBottom: '1px solid #a2a2a2',
+    borderRight: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     left: 0,
     top: 0,
   },
-})
+}))
 
-const Controls = observer(function ({ model }: { model: CircularViewModel }) {
+export default observer(function ({ model }: { model: CircularViewModel }) {
   const { classes } = useStyles()
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   return (
     <div className={classes.controls}>
       <IconButton
         onClick={model.zoomOutButton}
-        className={classes.iconButton}
         title={model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out'}
         disabled={model.atMaxBpPerPx || model.lockedFitToWindow}
-        color="secondary"
       >
         <ZoomOutIcon />
       </IconButton>
 
       <IconButton
         onClick={model.zoomInButton}
-        className={classes.iconButton}
-        title="zoom in"
         disabled={model.atMinBpPerPx}
-        color="secondary"
+        title="zoom in"
       >
         <ZoomInIcon />
       </IconButton>
 
       <IconButton
         onClick={model.rotateCounterClockwiseButton}
-        className={classes.iconButton}
         title="rotate counter-clockwise"
-        color="secondary"
       >
         <RotateLeftIcon />
       </IconButton>
 
       <IconButton
         onClick={model.rotateClockwiseButton}
-        className={classes.iconButton}
         title="rotate clockwise"
-        color="secondary"
       >
         <RotateRightIcon />
       </IconButton>
 
       <IconButton
         onClick={model.toggleFitToWindowLock}
-        className={classes.iconButton}
         title={
           model.lockedFitToWindow
             ? 'locked model to window size'
             : 'unlocked model to zoom further'
         }
         disabled={model.tooSmallToLock}
-        color="secondary"
       >
         {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
       </IconButton>
 
+      <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
+        <MoreVert />
+      </IconButton>
+
       {model.hideTrackSelectorButton ? null : (
         <IconButton
           onClick={model.activateTrackSelector}
           title="Open track selector"
           data-testid="circular_track_select"
-          color="secondary"
         >
           <TrackSelectorIcon />
         </IconButton>
       )}
+
+      {anchorEl ? (
+        <JBrowseMenu
+          anchorEl={anchorEl}
+          menuItems={[
+            {
+              label: 'Export SVG',
+              icon: PhotoCamera,
+              onClick: () => {
+                getSession(model).queueDialog(handleClose => [
+                  ExportSvgDlg,
+                  { model, handleClose },
+                ])
+              },
+            },
+          ]}
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setAnchorEl(null)
+          }}
+          open={Boolean(anchorEl)}
+          onClose={() => setAnchorEl(null)}
+        />
+      ) : null}
     </div>
   )
 })
-export default Controls

package/src/CircularView/components/ExportSvgDialog.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Checkbox,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  FormControlLabel,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
+
+// locals
+import { ExportSvgOptions } from '../models/CircularView'
+import { getSession, useLocalStorage } from '@jbrowse/core/util'
+
+function LoadingMessage() {
+  return (
+    <div>
+      <CircularProgress size={20} style={{ marginRight: 20 }} />
+      <Typography display="inline">Creating SVG</Typography>
+    </div>
+  )
+}
+
+function useSvgLocal<T>(key: string, val: T) {
+  return useLocalStorage('svg-' + key, val)
+}
+
+export default function ExportSvgDlg({
+  model,
+  handleClose,
+}: {
+  model: { exportSvg(opts: ExportSvgOptions): Promise<void> }
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
+  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<unknown>()
+  const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
+  const [themeName, setThemeName] = useSvgLocal(
+    'theme',
+    session.themeName || 'default',
+  )
+  return (
+    <Dialog open onClose={handleClose} title="Export SVG">
+      <DialogContent>
+        {error ? (
+          <ErrorMessage error={error} />
+        ) : loading ? (
+          <LoadingMessage />
+        ) : null}
+        <TextField
+          helperText="filename"
+          value={filename}
+          onChange={event => setFilename(event.target.value)}
+        />
+        <br />
+
+        {session.allThemes ? (
+          <TextField
+            select
+            label="Theme"
+            value={themeName}
+            onChange={event => setThemeName(event.target.value)}
+          >
+            {Object.entries(session.allThemes()).map(([key, val]) => (
+              <MenuItem key={key} value={key}>
+                {
+                  // @ts-expect-error
+                  val.name || '(Unknown name)'
+                }
+              </MenuItem>
+            ))}
+          </TextField>
+        ) : null}
+        {offscreenCanvas ? (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={rasterizeLayers}
+                onChange={() => setRasterizeLayers(val => !val)}
+              />
+            }
+            label="Rasterize canvas based tracks? File may be much larger if this is turned off"
+          />
+        ) : (
+          <Typography>
+            Note: rasterizing layers not yet supported in this browser, so SVG
+            size may be large
+          </Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => handleClose()}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          onClick={async () => {
+            setLoading(true)
+            setError(undefined)
+            try {
+              await model.exportSvg({
+                rasterizeLayers,
+                filename,
+                themeName,
+              })
+              handleClose()
+            } catch (e) {
+              console.error(e)
+              setError(e)
+              setLoading(false)
+            }
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}