@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
71 lines (70 loc) • 5.71 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, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
function LoadingMessage({ format }) {
return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsxs(Typography, { display: "inline", children: ["Creating ", format.toUpperCase()] })] }));
}
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 [showGridlines, setShowGridlines] = useSvgLocal('gridlines', false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const [format, setFormat] = useSvgLocal('format', 'svg');
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 image", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, { format: format })) : null, _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(TextField, { helperText: "filename", value: filename, onChange: event => {
setFilename(event.target.value);
} }), _jsxs(ToggleButtonGroup, { value: format, exclusive: true, onChange: (_event, value) => {
if (value) {
setFormat(value);
if (filename.endsWith('.svg') && value === 'png') {
setFilename(filename.replace(/\.svg$/, '.png'));
}
else if (filename.endsWith('.png') && value === 'svg') {
setFilename(filename.replace(/\.png$/, '.svg'));
}
}
}, size: "small", children: [_jsx(ToggleButton, { value: "svg", children: "SVG" }), _jsx(ToggleButton, { value: "png", children: "PNG" })] })] }), _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, _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: showGridlines, onChange: () => {
setShowGridlines(val => !val);
} }), label: "Show gridlines" }), 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,
format,
filename,
trackLabels,
themeName,
showGridlines,
});
handleClose();
}
catch (e) {
console.error(e);
setError(e);
}
finally {
setLoading(false);
}
}, children: "Submit" })] })] }));
}