@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/src/LinearPileupDisplay/components/ColorByModifications.tsx

@@ -9,43 +9,7 @@ import {
   Typography,
 } from '@mui/material'
 import { Dialog } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()(theme => ({
-  table: {
-    border: '1px solid #888',
-    margin: theme.spacing(4),
-    '& td': {
-      padding: theme.spacing(1),
-    },
-  },
-}))
-
-function ModificationTable({
-  modifications,
-}: {
-  modifications: [string, string][]
-}) {
-  const { classes } = useStyles()
-  return (
-    <table className={classes.table}>
-      <tbody>
-        {modifications.map(([key, value]) => (
-          <tr key={key}>
-            <td>{key}</td>
-            <td>{value}</td>
-            <td
-              style={{
-                width: '1em',
-                background: value,
-              }}
-            />
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
+import ModificationTable from './ModificationsTable'
 
 function ColorByTagDlg(props: {
   model: {
@@ -84,13 +48,13 @@ function ColorByTagDlg(props: {
                   />
                 </>
               ) : (
-                <div>
+                <>
                   <Typography>
                     Note: color by modifications is already enabled. Loading
                     current modifications...
                   </Typography>
                   <CircularProgress size={15} />
-                </div>
+                </>
               )}
             </div>
           ) : null}

package/src/LinearPileupDisplay/components/ColorByTag.tsx

@@ -32,22 +32,17 @@ function ColorByTagDlg(props: {
           placeholder="Enter tag name"
           inputProps={{
             maxLength: 2,
-            'data-testid': 'color-tag-name-input',
           }}
           error={tag.length === 2 && !validTag}
           helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
           autoComplete="off"
-          data-testid="color-tag-name"
         />
         <DialogActions>
           <Button
             variant="contained"
             color="primary"
             onClick={() => {
-              model.setColorScheme({
-                type: 'tag',
-                tag,
-              })
+              model.setColorScheme({ type: 'tag', tag })
               handleClose()
             }}
             disabled={!validTag}

package/src/LinearPileupDisplay/components/LinearPileupDisplayBlurb.tsx

@@ -8,26 +8,25 @@ export interface LinearPileupDisplayBlurbProps {
       pos: number
       refName: number
       type: string
+      tag?: string
     }
   }
 }
 
-function LinearPileupDisplayBlurb(props: LinearPileupDisplayBlurbProps) {
+export default observer(function LinearPileupDisplayBlurb(
+  props: LinearPileupDisplayBlurbProps,
+) {
   const { model } = props
   const { sortedBy } = model
   return sortedBy ? (
-    <div
-      data-testid={`blurb-${model.sortedBy}`}
-      style={{ backgroundColor: 'white' }}
-    >
+    <div data-testid={`blurb-${sortedBy}`}>
       <Typography color="secondary" variant="caption">
-        {model.sortedBy
-          ? `Sorted by ${sortedBy.type.toLowerCase()} at ${sortedBy.refName}:${
-              sortedBy.pos
-            }`
+        {sortedBy
+          ? `Sorted by ${sortedBy.tag ?? sortedBy.type} at ${
+              sortedBy.refName
+            }:${sortedBy.pos}`
           : null}
       </Typography>
     </div>
   ) : null
-}
-export default observer(LinearPileupDisplayBlurb)
+})

package/src/LinearPileupDisplay/components/ModificationsTable.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(theme => ({
+  table: {
+    border: '1px solid #888',
+    margin: theme.spacing(4),
+    '& td': {
+      padding: theme.spacing(1),
+    },
+  },
+}))
+
+export default function ModificationTable({
+  modifications,
+}: {
+  modifications: [string, string | undefined][]
+}) {
+  const { classes } = useStyles()
+  return (
+    <table className={classes.table}>
+      <tbody>
+        {modifications.map(([key, value]) => (
+          <tr key={key}>
+            <td>{key}</td>
+            <td>{value}</td>
+            <td
+              style={{
+                width: '1em',
+                background: value,
+              }}
+            />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/src/LinearPileupDisplay/components/SetMaxHeight.tsx

@@ -10,11 +10,11 @@ import {
 import { Dialog } from '@jbrowse/core/ui'
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
   root: {
     width: 500,
   },
-}))
+})
 
 function SetMaxHeightDlg(props: {
   model: {
@@ -37,9 +37,7 @@ function SetMaxHeightDlg(props: {
         </Typography>
         <TextField
           value={max}
-          onChange={event => {
-            setMax(event.target.value)
-          }}
+          onChange={event => setMax(event.target.value)}
           placeholder="Enter max height for layout"
         />
         <DialogActions>