diff --git a/plugins/menus/src/SessionManager/components/AutosavedSessionsList.tsx b/plugins/menus/src/SessionManager/components/AutosavedSessionsList.tsx
new file mode 100644
index 0000000000..a14ef744d1
--- /dev/null
+++ b/plugins/menus/src/SessionManager/components/AutosavedSessionsList.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { List, ListSubheader, Paper } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import { observer } from 'mobx-react'
+
+// icons
+import { SessionModel, SessionSnap } from './util'
+import SessionListItem from './SessionListItem'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    margin: theme.spacing(1),
+  },
+}))
+
+const AutosaveSessionsList = observer(function ({
+  session,
+}: {
+  session: SessionModel
+}) {
+  const { classes } = useStyles()
+  const autosavedSession = JSON.parse(
+    localStorage.getItem(session.previousAutosaveId) || '{}',
+  ).session as SessionSnap
+
+  return autosavedSession ? (
+    <Paper className={classes.root}>
+      <List subheader={<ListSubheader>Previous autosaved entry</ListSubheader>}>
+        <SessionListItem
+          session={session}
+          sessionSnapshot={autosavedSession}
+          onClick={() => session.loadAutosaveSession()}
+        />
+      </List>
+    </Paper>
+  ) : null
+})
+
+export default AutosaveSessionsList
diff --git a/plugins/menus/src/SessionManager/components/DeleteDialog.tsx b/plugins/menus/src/SessionManager/components/DeleteSavedSessionDialog.tsx
similarity index 64%
rename from plugins/menus/src/SessionManager/components/DeleteDialog.tsx
rename to plugins/menus/src/SessionManager/components/DeleteSavedSessionDialog.tsx
index f743a9d65f..c9f59c2649 100644
--- a/plugins/menus/src/SessionManager/components/DeleteDialog.tsx
+++ b/plugins/menus/src/SessionManager/components/DeleteSavedSessionDialog.tsx
@@ -7,7 +7,7 @@ import {
 } from '@mui/material'
 import { Dialog } from '@jbrowse/core/ui'
 
-export default function DeleteDialog({
+export default function DeleteSavedSessionDialog({
   open,
   sessionNameToDelete,
   handleClose,
@@ -17,16 +17,9 @@ export default function DeleteDialog({
   handleClose: (arg?: boolean) => void
 }) {
   return (
-    <Dialog
-      open={open}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-      title={`Delete session "${sessionNameToDelete}"?`}
-    >
+    <Dialog open={open} title={`Delete session "${sessionNameToDelete}"?`}>
       <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          This action cannot be undone
-        </DialogContentText>
+        <DialogContentText>This action cannot be undone</DialogContentText>
       </DialogContent>
       <DialogActions>
         <Button onClick={() => handleClose()} color="primary">
diff --git a/plugins/menus/src/SessionManager/components/RegularSavedSessionsList.tsx b/plugins/menus/src/SessionManager/components/RegularSavedSessionsList.tsx
new file mode 100644
index 0000000000..7f60f25d52
--- /dev/null
+++ b/plugins/menus/src/SessionManager/components/RegularSavedSessionsList.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import {
+  IconButton,
+  List,
+  ListSubheader,
+  Paper,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import { observer } from 'mobx-react'
+
+// icons
+import DeleteIcon from '@mui/icons-material/Delete'
+
+// locals
+import { SessionModel } from './util'
+import DeleteSavedSessionDialog from './DeleteSavedSessionDialog'
+import SessionListItem from './SessionListItem'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    margin: theme.spacing(1),
+  },
+  message: {
+    padding: theme.spacing(3),
+  },
+}))
+
+const RegularSavedSessionsList = observer(function ({
+  session,
+}: {
+  session: SessionModel
+}) {
+  const { classes } = useStyles()
+  const [sessionIndexToDelete, setSessionIndexToDelete] = useState<number>()
+
+  function handleDialogClose(deleteSession = false) {
+    if (deleteSession && sessionIndexToDelete !== undefined) {
+      session.removeSavedSession(session.savedSessions[sessionIndexToDelete])
+    }
+    setSessionIndexToDelete(undefined)
+  }
+
+  const sessionNameToDelete =
+    sessionIndexToDelete !== undefined
+      ? session.savedSessions[sessionIndexToDelete].name
+      : ''
+  return (
+    <Paper className={classes.root}>
+      <List subheader={<ListSubheader>Saved sessions</ListSubheader>}>
+        {session.savedSessions.length ? (
+          session.savedSessions.map((sessionSnapshot, idx) => (
+            <SessionListItem
+              onClick={() => session.activateSession(sessionSnapshot.name)}
+              sessionSnapshot={sessionSnapshot}
+              session={session}
+              key={sessionSnapshot.name}
+              secondaryAction={
+                <IconButton
+                  edge="end"
+                  disabled={session.name === sessionSnapshot.name}
+                  onClick={() => setSessionIndexToDelete(idx)}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              }
+            />
+          ))
+        ) : (
+          <Typography className={classes.message}>
+            No saved sessions found
+          </Typography>
+        )}
+      </List>
+      {sessionNameToDelete ? (
+        <React.Suspense fallback={null}>
+          <DeleteSavedSessionDialog
+            open
+            sessionNameToDelete={sessionNameToDelete}
+            handleClose={handleDialogClose}
+          />
+        </React.Suspense>
+      ) : null}
+    </Paper>
+  )
+})
+
+export default RegularSavedSessionsList
diff --git a/plugins/menus/src/SessionManager/components/SessionListItem.tsx b/plugins/menus/src/SessionManager/components/SessionListItem.tsx
new file mode 100644
index 0000000000..5610603c88
--- /dev/null
+++ b/plugins/menus/src/SessionManager/components/SessionListItem.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material'
+
+import { observer } from 'mobx-react'
+import pluralize from 'pluralize'
+
+// icons
+import ViewListIcon from '@mui/icons-material/ViewList'
+import { AbstractSessionModel, sum } from '@jbrowse/core/util'
+
+// locals
+import { SessionSnap } from './util'
+
+const SessionListItem = observer(function ({
+  session,
+  sessionSnapshot,
+  onClick,
+  secondaryAction,
+}: {
+  sessionSnapshot: SessionSnap
+  session: AbstractSessionModel
+  onClick: () => void
+  secondaryAction?: React.ReactNode
+}) {
+  const { views = [] } = sessionSnapshot || {}
+  const totalTracks = sum(views.map(view => view.tracks?.length ?? 0))
+  const n = views.length
+
+  return (
+    <ListItem secondaryAction={secondaryAction}>
+      <ListItemButton onClick={onClick}>
+        <ListItemIcon>
+          <ViewListIcon />
+        </ListItemIcon>
+        <ListItemText
+          primary={sessionSnapshot.name}
+          secondary={
+            session.name === sessionSnapshot.name
+              ? 'Currently open'
+              : `${n} ${pluralize('view', n)}; ${totalTracks} open ${pluralize(
+                  'track',
+                  totalTracks,
+                )}`
+          }
+        />
+      </ListItemButton>
+    </ListItem>
+  )
+})
+
+export default SessionListItem
diff --git a/plugins/menus/src/SessionManager/components/SessionManager.tsx b/plugins/menus/src/SessionManager/components/SessionManager.tsx
index 622ede1b52..534e0370cd 100644
--- a/plugins/menus/src/SessionManager/components/SessionManager.tsx
+++ b/plugins/menus/src/SessionManager/components/SessionManager.tsx
@@ -1,164 +1,20 @@
-import React, { useState } from 'react'
-import {
-  IconButton,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  ListSubheader,
-  Paper,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
+import React from 'react'
 import { observer } from 'mobx-react'
-import pluralize from 'pluralize'
-import { AbstractSessionModel } from '@jbrowse/core/util'
 
 // icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import ViewListIcon from '@mui/icons-material/ViewList'
-import DeleteDialog from './DeleteDialog'
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    margin: theme.spacing(1),
-  },
-  message: {
-    padding: theme.spacing(3),
-  },
-}))
-
-interface SessionSnap {
-  name: string
-  views?: { tracks: unknown[] }[]
-  [key: string]: unknown
-}
-
-interface SessionModel extends AbstractSessionModel {
-  savedSessions: SessionSnap[]
-  removeSavedSession: (arg: SessionSnap) => void
-  activateSession: (arg: string) => void
-  loadAutosaveSession: () => void
-  previousAutosaveId: string
-}
-
-const AutosaveEntry = observer(({ session }: { session: SessionModel }) => {
-  const { classes } = useStyles()
-  const autosavedSession = JSON.parse(
-    localStorage.getItem(session.previousAutosaveId) || '{}',
-  ).session as SessionSnap
-
-  const { views = [] } = autosavedSession || {}
-  const totalTracks = views
-    .map(view => view.tracks.length)
-    .reduce((a, b) => a + b, 0)
-
-  return autosavedSession ? (
-    <Paper className={classes.root}>
-      <List subheader={<ListSubheader>Previous autosaved entry</ListSubheader>}>
-        <ListItem button onClick={() => session.loadAutosaveSession()}>
-          <ListItemIcon>
-            <ViewListIcon />
-          </ListItemIcon>
-          <ListItemText
-            primary={autosavedSession.name}
-            secondary={
-              session.name === autosavedSession.name
-                ? 'Currently open'
-                : `${views.length} ${pluralize(
-                    'view',
-                    views.length,
-                  )}; ${totalTracks}
-                           open ${pluralize('track', totalTracks)}`
-            }
-          />
-        </ListItem>
-      </List>
-    </Paper>
-  ) : null
-})
-
-const SessionManager = observer(({ session }: { session: SessionModel }) => {
-  const { classes } = useStyles()
-  const [sessionIndexToDelete, setSessionIndexToDelete] = useState<number>()
-  const [open, setOpen] = useState(false)
-
-  function handleDialogClose(deleteSession = false) {
-    if (deleteSession && sessionIndexToDelete !== undefined) {
-      session.removeSavedSession(session.savedSessions[sessionIndexToDelete])
-    }
-    setSessionIndexToDelete(undefined)
-    setOpen(false)
-  }
-
-  const sessionNameToDelete =
-    sessionIndexToDelete !== undefined
-      ? session.savedSessions[sessionIndexToDelete].name
-      : ''
-
+import { SessionModel } from './util'
+import AutosaveSessionsList from './AutosavedSessionsList'
+import RegularSavedSessionsList from './RegularSavedSessionsList'
+
+const SessionManager = observer(function ({
+  session,
+}: {
+  session: SessionModel
+}) {
   return (
     <>
-      <AutosaveEntry session={session} />
-      <Paper className={classes.root}>
-        <List subheader={<ListSubheader>Saved sessions</ListSubheader>}>
-          {session.savedSessions.length ? (
-            session.savedSessions.map((sessionSnapshot, idx) => {
-              const { views = [] } = sessionSnapshot
-              const totalTracks = views
-                .map(view => view.tracks.length)
-                .reduce((a, b) => a + b, 0)
-              return (
-                <ListItem
-                  button
-                  disabled={session.name === sessionSnapshot.name}
-                  onClick={() => session.activateSession(sessionSnapshot.name)}
-                  key={sessionSnapshot.name}
-                >
-                  <ListItemIcon>
-                    <ViewListIcon />
-                  </ListItemIcon>
-                  <ListItemText
-                    primary={sessionSnapshot.name}
-                    secondary={
-                      session.name === sessionSnapshot.name
-                        ? 'Currently open'
-                        : `${views.length} ${pluralize(
-                            'view',
-                            views.length,
-                          )}; ${totalTracks}
-                           open ${pluralize('track', totalTracks)}`
-                    }
-                  />
-                  <ListItemSecondaryAction>
-                    <IconButton
-                      edge="end"
-                      disabled={session.name === sessionSnapshot.name}
-                      aria-label="Delete"
-                      onClick={() => {
-                        setSessionIndexToDelete(idx)
-                        setOpen(true)
-                      }}
-                    >
-                      <DeleteIcon />
-                    </IconButton>
-                  </ListItemSecondaryAction>
-                </ListItem>
-              )
-            })
-          ) : (
-            <Typography className={classes.message}>
-              No saved sessions found
-            </Typography>
-          )}
-        </List>
-      </Paper>
-      <DeleteDialog
-        open={open}
-        sessionNameToDelete={sessionNameToDelete}
-        handleClose={handleDialogClose}
-      />
+      <AutosaveSessionsList session={session} />
+      <RegularSavedSessionsList session={session} />
     </>
   )
 })
diff --git a/plugins/menus/src/SessionManager/components/util.ts b/plugins/menus/src/SessionManager/components/util.ts
new file mode 100644
index 0000000000..b24c348fcb
--- /dev/null
+++ b/plugins/menus/src/SessionManager/components/util.ts
@@ -0,0 +1,15 @@
+import { AbstractSessionModel } from '@jbrowse/core/util'
+
+export interface SessionSnap {
+  name: string
+  views?: { tracks?: unknown[] }[]
+  [key: string]: unknown
+}
+
+export interface SessionModel extends AbstractSessionModel {
+  savedSessions: SessionSnap[]
+  removeSavedSession: (arg: SessionSnap) => void
+  activateSession: (arg: string) => void
+  loadAutosaveSession: () => void
+  previousAutosaveId: string
+}
diff --git a/plugins/variants/src/StructuralVariantChordRenderer/Chord.tsx b/plugins/variants/src/StructuralVariantChordRenderer/Chord.tsx
index 05c524af66..0192fed9fe 100644
--- a/plugins/variants/src/StructuralVariantChordRenderer/Chord.tsx
+++ b/plugins/variants/src/StructuralVariantChordRenderer/Chord.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { polarToCartesian, Feature } from '@jbrowse/core/util'
 import {
@@ -57,6 +57,7 @@ const Chord = observer(function Chord({
     evt: unknown,
   ) => void
 }) {
+  const [hovered, setHovered] = useState(false)
   // find the blocks that our start and end points belong to
   const startBlock = blocksForRefs[feature.get('refName')]
   if (!startBlock) {
@@ -113,22 +114,21 @@ const Chord = observer(function Chord({
       <path
         data-testid={`chord-${feature.id()}`}
         d={['M', ...startXY, 'Q', ...controlXY, ...endXY].join(' ')}
-        style={{ stroke: strokeColor }}
+        stroke={hovered ? hoverStrokeColor : strokeColor}
+        strokeWidth={hovered ? 3 : 1}
         onClick={evt => {
           if (endBlock && startBlock) {
             onClick(feature, startBlock.region, endBlock.region, evt)
           }
         }}
-        onMouseOver={evt => {
+        onMouseOver={() => {
           if (!selected) {
-            evt.currentTarget.style.stroke = hoverStrokeColor
-            evt.currentTarget.style.strokeWidth = '3px'
+            setHovered(true)
           }
         }}
-        onMouseOut={evt => {
+        onMouseOut={() => {
           if (!selected) {
-            evt.currentTarget.style.stroke = strokeColor
-            evt.currentTarget.style.strokeWidth = '1px'
+            setHovered(false)
           }
         }}
       />
diff --git a/plugins/variants/src/StructuralVariantChordRenderer/ReactComponent.tsx b/plugins/variants/src/StructuralVariantChordRenderer/ReactComponent.tsx
index fc8af4677a..7a14615269 100644
--- a/plugins/variants/src/StructuralVariantChordRenderer/ReactComponent.tsx
+++ b/plugins/variants/src/StructuralVariantChordRenderer/ReactComponent.tsx
@@ -32,30 +32,17 @@ const StructuralVariantChordsReactComponent = observer(function ({
   // make a map of refName -> blockDefinition
   const blocksForRefsMemo = useMemo(() => {
     const blocksForRefs = {} as Record<string, Block>
-    blockDefinitions.forEach(block => {
-      ;(block.region.elided ? block.region.regions : [block.region]).forEach(
-        r => (blocksForRefs[r.refName] = block),
-      )
-    })
+    for (const block of blockDefinitions) {
+      const regions = block.region.elided
+        ? block.region.regions
+        : [block.region]
+      for (const region of regions) {
+        blocksForRefs[region.refName] = block
+      }
+    }
     return blocksForRefs
   }, [blockDefinitions])
-  const chords = []
-  for (const feature of features.values()) {
-    const id = feature.id()
-    const selected = String(selectedFeatureId) === String(id)
-    chords.push(
-      <Chord
-        key={id}
-        feature={feature}
-        config={config}
-        radius={radius}
-        bezierRadius={bezierRadius}
-        blocksForRefs={blocksForRefsMemo}
-        selected={selected}
-        onClick={onChordClick}
-      />,
-    )
-  }
+
   const trackStyleId = `chords-${
     typeof jest !== 'undefined' ? 'test' : displayModel.id
   }`
@@ -72,7 +59,23 @@ const StructuralVariantChordsReactComponent = observer(function ({
 `,
         }}
       />
-      {chords}
+      {[...features.values()].map(feature => {
+        const id = feature.id()
+        const selected = String(selectedFeatureId) === String(id)
+
+        return (
+          <Chord
+            key={id}
+            feature={feature}
+            config={config}
+            radius={radius}
+            bezierRadius={bezierRadius}
+            blocksForRefs={blocksForRefsMemo}
+            selected={selected}
+            onClick={onChordClick}
+          />
+        )
+      })}
     </g>
   )
 })
diff --git a/products/jbrowse-web/src/components/SessionWarningDialog.tsx b/products/jbrowse-web/src/components/SessionWarningDialog.tsx
index 3dd326dea2..2752338eaa 100644
--- a/products/jbrowse-web/src/components/SessionWarningDialog.tsx
+++ b/products/jbrowse-web/src/components/SessionWarningDialog.tsx
@@ -7,7 +7,6 @@ import {
   DialogActions,
 } from '@mui/material'
 import { nanoid } from '@jbrowse/core/util/nanoid'
-import { SessionLoaderModel } from '../SessionLoader'
 
 import WarningIcon from '@mui/icons-material/Warning'
 import {
@@ -15,6 +14,8 @@ import {
   pluginDescriptionString,
 } from '@jbrowse/core/PluginLoader'
 
+import { SessionLoaderModel } from '../SessionLoader'
+
 function SessionWarningDialog({
   onConfirm,
   onCancel,
diff --git a/website/src/pages/contact.mdx b/website/src/pages/contact.mdx
index 252d85749c..416cd239d1 100644
--- a/website/src/pages/contact.mdx
+++ b/website/src/pages/contact.mdx
@@ -2,7 +2,6 @@
 id: contact
 ---
 
-
 import GoogleCalendarScheduleFunction from './util'
 
 # Contact us
@@ -10,7 +9,7 @@ import GoogleCalendarScheduleFunction from './util'
 We **really** love talking to our users. Please reach out with any thoughts you
 have on what we are building!
 
-<GoogleCalendarScheduleFunction/>
+<GoogleCalendarScheduleFunction />
 
 - Ask a question on our discussion board at
   https://github.com/GMOD/jbrowse-components/discussions