Allow getting stack trace from track errors (#4255)

packages/core/ui/ErrorMessageStackTraceDialog.tsx

@@ -88,6 +88,42 @@ function stripMessage(trace: string, error: unknown) {
   }
 }
 
+function Contents({ text }: { text: string }) {
+  const err = encodeURIComponent(
+    'I got this error from JBrowse, here is the stack trace:\n\n```\n' +
+      text +
+      '\n```\n',
+  )
+  const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`
+  const emailLink = `mailto:jbrowse2dev@gmail.com?subject=JBrowse%202%20error&body=${err}`
+
+  return (
+    <>
+      <Typography>
+        Post a new issue at{' '}
+        <Link href={githubLink} target="_blank">
+          GitHub
+        </Link>{' '}
+        or send an email to{' '}
+        <Link href={emailLink} target="_blank">
+          jbrowse2dev@gmail.com
+        </Link>{' '}
+      </Typography>
+      <pre
+        style={{
+          background: 'lightgrey',
+          border: '1px solid black',
+          overflow: 'auto',
+          margin: 20,
+          maxHeight: 300,
+        }}
+      >
+        {text}
+      </pre>
+    </>
+  )
+}
+
 export default function ErrorMessageStackTraceDialog({
   error,
   onClose,
@@ -128,42 +164,13 @@ export default function ErrorMessageStackTraceDialog({
     window.JBrowseSession ? `JBrowse ${window.JBrowseSession.version}` : '',
   ].join('\n')
 
-  const err = encodeURIComponent(
-    'I got this error from JBrowse, here is the stack trace:\n\n```\n' +
-      errorBoxText +
-      '\n```\n',
-  )
-  const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`
-  const emailLink = `mailto:jbrowse2dev@gmail.com?subject=JBrowse%202%20error&body=${err}`
   return (
     <Dialog open onClose={onClose} title="Stack trace" maxWidth="xl">
       <DialogContent>
         {mappedStackTrace === undefined ? (
           <LoadingEllipses variant="h6" />
         ) : (
-          <>
-            <Typography>
-              Post a new issue at{' '}
-              <Link href={githubLink} target="_blank">
-                GitHub
-              </Link>{' '}
-              or send an email to{' '}
-              <Link href={emailLink} target="_blank">
-                jbrowse2dev@gmail.com
-              </Link>{' '}
-            </Typography>
-            <pre
-              style={{
-                background: 'lightgrey',
-                border: '1px solid black',
-                overflow: 'auto',
-                margin: 20,
-                maxHeight: 300,
-              }}
-            >
-              {errorBoxText}
-            </pre>
-          </>
+          <Contents text={errorBoxText} />
         )}
       </DialogContent>
       <DialogActions>

packages/product-core/src/ui/FileInfoPanel.tsx

@@ -1,15 +1,14 @@
 import React, { useState, useEffect } from 'react'
-import { Typography } from '@mui/material'
 import {
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
-import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses'
 import { getSession } from '@jbrowse/core/util'
 import {
   BaseCard,
   Attributes,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 
 type FileInfo = Record<string, unknown> | string
 
@@ -24,32 +23,19 @@ export default function FileInfoPanel({
   const { rpcManager } = session
 
   useEffect(() => {
-    const aborter = new AbortController()
-    const { signal } = aborter
-    let cancelled = false
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
         const adapterConfig = readConfObject(config, 'adapter')
         const result = await rpcManager.call(config.trackId, 'CoreGetInfo', {
           adapterConfig,
-          signal,
         })
-        if (!cancelled) {
-          setInfo(result as FileInfo)
-        }
+        setInfo(result as FileInfo)
       } catch (e) {
-        if (!cancelled) {
-          console.error(e)
-          setError(e)
-        }
+        console.error(e)
+        setError(e)
       }
     })()
-
-    return () => {
-      aborter.abort()
-      cancelled = true
-    }
   }, [config, rpcManager])
 
   const details =
@@ -64,7 +50,7 @@ export default function FileInfoPanel({
   return info !== null ? (
     <BaseCard title="File info">
       {error ? (
-        <Typography color="error">{`${error}`}</Typography>
+        <ErrorMessage error={error} />
       ) : info === undefined ? (
         <LoadingEllipses message="Loading file data" />
       ) : (

plugins/alignments/src/shared/BaseDisplayComponent.tsx

@@ -6,11 +6,12 @@ import {
 } from '@jbrowse/plugin-linear-genome-view'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
+import { getContainingView } from '@jbrowse/core/util'
+import { Button, Tooltip } from '@mui/material'
 
 // local
 import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model'
 import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model'
-import { getContainingView } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()(theme => ({
   loading: {
@@ -38,8 +39,13 @@ const BaseDisplayComponent = observer(function ({
     <BlockMsg
       message={`${error}`}
       severity="error"
-      buttonText="Reload"
-      action={model.reload}
+      action={
+        <Tooltip title="Reload">
+          <Button data-testid="reload_button" onClick={() => model.reload()}>
+            Reload
+          </Button>
+        </Tooltip>
+      }
     />
   ) : regionTooLarge ? (
     model.regionCannotBeRendered()

plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { lazy } from 'react'
+import { IconButton, Tooltip } from '@mui/material'
 import { LoadingEllipses } from '@jbrowse/core/ui'
 import { BlockMsg } from '@jbrowse/plugin-linear-genome-view'
 import { makeStyles } from 'tss-react/mui'
@@ -7,6 +8,16 @@ import { observer } from 'mobx-react'
 // local
 import { LinearArcDisplayModel } from '../model'
 
+// icons
+import RefreshIcon from '@mui/icons-material/Refresh'
+import ReportIcon from '@mui/icons-material/Report'
+
+import { getSession } from '@jbrowse/core/util'
+
+const ErrorMessageStackTraceDialog = lazy(
+  () => import('@jbrowse/core/ui/ErrorMessageStackTraceDialog'),
+)
+
 const useStyles = makeStyles()(theme => ({
   loading: {
     backgroundColor: theme.palette.background.default,
@@ -33,8 +44,30 @@ const BaseDisplayComponent = observer(function ({
     <BlockMsg
       message={`${error}`}
       severity="error"
-      buttonText="Reload"
-      action={model.reload}
+      action={
+        <>
+          <Tooltip title="Reload">
+            <IconButton
+              data-testid="reload_button"
+              onClick={() => model.reload()}
+            >
+              <RefreshIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Show stack trace">
+            <IconButton
+              onClick={() => {
+                getSession(model).queueDialog(onClose => [
+                  ErrorMessageStackTraceDialog,
+                  { onClose, error: model.error as Error },
+                ])
+              }}
+            >
+              <ReportIcon />
+            </IconButton>
+          </Tooltip>
+        </>
+      }
     />
   ) : regionTooLarge ? (
     model.regionCannotBeRendered()

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.tsx

@@ -26,6 +26,16 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
+function DisabledButton() {
+  return (
+    <Tooltip title="Unable to delete connection in config file as non-admin user">
+      <IconButton>
+        <CloseIcon color="disabled" />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
 const ManageConnectionsDialog = observer(function ({
   session,
   handleClose,
@@ -53,11 +63,7 @@ const ManageConnectionsDialog = observer(function ({
                     <CloseIcon color="error" />
                   </IconButton>
                 ) : (
-                  <Tooltip title="Unable to delete connection in config file as non-admin user">
-                    <IconButton>
-                      <CloseIcon color="disabled" />
-                    </IconButton>
-                  </Tooltip>
+                  <DisabledButton />
                 )}
                 {name}
               </Typography>

plugins/linear-genome-view/src/BaseLinearDisplay/components/BlockMsg.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Tooltip, Button, Alert, AlertColor } from '@mui/material'
+import { Tooltip, Alert, AlertColor } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()({
@@ -12,26 +12,17 @@ const useStyles = makeStyles()({
 export default function BlockMsg({
   message,
   severity,
-  buttonText,
-  icon,
   action,
 }: {
   message: string
   severity?: AlertColor
-  buttonText?: string
-  icon?: React.ReactNode
-  action?: () => void
+  action?: React.ReactNode
 }) {
   const { classes } = useStyles()
-  const button = action ? (
-    <Button data-testid="reload_button" onClick={action} startIcon={icon}>
-      {buttonText}
-    </Button>
-  ) : null
   return (
     <Alert
       severity={severity}
-      action={button}
+      action={action}
       classes={{ message: classes.ellipses }}
     >
       <Tooltip title={message}>

plugins/linear-genome-view/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -58,10 +58,10 @@ const RenderedBlocks = observer(function ({
               block={block}
               key={`${model.id}-${block.key}`}
             >
-              {state && state.ReactComponent ? (
+              {state?.ReactComponent ? (
                 <state.ReactComponent model={state} />
               ) : null}
-              {state && state.maxHeightReached ? (
+              {state?.maxHeightReached ? (
                 <div
                   className={classes.heightOverflowed}
                   style={{