Use Alert component for track messages

GMOD · Sep 20, 2022 · ea59fda · ea59fda
1 parent 8558ac6
commit ea59fda
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 68 deletions.
diff --git a/...ns/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx b/...ns/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx
@@ -1,5 +1,5 @@
 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'
@@ -18,24 +18,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 +45,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 +94,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 +116,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="error"
+        action={
+          reload ? (
+            <Button
+              data-testid="reload_button"
+              onClick={reload}
+              startIcon={<RefreshIcon />}
+            >
+              Reload
+            </Button>
+          ) : null
+        }
+      >
+        {error.message}
+      </Alert>
     </div>
   )
 }

diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx b/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

diff --git a/...r-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/...r-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"

diff --git a/products/jbrowse-web/src/tests/ErrorConditions.test.tsx b/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,
   )