@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
55 lines (54 loc) • 4.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
import { getSession, useLocalStorage } from '@jbrowse/core/util';
import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
function LoadingMessage() {
return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsx(Typography, { display: "inline", children: "Creating SVG" })] }));
}
function useSvgLocal(key, val) {
return useLocalStorage(`svg-${key}`, val);
}
function TextField2({ children, ...rest }) {
return (_jsx("div", { children: _jsx(TextField, { ...rest, children: children }) }));
}
export default function ExportSvgDialog({ model, handleClose, }) {
const session = getSession(model);
const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset');
const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, {})) : null, _jsx(TextField2, { helperText: "filename", value: filename, onChange: event => {
setFilename(event.target.value);
} }), _jsxs(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
setTrackLabels(event.target.value);
}, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
setThemeName(event.target.value);
}, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
setRasterizeLayers(val => !val);
} }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (_jsx(Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
handleClose();
}, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
setLoading(true);
setError(undefined);
try {
await model.exportSvg({
rasterizeLayers,
filename,
trackLabels,
themeName,
});
handleClose();
}
catch (e) {
console.error(e);
setError(e);
}
finally {
setLoading(false);
}
}, children: "Submit" })] })] }));
}