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