From 880efb886e2daa6b39647b307c94f80cddd6af9f Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Thu, 25 Jul 2024 11:47:31 -0400
Subject: [PATCH] Rm

---
 .../core/assemblyManager/loadRefNameMap.ts    |  65 -----
 packages/core/assemblyManager/util.ts         |  70 -----
 .../models/components/SaveTrackData.tsx       |  24 +-
 .../models/saveTrackFileTypes/genbank.ts      |  21 +-
 .../models/saveTrackFileTypes/gff3.ts         |   2 +-
 packages/core/rpc/methods/CoreGetRegions.ts   |   2 +-
 .../core/rpc/methods/CoreSaveFeatureData.ts   |   4 +-
 .../LinearGenomeView.test.tsx.snap            | 258 +++++++-----------
 .../JBrowseLinearGenomeView.test.tsx.snap     | 139 ++++------
 9 files changed, 195 insertions(+), 390 deletions(-)
 delete mode 100644 packages/core/assemblyManager/loadRefNameMap.ts
 delete mode 100644 packages/core/assemblyManager/util.ts

diff --git a/packages/core/assemblyManager/loadRefNameMap.ts b/packages/core/assemblyManager/loadRefNameMap.ts
deleted file mode 100644
index 67928d2b7c..0000000000
--- a/packages/core/assemblyManager/loadRefNameMap.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { BaseOptions, checkRefName, RefNameAliases } from './util'
-import RpcManager from '../rpc/RpcManager'
-import { when } from '../util'
-
-export interface BasicRegion {
-  start: number
-  end: number
-  refName: string
-  assemblyName: string
-}
-
-export async function loadRefNameMap(
-  assembly: {
-    name: string
-    regions: BasicRegion[] | undefined
-    refNameAliases: RefNameAliases | undefined
-    getCanonicalRefName: (arg: string) => string
-    rpcManager: RpcManager
-  },
-  adapterConfig: unknown,
-  options: BaseOptions,
-  signal?: AbortSignal,
-) {
-  const { sessionId } = options
-  await when(() => !!(assembly.regions && assembly.refNameAliases), {
-    signal,
-    name: 'when assembly ready',
-  })
-
-  const refNames = (await assembly.rpcManager.call(
-    sessionId,
-    'CoreGetRefNames',
-    {
-      adapterConfig,
-      signal,
-      ...options,
-    },
-    { timeout: 1000000 },
-  )) as string[]
-
-  const { refNameAliases } = assembly
-  if (!refNameAliases) {
-    throw new Error(`error loading assembly ${assembly.name}'s refNameAliases`)
-  }
-
-  const refNameMap = Object.fromEntries(
-    refNames.map(name => {
-      checkRefName(name)
-      return [assembly.getCanonicalRefName(name), name]
-    }),
-  )
-
-  // make the reversed map too
-  const reversed = Object.fromEntries(
-    Object.entries(refNameMap).map(([canonicalName, adapterName]) => [
-      adapterName,
-      canonicalName,
-    ]),
-  )
-
-  return {
-    forwardMap: refNameMap,
-    reverseMap: reversed,
-  }
-}
diff --git a/packages/core/assemblyManager/util.ts b/packages/core/assemblyManager/util.ts
deleted file mode 100644
index e779fec009..0000000000
--- a/packages/core/assemblyManager/util.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { AnyConfigurationModel } from '../configuration'
-import jsonStableStringify from 'json-stable-stringify'
-import { BaseRefNameAliasAdapter } from '../data_adapters/BaseAdapter'
-import PluginManager from '../PluginManager'
-import { BasicRegion } from './loadRefNameMap'
-
-export type RefNameAliases = Record<string, string>
-
-export interface BaseOptions {
-  signal?: AbortSignal
-  sessionId: string
-  statusCallback?: Function
-}
-
-export async function getRefNameAliases(
-  config: AnyConfigurationModel,
-  pm: PluginManager,
-  signal?: AbortSignal,
-) {
-  const type = pm.getAdapterType(config.type)
-  const CLASS = await type.getAdapterClass()
-  const adapter = new CLASS(config, undefined, pm) as BaseRefNameAliasAdapter
-  return adapter.getRefNameAliases({ signal })
-}
-
-export async function getCytobands(
-  config: AnyConfigurationModel,
-  pm: PluginManager,
-) {
-  const type = pm.getAdapterType(config.type)
-  const CLASS = await type.getAdapterClass()
-  const adapter = new CLASS(config, undefined, pm)
-
-  // @ts-expect-error
-  return adapter.getData()
-}
-
-export async function getAssemblyRegions(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  assembly: any,
-  adapterConfig: AnyConfigurationModel,
-  signal?: AbortSignal,
-): Promise<BasicRegion[]> {
-  const sessionId = 'loadRefNames'
-  return assembly.rpcManager.call(
-    sessionId,
-    'CoreGetRegions',
-    {
-      adapterConfig,
-      sessionId,
-      signal,
-    },
-    { timeout: 1000000 },
-  )
-}
-
-const refNameRegex = new RegExp(
-  '[0-9A-Za-z!#$%&+./:;?@^_|~-][0-9A-Za-z!#$%&*+./:;=?@^_|~-]*',
-)
-
-// Valid refName pattern from https://samtools.github.io/hts-specs/SAMv1.pdf
-export function checkRefName(refName: string) {
-  if (!refNameRegex.test(refName)) {
-    throw new Error(`Encountered invalid refName: "${refName}"`)
-  }
-}
-
-export function getAdapterId(adapterConf: unknown) {
-  return jsonStableStringify(adapterConf)
-}
diff --git a/packages/core/pluggableElementTypes/models/components/SaveTrackData.tsx b/packages/core/pluggableElementTypes/models/components/SaveTrackData.tsx
index 078afa6f30..88159898ec 100644
--- a/packages/core/pluggableElementTypes/models/components/SaveTrackData.tsx
+++ b/packages/core/pluggableElementTypes/models/components/SaveTrackData.tsx
@@ -100,7 +100,7 @@ const SaveTrackDataDialog = observer(function ({
           visibleRegions?: Region[]
         }
         const session = getSession(model)
-        if (!features || !visibleRegions) {
+        if (!features || !visibleRegions?.length || !type) {
           return
         }
         const generator = options[type] || {
@@ -110,7 +110,7 @@ const SaveTrackDataDialog = observer(function ({
           await generator.callback({
             features,
             session,
-            assemblyName: visibleRegions[0].assemblyName,
+            assemblyName: visibleRegions[0]!.assemblyName,
           }),
         )
       } catch (e) {
@@ -130,7 +130,12 @@ const SaveTrackDataDialog = observer(function ({
 
         <FormControl>
           <FormLabel>File type</FormLabel>
-          <RadioGroup value={type} onChange={e => setType(e.target.value)}>
+          <RadioGroup
+            value={type}
+            onChange={e => {
+              setType(e.target.value)
+            }}
+          >
             {Object.entries(options).map(([key, val]) => (
               <FormControlLabel
                 key={key}
@@ -165,7 +170,10 @@ const SaveTrackDataDialog = observer(function ({
       <DialogActions>
         <Button
           onClick={() => {
-            const ext = options[type].extension
+            if (!type) {
+              return
+            }
+            const ext = options[type]?.extension || 'unknown'
             const blob = new Blob([str], { type: 'text/plain;charset=utf-8' })
             saveAs(blob, `jbrowse_track_data.${ext}`)
           }}
@@ -174,7 +182,13 @@ const SaveTrackDataDialog = observer(function ({
           Download
         </Button>
 
-        <Button variant="contained" type="submit" onClick={() => handleClose()}>
+        <Button
+          variant="contained"
+          type="submit"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Close
         </Button>
       </DialogActions>
diff --git a/packages/core/pluggableElementTypes/models/saveTrackFileTypes/genbank.ts b/packages/core/pluggableElementTypes/models/saveTrackFileTypes/genbank.ts
index 1b78eb0e3f..90db178eca 100644
--- a/packages/core/pluggableElementTypes/models/saveTrackFileTypes/genbank.ts
+++ b/packages/core/pluggableElementTypes/models/saveTrackFileTypes/genbank.ts
@@ -45,20 +45,20 @@ function formatTags(f: Feature, parentId?: string, parentType?: string) {
     ...f
       .tags()
       .filter(tag => !coreFields.has(tag))
-      .map(tag => [tag, fmt(f.get(tag))])
+      .map(tag => [tag, fmt(f.get(tag))] as const)
       .filter(tag => !!tag[1] && tag[0] !== parentType)
       .map(tag => `${blank}/${retitle[tag[0]] || tag[0]}="${tag[1]}"`),
   ].filter(f => !!f)
 }
 
-function rs(f: Feature, min: number) {
+function relativeStart(f: Feature, min: number) {
   return f.get('start') - min + 1
 }
-function re(f: Feature, min: number) {
+function relativeEnd(f: Feature, min: number) {
   return f.get('end') - min
 }
 function loc(f: Feature, min: number) {
-  return `${rs(f, min)}..${re(f, min)}`
+  return `${relativeStart(f, min)}..${relativeEnd(f, min)}`
 }
 function formatFeat(
   f: Feature,
@@ -123,6 +123,9 @@ export async function stringifyGBK({
   session: AbstractSessionModel
   features: Feature[]
 }) {
+  if (!features.length) {
+    return ''
+  }
   const today = new Date()
   const month = today.toLocaleString('en-US', { month: 'short' }).toUpperCase()
   const day = today.toLocaleString('en-US', { day: 'numeric' })
@@ -132,15 +135,15 @@ export async function stringifyGBK({
   const start = min(features.map(f => f.get('start')))
   const end = max(features.map(f => f.get('end')))
   const length = end - start
-  const refName = features[0].get('refName')
+  const refName = features[0]!.get('refName') || ''
 
   const l1 = [
-    `${'LOCUS'.padEnd(12)}`,
+    'LOCUS'.padEnd(12),
     `${refName}:${start + 1}..${end}`.padEnd(20),
-    ` ${`${length} bp`}`.padEnd(15),
+    ` ${length} bp`.padEnd(15),
     ` ${'DNA'.padEnd(10)}`,
-    `${'linear'.padEnd(10)}`,
-    `${'UNK ' + date}`,
+    'linear'.padEnd(10),
+    `UNK ${date}`,
   ].join('')
   const l2 = 'FEATURES             Location/Qualifiers'
   const seq = await fetchSequence({
diff --git a/packages/core/pluggableElementTypes/models/saveTrackFileTypes/gff3.ts b/packages/core/pluggableElementTypes/models/saveTrackFileTypes/gff3.ts
index 44605d6dae..3780ee02ad 100644
--- a/packages/core/pluggableElementTypes/models/saveTrackFileTypes/gff3.ts
+++ b/packages/core/pluggableElementTypes/models/saveTrackFileTypes/gff3.ts
@@ -54,7 +54,7 @@ function formatFeat(f: Feature, parentId?: string, parentRef?: string) {
       f
         .tags()
         .filter(tag => !coreFields.has(tag))
-        .map(tag => [tag, fmt(f.get(tag))])
+        .map(tag => [tag, fmt(f.get(tag))] as const)
         .filter(tag => !!tag[1])
         .map(tag => `${retitle[tag[0]] || tag[0]}=${tag[1]}`)
         .join(';'),
diff --git a/packages/core/rpc/methods/CoreGetRegions.ts b/packages/core/rpc/methods/CoreGetRegions.ts
index 0761c2c62f..4d8b96353a 100644
--- a/packages/core/rpc/methods/CoreGetRegions.ts
+++ b/packages/core/rpc/methods/CoreGetRegions.ts
@@ -11,7 +11,7 @@ export default class CoreGetRegions extends RpcMethodType {
     args: {
       sessionId: string
       signal: RemoteAbortSignal
-      adapterConfig: {}
+      adapterConfig: Record<string, unknown>
     },
     rpcDriver: string,
   ) {
diff --git a/packages/core/rpc/methods/CoreSaveFeatureData.ts b/packages/core/rpc/methods/CoreSaveFeatureData.ts
index 21b4067a1d..4f93167aab 100644
--- a/packages/core/rpc/methods/CoreSaveFeatureData.ts
+++ b/packages/core/rpc/methods/CoreSaveFeatureData.ts
@@ -42,9 +42,9 @@ export default class CoreGetFeatures extends RpcMethodType {
     args: {
       sessionId: string
       regions: Region[]
-      adapterConfig: {}
+      adapterConfig: Record<string, unknown>
       signal?: RemoteAbortSignal
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       opts?: any
     },
     rpcDriver: string,
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
index 176ee2e942..d723fd5296 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`renders one track, one region 1`] = `
           >
             <div
               class="css-den3n5-scalebarVisibleRegion"
-              style="width: 800px; left: 0px; background: rgba(66, 165, 245, 0.3); border-color: #42a5f5;"
+              style="width: 800px; left: 0px; background: rgba(66, 119, 127, 0.3); border-color: rgb(66, 119, 127);"
             />
             <div
               class="css-2jeg0a-scalebarContig"
@@ -25,7 +25,7 @@ exports[`renders one track, one region 1`] = `
             />
             <div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1hokke9-MuiTypography-root-scalebarRefName"
+                class="MuiTypography-root MuiTypography-body1 css-1jz1b1y-MuiTypography-root-scalebarRefName"
                 style="left: 3px; color: rgb(153, 102, 0);"
               >
                 ctgA
@@ -35,31 +35,31 @@ exports[`renders one track, one region 1`] = `
                 style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 160px; pointer-events: none; color: rgb(153, 102, 0);"
                 >
                   20
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 320px; pointer-events: none; color: rgb(153, 102, 0);"
                 >
                   40
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 480px; pointer-events: none; color: rgb(153, 102, 0);"
                 >
                   60
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 640px; pointer-events: none; color: rgb(153, 102, 0);"
                 >
                   80
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
                 >
                   100
@@ -81,10 +81,10 @@ exports[`renders one track, one region 1`] = `
           height="48"
         >
           <polygon
-            fill="#42a5f5"
+            fill="#42777f"
             fill-opacity="0.3"
             points="0,48,101,48,800,0,0,0"
-            stroke="#42a5f5"
+            stroke="#42777f"
             stroke-opacity="0.8"
           />
         </svg>
@@ -92,7 +92,7 @@ exports[`renders one track, one region 1`] = `
           class="css-cwpsam-headerBar"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-7xx2bb-MuiButtonBase-root-MuiIconButton-root-toggleButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9f3vuc-MuiButtonBase-root-MuiIconButton-root-toggleButton"
             tabindex="0"
             title="Open track selector"
             type="button"
@@ -100,7 +100,7 @@ exports[`renders one track, one region 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1mgxsmk-MuiSvgIcon-root-buttonSpacer"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17qrb42-MuiSvgIcon-root-buttonSpacer"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -108,24 +108,21 @@ exports[`renders one track, one region 1`] = `
                 d="M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
           <div
             class="css-1n1xfjh-spacer"
           />
           <div
-            class="MuiFormGroup-root MuiFormGroup-row css-1gwpy8f-MuiFormGroup-root-headerForm"
+            class="MuiFormGroup-root MuiFormGroup-row css-1eq7wq4-MuiFormGroup-root-headerForm"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-1bqryi1-MuiButtonBase-root-MuiButton-root-panButton"
+              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1dx6m7h-MuiButtonBase-root-MuiButton-root-panButton"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ArrowBackIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -134,18 +131,15 @@ exports[`renders one track, one region 1`] = `
                   d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-1bqryi1-MuiButtonBase-root-MuiButton-root-panButton"
+              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1dx6m7h-MuiButtonBase-root-MuiButton-root-panButton"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ArrowForwardIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -154,21 +148,18 @@ exports[`renders one track, one region 1`] = `
                   d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
             <div
-              class="MuiAutocomplete-root css-ka7ti6-MuiAutocomplete-root"
+              class="MuiAutocomplete-root css-1y8r37a-MuiAutocomplete-root"
               data-testid="autocomplete"
               style="width: 175px;"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"
+                class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1pf3k7w-MuiFormControl-root-MuiTextField-root-headerRefName"
                 style="margin: 7px;"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-g6ygwx-MuiInputBase-root-MuiOutlinedInput-root"
                   style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                 >
                   <input
@@ -177,7 +168,7 @@ exports[`renders one track, one region 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1df20ln-MuiInputBase-input-MuiOutlinedInput-input"
                     id=":r6:"
                     placeholder="Search for location"
                     role="combobox"
@@ -186,12 +177,12 @@ exports[`renders one track, one region 1`] = `
                     value="ctgA:1..100"
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1i2hsuj-MuiInputAdornment-root"
                     style="margin-right: 7px;"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                       data-testid="SearchIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -201,13 +192,13 @@ exports[`renders one track, one region 1`] = `
                       />
                     </svg>
                     <button
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                         data-testid="HelpIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -216,9 +207,6 @@ exports[`renders one track, one region 1`] = `
                           d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
                         />
                       </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
                     </button>
                   </div>
                   <fieldset
@@ -226,7 +214,7 @@ exports[`renders one track, one region 1`] = `
                     class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-gpjuor"
                     >
                       <span
                         class="notranslate"
@@ -240,7 +228,7 @@ exports[`renders one track, one region 1`] = `
             </div>
           </div>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-1lztmv5-MuiTypography-root-bp"
+            class="MuiTypography-root MuiTypography-body2 css-622ihw-MuiTypography-root-bp"
           >
             100bp
           </p>
@@ -248,7 +236,7 @@ exports[`renders one track, one region 1`] = `
             class="css-z84q6m-container"
           >
             <button
-              class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge css-pk6jtd-MuiButtonBase-root-MuiIconButton-root"
               data-testid="zoom_out"
               disabled=""
               tabindex="-1"
@@ -256,7 +244,7 @@ exports[`renders one track, one region 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ZoomOutIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -267,7 +255,7 @@ exports[`renders one track, one region 1`] = `
               </svg>
             </button>
             <span
-              class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall css-m0837o-MuiSlider-root-slider"
+              class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall css-155bqyq-MuiSlider-root-slider"
             >
               <span
                 class="MuiSlider-rail css-7o8aqz-MuiSlider-rail"
@@ -277,7 +265,7 @@ exports[`renders one track, one region 1`] = `
                 style="left: 0%; width: 0%;"
               />
               <span
-                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-l29f8w-MuiSlider-thumb"
+                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-1nqyqyn-MuiSlider-thumb"
                 data-index="0"
                 style="left: 0%;"
               >
@@ -297,14 +285,14 @@ exports[`renders one track, one region 1`] = `
               </span>
             </span>
             <button
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-pk6jtd-MuiButtonBase-root-MuiIconButton-root"
               data-testid="zoom_in"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ZoomInIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -316,9 +304,6 @@ exports[`renders one track, one region 1`] = `
                   d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
           <div
@@ -394,12 +379,12 @@ exports[`renders one track, one region 1`] = `
         data-testid="rubberband_controls"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1coqp07-MuiPaper-root-scalebarContainer"
+          class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-f42wkc-MuiPaper-root-container"
           data-resizer="true"
           style="height: 17px; box-sizing: border-box;"
         >
           <div
-            class="css-khofof-scalebarZoomContainer"
+            class="css-d7j7i0-zoomContainer"
           >
             <div
               class="css-y3821b-scalebar"
@@ -425,7 +410,7 @@ exports[`renders one track, one region 1`] = `
             </div>
           </div>
           <p
-            class="MuiTypography-root MuiTypography-body1 css-1vlu65o-MuiTypography-root-refLabel"
+            class="MuiTypography-root MuiTypography-body1 css-1dc3p9s-MuiTypography-root-refLabel"
             data-testid="refLabel-ctgA"
             style="left: -1px; padding-left: 1px;"
           >
@@ -434,10 +419,11 @@ exports[`renders one track, one region 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-dewezf-MuiPaper-root-root"
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-etmq0k-MuiPaper-root-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1q1f5r0-MuiPaper-root-trackLabel-trackLabelOverlap-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-80nm70-MuiPaper-root-trackLabel-trackLabelOverlap-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <span
             class="css-k4omgw-dragHandle"
@@ -446,7 +432,7 @@ exports[`renders one track, one region 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1cz9l96-MuiSvgIcon-root-dragHandleIcon"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-xfzser-MuiSvgIcon-root-dragHandleIcon"
               data-testid="DragIndicatorIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -457,14 +443,14 @@ exports[`renders one track, one region 1`] = `
             </svg>
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pungfj-MuiButtonBase-root-MuiIconButton-root-iconButton"
             tabindex="0"
             title="close this track"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
               data-testid="CloseIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -473,26 +459,23 @@ exports[`renders one track, one region 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
           <span
-            class="MuiTypography-root MuiTypography-body1 css-ij4gik-MuiTypography-root-trackName"
+            class="MuiTypography-root MuiTypography-body1 css-t8snz5-MuiTypography-root-trackName"
           >
             <span>
               Foo Track
             </span>
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
               data-testid="MoreVertIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -501,9 +484,6 @@ exports[`renders one track, one region 1`] = `
                 d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </div>
         <div
@@ -572,7 +552,7 @@ exports[`renders two tracks, two regions 1`] = `
           >
             <div
               class="css-den3n5-scalebarVisibleRegion"
-              style="width: 580px; left: 0px; background: rgba(66, 165, 245, 0.3); border-color: #42a5f5;"
+              style="width: 580px; left: 0px; background: rgba(66, 119, 127, 0.3); border-color: rgb(66, 119, 127);"
             />
             <div
               class="css-2jeg0a-scalebarContig"
@@ -580,7 +560,7 @@ exports[`renders two tracks, two regions 1`] = `
             />
             <div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1hokke9-MuiTypography-root-scalebarRefName"
+                class="MuiTypography-root MuiTypography-body1 css-1jz1b1y-MuiTypography-root-scalebarRefName"
                 style="left: 3px; color: rgb(153, 102, 0);"
               >
                 ctgA
@@ -596,7 +576,7 @@ exports[`renders two tracks, two regions 1`] = `
             />
             <div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1hokke9-MuiTypography-root-scalebarRefName"
+                class="MuiTypography-root MuiTypography-body1 css-1jz1b1y-MuiTypography-root-scalebarRefName"
                 style="left: 75.72727272727273px;"
               >
                 ctgB
@@ -606,31 +586,31 @@ exports[`renders two tracks, two regions 1`] = `
                 style="left: 72.72727272727273px; width: 727.2727272727273px;"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 145.0909090909091px; pointer-events: none;"
                 >
                   1,200
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 290.1818181818182px; pointer-events: none;"
                 >
                   1,400
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 435.27272727272725px; pointer-events: none;"
                 >
                   1,600
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 580.3636363636364px; pointer-events: none;"
                 >
                   1,800
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 css-7mggk8-MuiTypography-root-scalebarLabel"
+                  class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                   style="left: 725.4545454545454px; pointer-events: none;"
                 >
                   2,000
@@ -652,10 +632,10 @@ exports[`renders two tracks, two regions 1`] = `
           height="48"
         >
           <polygon
-            fill="#42a5f5"
+            fill="#42777f"
             fill-opacity="0.3"
             points="0,48,802,48,580,0,0,0"
-            stroke="#42a5f5"
+            stroke="#42777f"
             stroke-opacity="0.8"
           />
         </svg>
@@ -663,7 +643,7 @@ exports[`renders two tracks, two regions 1`] = `
           class="css-cwpsam-headerBar"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-7xx2bb-MuiButtonBase-root-MuiIconButton-root-toggleButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9f3vuc-MuiButtonBase-root-MuiIconButton-root-toggleButton"
             tabindex="0"
             title="Open track selector"
             type="button"
@@ -671,7 +651,7 @@ exports[`renders two tracks, two regions 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1mgxsmk-MuiSvgIcon-root-buttonSpacer"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17qrb42-MuiSvgIcon-root-buttonSpacer"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -679,24 +659,21 @@ exports[`renders two tracks, two regions 1`] = `
                 d="M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
           <div
             class="css-1n1xfjh-spacer"
           />
           <div
-            class="MuiFormGroup-root MuiFormGroup-row css-1gwpy8f-MuiFormGroup-root-headerForm"
+            class="MuiFormGroup-root MuiFormGroup-row css-1eq7wq4-MuiFormGroup-root-headerForm"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-1bqryi1-MuiButtonBase-root-MuiButton-root-panButton"
+              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1dx6m7h-MuiButtonBase-root-MuiButton-root-panButton"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ArrowBackIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -705,18 +682,15 @@ exports[`renders two tracks, two regions 1`] = `
                   d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-1bqryi1-MuiButtonBase-root-MuiButton-root-panButton"
+              class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1dx6m7h-MuiButtonBase-root-MuiButton-root-panButton"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ArrowForwardIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -725,21 +699,18 @@ exports[`renders two tracks, two regions 1`] = `
                   d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
             <div
-              class="MuiAutocomplete-root css-ka7ti6-MuiAutocomplete-root"
+              class="MuiAutocomplete-root css-1y8r37a-MuiAutocomplete-root"
               data-testid="autocomplete"
               style="width: 283.990625px;"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"
+                class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1pf3k7w-MuiFormControl-root-MuiTextField-root-headerRefName"
                 style="margin: 7px;"
               >
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-g6ygwx-MuiInputBase-root-MuiOutlinedInput-root"
                   style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                 >
                   <input
@@ -748,8 +719,8 @@ exports[`renders two tracks, two regions 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r9:"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1df20ln-MuiInputBase-input-MuiOutlinedInput-input"
+                    id=":r8:"
                     placeholder="Search for location"
                     role="combobox"
                     spellcheck="false"
@@ -757,12 +728,12 @@ exports[`renders two tracks, two regions 1`] = `
                     value="ctgA:1..100 ctgB:1,001..1,698"
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1i2hsuj-MuiInputAdornment-root"
                     style="margin-right: 7px;"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                       data-testid="SearchIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -772,13 +743,13 @@ exports[`renders two tracks, two regions 1`] = `
                       />
                     </svg>
                     <button
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
                       tabindex="0"
                       type="button"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                         data-testid="HelpIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -787,9 +758,6 @@ exports[`renders two tracks, two regions 1`] = `
                           d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
                         />
                       </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
                     </button>
                   </div>
                   <fieldset
@@ -797,7 +765,7 @@ exports[`renders two tracks, two regions 1`] = `
                     class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="css-ihdtdm"
+                      class="css-gpjuor"
                     >
                       <span
                         class="notranslate"
@@ -811,7 +779,7 @@ exports[`renders two tracks, two regions 1`] = `
             </div>
           </div>
           <p
-            class="MuiTypography-root MuiTypography-body2 css-1lztmv5-MuiTypography-root-bp"
+            class="MuiTypography-root MuiTypography-body2 css-622ihw-MuiTypography-root-bp"
           >
             798bp
           </p>
@@ -819,14 +787,14 @@ exports[`renders two tracks, two regions 1`] = `
             class="css-z84q6m-container"
           >
             <button
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-pk6jtd-MuiButtonBase-root-MuiIconButton-root"
               data-testid="zoom_out"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ZoomOutIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -835,12 +803,9 @@ exports[`renders two tracks, two regions 1`] = `
                   d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
             <span
-              class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall css-m0837o-MuiSlider-root-slider"
+              class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall css-155bqyq-MuiSlider-root-slider"
             >
               <span
                 class="MuiSlider-rail css-7o8aqz-MuiSlider-rail"
@@ -850,7 +815,7 @@ exports[`renders two tracks, two regions 1`] = `
                 style="left: 0%; width: 9.774680693120512%;"
               />
               <span
-                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-l29f8w-MuiSlider-thumb"
+                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-1nqyqyn-MuiSlider-thumb"
                 data-index="0"
                 style="left: 9.774680693120512%;"
               >
@@ -870,14 +835,14 @@ exports[`renders two tracks, two regions 1`] = `
               </span>
             </span>
             <button
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-pk6jtd-MuiButtonBase-root-MuiIconButton-root"
               data-testid="zoom_in"
               tabindex="0"
               type="button"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                 data-testid="ZoomInIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -889,9 +854,6 @@ exports[`renders two tracks, two regions 1`] = `
                   d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
           <div
@@ -1148,12 +1110,12 @@ exports[`renders two tracks, two regions 1`] = `
         data-testid="rubberband_controls"
       >
         <div
-          class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1coqp07-MuiPaper-root-scalebarContainer"
+          class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-f42wkc-MuiPaper-root-container"
           data-resizer="true"
           style="height: 17px; box-sizing: border-box;"
         >
           <div
-            class="css-khofof-scalebarZoomContainer"
+            class="css-d7j7i0-zoomContainer"
           >
             <div
               class="css-y3821b-scalebar"
@@ -1185,7 +1147,7 @@ exports[`renders two tracks, two regions 1`] = `
                   style="left: -1px;"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-body1 css-p92emw-MuiTypography-root-majorTickLabel"
+                    class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                   >
                     1,000
                   </p>
@@ -1195,7 +1157,7 @@ exports[`renders two tracks, two regions 1`] = `
                   style="left: 199px;"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-body1 css-p92emw-MuiTypography-root-majorTickLabel"
+                    class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                   >
                     1,200
                   </p>
@@ -1205,7 +1167,7 @@ exports[`renders two tracks, two regions 1`] = `
                   style="left: 399px;"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-body1 css-p92emw-MuiTypography-root-majorTickLabel"
+                    class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                   >
                     1,400
                   </p>
@@ -1215,7 +1177,7 @@ exports[`renders two tracks, two regions 1`] = `
                   style="left: 599px;"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-body1 css-p92emw-MuiTypography-root-majorTickLabel"
+                    class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                   >
                     1,600
                   </p>
@@ -1225,7 +1187,7 @@ exports[`renders two tracks, two regions 1`] = `
                   style="left: 799px;"
                 >
                   <p
-                    class="MuiTypography-root MuiTypography-body1 css-p92emw-MuiTypography-root-majorTickLabel"
+                    class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                   >
                     1,800
                   </p>
@@ -1234,14 +1196,14 @@ exports[`renders two tracks, two regions 1`] = `
             </div>
           </div>
           <p
-            class="MuiTypography-root MuiTypography-body1 css-1vlu65o-MuiTypography-root-refLabel"
+            class="MuiTypography-root MuiTypography-body1 css-1dc3p9s-MuiTypography-root-refLabel"
             data-testid="refLabel-ctgA"
             style="left: -1px; padding-left: 1px;"
           >
             ctgA
           </p>
           <p
-            class="MuiTypography-root MuiTypography-body1 css-1vlu65o-MuiTypography-root-refLabel"
+            class="MuiTypography-root MuiTypography-body1 css-1dc3p9s-MuiTypography-root-refLabel"
             data-testid="refLabel-ctgB"
             style="left: 101px; padding-left: 1px;"
           >
@@ -1250,10 +1212,11 @@ exports[`renders two tracks, two regions 1`] = `
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-dewezf-MuiPaper-root-root"
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-etmq0k-MuiPaper-root-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1q1f5r0-MuiPaper-root-trackLabel-trackLabelOverlap-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-80nm70-MuiPaper-root-trackLabel-trackLabelOverlap-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <span
             class="css-k4omgw-dragHandle"
@@ -1262,7 +1225,7 @@ exports[`renders two tracks, two regions 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1cz9l96-MuiSvgIcon-root-dragHandleIcon"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-xfzser-MuiSvgIcon-root-dragHandleIcon"
               data-testid="DragIndicatorIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1273,14 +1236,14 @@ exports[`renders two tracks, two regions 1`] = `
             </svg>
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pungfj-MuiButtonBase-root-MuiIconButton-root-iconButton"
             tabindex="0"
             title="close this track"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
               data-testid="CloseIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1289,26 +1252,23 @@ exports[`renders two tracks, two regions 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
           <span
-            class="MuiTypography-root MuiTypography-body1 css-ij4gik-MuiTypography-root-trackName"
+            class="MuiTypography-root MuiTypography-body1 css-t8snz5-MuiTypography-root-trackName"
           >
             <span>
               Foo Track
             </span>
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
               data-testid="MoreVertIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1317,9 +1277,6 @@ exports[`renders two tracks, two regions 1`] = `
                 d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </div>
         <div
@@ -1378,10 +1335,11 @@ exports[`renders two tracks, two regions 1`] = `
         />
       </div>
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-dewezf-MuiPaper-root-root"
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-etmq0k-MuiPaper-root-root"
       >
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1q1f5r0-MuiPaper-root-trackLabel-trackLabelOverlap-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-80nm70-MuiPaper-root-trackLabel-trackLabelOverlap-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <span
             class="css-k4omgw-dragHandle"
@@ -1390,7 +1348,7 @@ exports[`renders two tracks, two regions 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1cz9l96-MuiSvgIcon-root-dragHandleIcon"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-xfzser-MuiSvgIcon-root-dragHandleIcon"
               data-testid="DragIndicatorIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1401,14 +1359,14 @@ exports[`renders two tracks, two regions 1`] = `
             </svg>
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pungfj-MuiButtonBase-root-MuiIconButton-root-iconButton"
             tabindex="0"
             title="close this track"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
               data-testid="CloseIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1417,26 +1375,23 @@ exports[`renders two tracks, two regions 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
           <span
-            class="MuiTypography-root MuiTypography-body1 css-ij4gik-MuiTypography-root-trackName"
+            class="MuiTypography-root MuiTypography-body1 css-t8snz5-MuiTypography-root-trackName"
           >
             <span>
               Bar Track
             </span>
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
               data-testid="MoreVertIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1445,9 +1400,6 @@ exports[`renders two tracks, two regions 1`] = `
                 d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </div>
         <div
diff --git a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
index 3e686743c1..5383b466ee 100644
--- a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
+++ b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
@@ -9,23 +9,22 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
       class="MuiScopedCssBaseline-root css-1pa2gw3-MuiScopedCssBaseline-root"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation12 css-tgvt3g-MuiPaper-root-viewContainer"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation12 css-akevc7-MuiPaper-root-viewContainer"
+        style="--Paper-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);"
       >
         <div
           class="css-10rokvf-container"
         >
           <button
-            aria-controls="view-menu"
             aria-haspopup="true"
-            aria-label="more"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeSmall css-15c2os-MuiButtonBase-root-MuiIconButton-root-iconRoot"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeSmall css-pcgapu-MuiButtonBase-root-MuiIconButton-root-iconRoot"
             data-testid="view_menu_icon"
             tabindex="0"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1pgqsr-MuiSvgIcon-root-icon"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u842hp-MuiSvgIcon-root-icon"
               data-testid="MenuIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -34,9 +33,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                 d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
               />
             </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
           <div
             class="css-122lw0e-grow"
@@ -45,7 +41,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
             class="css-122lw0e-grow"
           />
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -77,13 +73,11 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                 />
               </svg>
             </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
           </button>
         </div>
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1dtoofl-MuiPaper-root"
+          style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
         >
           <div
             class="css-1v4ghfe-rel"
@@ -108,7 +102,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                     />
                     <div>
                       <p
-                        class="MuiTypography-root MuiTypography-body1 css-2pm20q-MuiTypography-root-scalebarRefName"
+                        class="MuiTypography-root MuiTypography-body1 css-1jz1b1y-MuiTypography-root-scalebarRefName"
                         style="left: 3px; color: rgb(153, 102, 0);"
                       >
                         ctgA
@@ -118,37 +112,37 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                         style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
                       >
                         <p
-                          class="MuiTypography-root MuiTypography-body2 css-1d41t5x-MuiTypography-root-scalebarLabel"
+                          class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                           style="left: 133.33333333333334px; pointer-events: none; color: rgb(153, 102, 0);"
                         >
                           20
                         </p>
                         <p
-                          class="MuiTypography-root MuiTypography-body2 css-1d41t5x-MuiTypography-root-scalebarLabel"
+                          class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                           style="left: 266.6666666666667px; pointer-events: none; color: rgb(153, 102, 0);"
                         >
                           40
                         </p>
                         <p
-                          class="MuiTypography-root MuiTypography-body2 css-1d41t5x-MuiTypography-root-scalebarLabel"
+                          class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                           style="left: 400px; pointer-events: none; color: rgb(153, 102, 0);"
                         >
                           60
                         </p>
                         <p
-                          class="MuiTypography-root MuiTypography-body2 css-1d41t5x-MuiTypography-root-scalebarLabel"
+                          class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                           style="left: 533.3333333333334px; pointer-events: none; color: rgb(153, 102, 0);"
                         >
                           80
                         </p>
                         <p
-                          class="MuiTypography-root MuiTypography-body2 css-1d41t5x-MuiTypography-root-scalebarLabel"
+                          class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                           style="left: 666.6666666666667px; pointer-events: none; color: rgb(153, 102, 0);"
                         >
                           100
                         </p>
                         <p
-                          class="MuiTypography-root MuiTypography-body2 css-1d41t5x-MuiTypography-root-scalebarLabel"
+                          class="MuiTypography-root MuiTypography-body2 css-1ssp5wp-MuiTypography-root-scalebarLabel"
                           style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
                         >
                           120
@@ -181,7 +175,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                   class="css-cwpsam-headerBar"
                 >
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1iml0wn-MuiButtonBase-root-MuiIconButton-root-toggleButton"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9f3vuc-MuiButtonBase-root-MuiIconButton-root-toggleButton"
                     tabindex="0"
                     title="Open track selector"
                     type="button"
@@ -189,7 +183,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-7t563h-MuiSvgIcon-root-buttonSpacer"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17qrb42-MuiSvgIcon-root-buttonSpacer"
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
@@ -197,24 +191,21 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                         d="M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                   <div
                     class="css-1n1xfjh-spacer"
                   />
                   <div
-                    class="MuiFormGroup-root MuiFormGroup-row css-1gwpy8f-MuiFormGroup-root-headerForm"
+                    class="MuiFormGroup-root MuiFormGroup-row css-1eq7wq4-MuiFormGroup-root-headerForm"
                   >
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1th20m7-MuiButtonBase-root-MuiButton-root-panButton"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1dx6m7h-MuiButtonBase-root-MuiButton-root-panButton"
                       tabindex="0"
                       type="button"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                         data-testid="ArrowBackIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -223,18 +214,15 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
                         />
                       </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
                     </button>
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1th20m7-MuiButtonBase-root-MuiButton-root-panButton"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-1dx6m7h-MuiButtonBase-root-MuiButton-root-panButton"
                       tabindex="0"
                       type="button"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                         data-testid="ArrowForwardIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -243,9 +231,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
                         />
                       </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
                     </button>
                     <div
                       class="MuiAutocomplete-root css-1y8r37a-MuiAutocomplete-root"
@@ -253,11 +238,11 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                       style="width: 175px;"
                     >
                       <div
-                        class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-19wwqcl-MuiFormControl-root-MuiTextField-root-headerRefName"
+                        class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1pf3k7w-MuiFormControl-root-MuiTextField-root-headerRefName"
                         style="margin: 7px;"
                       >
                         <div
-                          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1dityd8-MuiInputBase-root-MuiOutlinedInput-root"
+                          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-g6ygwx-MuiInputBase-root-MuiOutlinedInput-root"
                           style="padding: 0px; height: 32px; background: rgba(255, 255, 255, 0.8);"
                         >
                           <input
@@ -266,7 +251,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                             aria-invalid="false"
                             autocapitalize="none"
                             autocomplete="off"
-                            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
+                            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1df20ln-MuiInputBase-input-MuiOutlinedInput-input"
                             id=":r0:"
                             placeholder="Search for location"
                             role="combobox"
@@ -275,12 +260,12 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                             value="ctgA:1..40"
                           />
                           <div
-                            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
+                            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1i2hsuj-MuiInputAdornment-root"
                             style="margin-right: 7px;"
                           >
                             <svg
                               aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-196n7va-MuiSvgIcon-root"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                               data-testid="SearchIcon"
                               focusable="false"
                               viewBox="0 0 24 24"
@@ -290,13 +275,13 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                               />
                             </svg>
                             <button
-                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
                               tabindex="0"
                               type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-196n7va-MuiSvgIcon-root"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                                 data-testid="HelpIcon"
                                 focusable="false"
                                 viewBox="0 0 24 24"
@@ -305,9 +290,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                                   d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
                                 />
                               </svg>
-                              <span
-                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                              />
                             </button>
                           </div>
                           <fieldset
@@ -315,7 +297,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                             class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                           >
                             <legend
-                              class="css-ihdtdm"
+                              class="css-gpjuor"
                             >
                               <span
                                 class="notranslate"
@@ -329,7 +311,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                     </div>
                   </div>
                   <p
-                    class="MuiTypography-root MuiTypography-body2 css-1uinl1m-MuiTypography-root-bp"
+                    class="MuiTypography-root MuiTypography-body2 css-622ihw-MuiTypography-root-bp"
                   >
                     40bp
                   </p>
@@ -337,14 +319,14 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                     class="css-z84q6m-container"
                   >
                     <button
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-h7w2ds-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-pk6jtd-MuiButtonBase-root-MuiIconButton-root"
                       data-testid="zoom_out"
                       tabindex="0"
                       type="button"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                         data-testid="ZoomOutIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -353,9 +335,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
                         />
                       </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
                     </button>
                     <span
                       class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeSmall css-155bqyq-MuiSlider-root-slider"
@@ -388,14 +367,14 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                       </span>
                     </span>
                     <button
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-h7w2ds-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-pk6jtd-MuiButtonBase-root-MuiIconButton-root"
                       data-testid="zoom_in"
                       tabindex="0"
                       type="button"
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
                         data-testid="ZoomInIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -407,9 +386,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
                         />
                       </svg>
-                      <span
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
                     </button>
                   </div>
                   <div
@@ -794,12 +770,12 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                 data-testid="rubberband_controls"
               >
                 <div
-                  class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-1coqp07-MuiPaper-root-scalebarContainer"
+                  class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-f42wkc-MuiPaper-root-container"
                   data-resizer="true"
                   style="height: 17px; box-sizing: border-box;"
                 >
                   <div
-                    class="css-khofof-scalebarZoomContainer"
+                    class="css-d7j7i0-zoomContainer"
                   >
                     <div
                       class="css-y3821b-scalebar"
@@ -822,7 +798,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 180px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             10
                           </p>
@@ -832,7 +808,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 380px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             20
                           </p>
@@ -842,7 +818,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 580px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             30
                           </p>
@@ -852,7 +828,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 780px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             40
                           </p>
@@ -867,7 +843,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: -20px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             40
                           </p>
@@ -877,7 +853,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 180px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             50
                           </p>
@@ -887,7 +863,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 380px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             60
                           </p>
@@ -897,7 +873,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 580px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             70
                           </p>
@@ -907,7 +883,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                           style="left: 780px;"
                         >
                           <p
-                            class="MuiTypography-root MuiTypography-body1 css-1e8tst7-MuiTypography-root-majorTickLabel"
+                            class="MuiTypography-root MuiTypography-body1 css-w6vkih-MuiTypography-root-majorTickLabel"
                           >
                             80
                           </p>
@@ -916,7 +892,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                     </div>
                   </div>
                   <p
-                    class="MuiTypography-root MuiTypography-body1 css-x1763-MuiTypography-root-refLabel"
+                    class="MuiTypography-root MuiTypography-body1 css-1dc3p9s-MuiTypography-root-refLabel"
                     data-testid="refLabel-ctgA"
                     style="left: -1px; padding-left: 1px;"
                   >
@@ -925,10 +901,11 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                 </div>
               </div>
               <div
-                class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-dewezf-MuiPaper-root-root"
+                class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-etmq0k-MuiPaper-root-root"
               >
                 <div
-                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1vp43vu-MuiPaper-root-trackLabel-trackLabelOffset-root"
+                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-znfil6-MuiPaper-root-trackLabel-trackLabelOffset-root"
+                  style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
                 >
                   <span
                     class="css-k4omgw-dragHandle"
@@ -937,7 +914,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-dqspj3-MuiSvgIcon-root-dragHandleIcon"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-xfzser-MuiSvgIcon-root-dragHandleIcon"
                       data-testid="DragIndicatorIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -948,14 +925,14 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                     </svg>
                   </span>
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1hm0p9d-MuiButtonBase-root-MuiIconButton-root-iconButton"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pungfj-MuiButtonBase-root-MuiIconButton-root-iconButton"
                     tabindex="0"
                     title="close this track"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-196n7va-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                       data-testid="CloseIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -964,26 +941,23 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                         d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                   <span
-                    class="MuiTypography-root MuiTypography-body1 css-1lqq4j2-MuiTypography-root-trackName"
+                    class="MuiTypography-root MuiTypography-body1 css-t8snz5-MuiTypography-root-trackName"
                   >
                     <span>
                       Reference sequence (volvox)
                     </span>
                   </span>
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
                     data-testid="track_menu_icon"
                     tabindex="0"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-196n7va-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-bo2jly-MuiSvgIcon-root"
                       data-testid="MoreVertIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -992,9 +966,6 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                         d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </div>
                 <div