@jbrowse/core 3.4.0 → 3.5.0

package/ui/Dialog.d.ts

@@ -1,6 +1,7 @@
 import type { DialogProps } from '@mui/material';
 interface Props extends DialogProps {
     header?: React.ReactNode;
+    titleNode?: React.ReactNode;
 }
 declare const Dialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/ui/Dialog.js

@@ -19,15 +19,21 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         top: theme.spacing(1),
         color: theme.palette.grey[500],
     },
+    errorBox: {
+        width: 800,
+        margin: 40,
+    },
 }));
 function DialogError({ error }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 800, margin: 40 }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.errorBox, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
 }
 const Dialog = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
-    const { title, header, children, onClose } = props;
+    const { titleNode, ...rest } = props;
+    const { title, header, children, onClose } = rest;
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...rest, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [titleNode || (0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
                                 onClose();
                             }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
                             components: {

package/ui/ErrorMessageStackTraceDialog.js

@@ -11,10 +11,8 @@ const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const source_map_js_1 = require("source-map-js");
 const mui_1 = require("tss-react/mui");
 const Dialog_1 = __importDefault(require("./Dialog"));
+const ExternalLink_1 = __importDefault(require("./ExternalLink"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
-function Link2({ href, children, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Link, { target: "_blank", href: href, children: children }));
-}
 async function myfetch(uri) {
     const res = await fetch(uri);
     if (!res.ok) {
@@ -106,7 +104,7 @@ function Contents({ text, extra }) {
     const email = 'jbrowse2@berkeley.edu';
     const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`;
     const emailLink = `mailto:${email}?subject=JBrowse%202%20error&body=${err}`;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at ", (0, jsx_runtime_1.jsx)(Link2, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(Link2, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at", ' ', (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
 }
 function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const [mappedStackTrace, setMappedStackTrace] = (0, react_1.useState)();

package/ui/ExternalLink.d.ts

@@ -0,0 +1,2 @@
+import type { LinkProps } from '@mui/material';
+export default function ExternalLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;

package/ui/ExternalLink.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ExternalLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OpenInNew_1 = __importDefault(require("@mui/icons-material/OpenInNew"));
+const material_1 = require("@mui/material");
+function ExternalLink(props) {
+    const { children, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Link, { ...rest, target: "_blank", rel: "noopener noreferrer", children: [children, " ", (0, jsx_runtime_1.jsx)(OpenInNew_1.default, { fontSize: "small" })] }));
+}

package/ui/index.d.ts

@@ -12,6 +12,7 @@ export { default as LoadingEllipses } from './LoadingEllipses';
 export { default as Menu } from './Menu';
 export { default as PrerenderedCanvas } from './PrerenderedCanvas';
 export { default as ResizeHandle } from './ResizeHandle';
+export { default as ExternalLink } from './ExternalLink';
 export { default as SanitizedHTML } from './SanitizedHTML';
 export { default as BaseTooltip } from './BaseTooltip';
 export * from './Menu';

package/ui/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VIEW_HEADER_HEIGHT = exports.BaseTooltip = exports.SanitizedHTML = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
+exports.VIEW_HEADER_HEIGHT = exports.BaseTooltip = exports.SanitizedHTML = exports.ExternalLink = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
 __exportStar(require("./theme"), exports);
 var Logo_1 = require("./Logo");
 Object.defineProperty(exports, "LogoFull", { enumerable: true, get: function () { return Logo_1.LogoFull; } });
@@ -46,6 +46,8 @@ var PrerenderedCanvas_1 = require("./PrerenderedCanvas");
 Object.defineProperty(exports, "PrerenderedCanvas", { enumerable: true, get: function () { return __importDefault(PrerenderedCanvas_1).default; } });
 var ResizeHandle_1 = require("./ResizeHandle");
 Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return __importDefault(ResizeHandle_1).default; } });
+var ExternalLink_1 = require("./ExternalLink");
+Object.defineProperty(exports, "ExternalLink", { enumerable: true, get: function () { return __importDefault(ExternalLink_1).default; } });
 var SanitizedHTML_1 = require("./SanitizedHTML");
 Object.defineProperty(exports, "SanitizedHTML", { enumerable: true, get: function () { return __importDefault(SanitizedHTML_1).default; } });
 var BaseTooltip_1 = require("./BaseTooltip");