Add error message suggesting aliases if no matching refName found

packages/core/data_adapters/BaseAdapter.ts

@@ -3,6 +3,7 @@ import { toArray } from 'rxjs/operators'
 import { isStateTreeNode, getSnapshot } from 'mobx-state-tree'
 import { ObservableCreate } from '../util/rxjs'
 import { checkAbortSignal } from '../util'
+import { FeatureError } from '../util/types'
 import { Feature } from '../util/simpleFeature'
 import {
   readConfObject,
@@ -168,7 +169,12 @@ export abstract class BaseFeatureDataAdapter extends BaseAdapter {
       const hasData = await this.hasDataForRefName(region.refName, opts)
       checkAbortSignal(opts.signal)
       if (!hasData) {
-        observer.complete()
+        observer.error(
+          new FeatureError(
+            `refName "${region.refName}" not found. You may need to configure refName aliases.`,
+            'info',
+          ),
+        )
       } else {
         this.getFeatures(region, opts).subscribe(observer)
       }
@@ -208,6 +214,11 @@ export abstract class BaseFeatureDataAdapter extends BaseAdapter {
    */
   public async hasDataForRefName(refName: string, opts: BaseOptions = {}) {
     const refNames = await this.getRefNames(opts)
+    // If refNames are not available, fall back to `true` since `false` may
+    // cause errors even if a refName is available
+    if (!refNames.length) {
+      return true
+    }
     return refNames.includes(refName)
   }
 

packages/core/pluggableElementTypes/renderers/FeatureRendererType.ts

@@ -171,7 +171,7 @@ export default class FeatureRendererType extends ServerSideRendererType {
 
     const featureObservable =
       requestRegions.length === 1
-        ? dataAdapter.getFeatures(
+        ? dataAdapter.getFeaturesInRegion(
             this.getExpandedRegion(region, renderArgs),
             renderArgs,
           )

packages/core/util/types/index.ts

@@ -400,6 +400,20 @@ export function isRetryException(exception: Error): boolean {
   )
 }
 
+export class FeatureError extends Error {
+  constructor(
+    public message: string,
+    public severity: 'error' | 'warning' | 'info' = 'error',
+  ) {
+    super(message)
+    this.name = 'FeatureError'
+  }
+}
+
+export function isFeatureError(error: Error): error is FeatureError {
+  return error.name === 'FeatureError'
+}
+
 export interface BlobLocation extends SnapshotIn<typeof MUBlobLocation> {}
 
 export type FileLocation = LocalPathLocation | UriLocation | BlobLocation

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { Typography, Button } from '@mui/material'
+import { Typography, Button, Alert, Stack } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
+import { isFeatureError } from '@jbrowse/core/util/types'
 import RefreshIcon from '@mui/icons-material/Refresh'
 
 const useStyles = makeStyles()(theme => ({
@@ -18,24 +19,8 @@ const useStyles = makeStyles()(theme => ({
     textAlign: 'center',
   },
   blockMessage: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    padding: theme.spacing(2),
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-  blockError: {
-    padding: theme.spacing(2),
-    width: '100%',
+    margin: theme.spacing(2),
     whiteSpace: 'normal',
-    color: theme.palette.error.main,
-    overflowY: 'auto',
-  },
-  blockReactNodeMessage: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    padding: theme.spacing(2),
-    textAlign: 'center',
   },
   dots: {
     '&::after': {
@@ -61,10 +46,10 @@ const useStyles = makeStyles()(theme => ({
 
 function Repeater({ children }: { children: React.ReactNode }) {
   return (
-    <div style={{ display: 'flex' }}>
-      {children}
-      {children}
-    </div>
+    <Stack direction="row">
+      <div style={{ width: '50%' }}>{children}</div>
+      <div style={{ width: '50%' }}>{children}</div>
+    </Stack>
   )
 }
 
@@ -110,12 +95,14 @@ function BlockMessage({
 }) {
   const { classes } = useStyles()
 
-  return React.isValidElement(messageContent) ? (
-    <div className={classes.blockReactNodeMessage}>{messageContent}</div>
-  ) : (
-    <Typography variant="body2" className={classes.blockMessage}>
-      {messageContent}
-    </Typography>
+  return (
+    <div className={classes.blockMessage}>
+      {React.isValidElement(messageContent) ? (
+        messageContent
+      ) : (
+        <Alert severity="info">{messageContent}</Alert>
+      )}
+    </div>
   )
 }
 
@@ -130,19 +117,23 @@ function BlockError({
 }) {
   const { classes } = useStyles()
   return (
-    <div className={classes.blockError} style={{ height: displayHeight }}>
-      {reload ? (
-        <Button
-          data-testid="reload_button"
-          onClick={reload}
-          startIcon={<RefreshIcon />}
-        >
-          Reload
-        </Button>
-      ) : null}
-      <Typography color="error" variant="body2" display="inline">
-        {`${error}`}
-      </Typography>
+    <div className={classes.blockMessage}>
+      <Alert
+        severity={isFeatureError(error) ? error.severity : 'error'}
+        action={
+          !isFeatureError(error) || error.severity === 'error' ? (
+            <Button
+              data-testid="reload_button"
+              onClick={reload}
+              startIcon={<RefreshIcon />}
+            >
+              Reload
+            </Button>
+          ) : null
+        }
+      >
+        {error.message}
+      </Alert>
     </div>
   )
 }

plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
-import { Button, Typography } from '@mui/material'
+import { Alert, Button } from '@mui/material'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { MenuItem } from '@jbrowse/core/ui'
@@ -502,29 +502,27 @@ export const BaseLinearDisplay = types
 
       if (regionTooLarge) {
         return (
-          <>
-            <Typography component="span" variant="body2">
-              {regionTooLargeReason ? regionTooLargeReason + '. ' : ''}
-              Zoom in to see features or{' '}
-            </Typography>
-            <Button
-              data-testid="force_reload_button"
-              onClick={() => {
-                if (!self.estimatedRegionStats) {
-                  console.error('No global stats?')
-                } else {
-                  self.updateStatsLimit(self.estimatedRegionStats)
-                  self.reload()
-                }
-              }}
-              variant="outlined"
-            >
-              Force Load
-            </Button>
-            <Typography component="span" variant="body2">
-              (force load may be slow)
-            </Typography>
-          </>
+          <Alert
+            severity="warning"
+            action={
+              <Button
+                data-testid="force_reload_button"
+                onClick={() => {
+                  if (!self.estimatedRegionStats) {
+                    console.error('No global stats?')
+                  } else {
+                    self.updateStatsLimit(self.estimatedRegionStats)
+                    self.reload()
+                  }
+                }}
+              >
+                Force Load
+              </Button>
+            }
+          >
+            {regionTooLargeReason ? regionTooLargeReason + '. ' : ''}
+            Zoom in to see features or force load (may be slow).
+          </Alert>
         )
       }
       return undefined

plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -524,8 +524,15 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                 style="width: 100px;"
               >
                 <div
-                  style="display: flex;"
-                />
+                  class="css-m69qwo-MuiStack-root"
+                >
+                  <div
+                    style="width: 50%;"
+                  />
+                  <div
+                    style="width: 50%;"
+                  />
+                </div>
               </div>
               <div
                 class="tss-a9ifge-boundaryPaddingBlock"

products/jbrowse-web/src/tests/ErrorConditions.test.tsx

@@ -20,7 +20,7 @@ test('wrong assembly', async () => {
   const { view, findAllByText } = createView()
   view.showTrack('volvox_wrong_assembly')
   await findAllByText(
-    'Error: region assembly (volvox) does not match track assemblies (wombat)',
+    'region assembly (volvox) does not match track assemblies (wombat)',
     {},
     delay,
   )