diff --git a/plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx b/plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx
index be3dfd1d2c..7c32b86b62 100644
--- a/plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx
+++ b/plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx
@@ -1,11 +1,10 @@
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import type { MultiLinearVariantDisplayModel } from '../model'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import MultiVariantTooltip from '../../shared/MultiVariantTooltip'
 
 const useStyles = makeStyles()({
   rel: {
@@ -49,28 +48,8 @@ const Crosshair = observer(function ({
         <line x1={0} x2={width} y1={y} y2={y} stroke="black" />
         <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
       </svg>
-      <BaseTooltip>
-        {source.color ? (
-          <div
-            className={classes.color}
-            style={{
-              backgroundColor: source.color,
-            }}
-          />
-        ) : null}
-        <SanitizedHTML
-          html={Object.entries({ ...source, genotype: hoveredGenotype })
-            .filter(
-              ([key, val]) =>
-                key !== 'color' &&
-                key !== 'name' &&
-                key !== 'HP' &&
-                val !== undefined,
-            )
-            .map(([key, value]) => `${key}:${value}`)
-            .join('<br/>')}
-        />
-      </BaseTooltip>
+
+      <MultiVariantTooltip source={{ ...source, hoveredGenotype }} />
     </div>
   ) : null
 })
diff --git a/plugins/variants/src/MultiLinearVariantDisplay/model.ts b/plugins/variants/src/MultiLinearVariantDisplay/model.ts
index 8accae72e6..a34f4f67d7 100644
--- a/plugins/variants/src/MultiLinearVariantDisplay/model.ts
+++ b/plugins/variants/src/MultiLinearVariantDisplay/model.ts
@@ -73,7 +73,7 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
     .views(self => {
       return {
         get canDisplayLabels() {
-          return self.rowHeight > 8
+          return self.rowHeight > 8 && self.showSidebarLabelsSetting
         },
         /**
          * #getter
@@ -108,9 +108,8 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           const superProps = self.adapterProps()
           return {
             ...superProps,
-            notReady: superProps.notReady || !self.sources,
-            displayModel: self,
-            rpcDriverName: self.rpcDriverName,
+            notReady:
+              superProps.notReady || !self.sources || !self.featuresVolatile,
             height: self.height,
             totalHeight: self.totalHeight,
             renderingMode: self.renderingMode,
@@ -132,7 +131,12 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
               const { getMultiVariantSourcesAutorun } = await import(
                 '../getMultiVariantSourcesAutorun'
               )
+              const { getMultiVariantFeaturesAutorun } = await import(
+                '../getMultiVariantFeaturesAutorun'
+              )
+
               getMultiVariantSourcesAutorun(self)
+              getMultiVariantFeaturesAutorun(self)
             } catch (e) {
               if (isAlive(self)) {
                 console.error(e)
diff --git a/plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx b/plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx
index bd41366fd9..7b59d26452 100644
--- a/plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx
+++ b/plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx
@@ -1,9 +1,9 @@
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import MultiVariantTooltip from '../../shared/MultiVariantTooltip'
+
 import type { MultiLinearVariantMatrixDisplayModel } from '../model'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -34,25 +34,7 @@ const Crosshair = observer(function ({
         <line x1={0} x2={width} y1={mouseY} y2={mouseY} stroke="black" />
         <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
       </svg>
-      <BaseTooltip>
-        {source.color ? (
-          <div
-            style={{
-              width: 10,
-              height: 10,
-              backgroundColor: source.color,
-            }}
-          />
-        ) : null}
-        <SanitizedHTML
-          html={Object.entries({ ...source, genotype: hoveredGenotype })
-            .filter(
-              ([key]) => key !== 'color' && key !== 'name' && key !== 'HP',
-            )
-            .map(([key, value]) => `${key}:${value}`)
-            .join('<br/>')}
-        />
-      </BaseTooltip>
+      <MultiVariantTooltip source={{ ...source, hoveredGenotype }} />
     </>
   ) : null
 })
diff --git a/plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts b/plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts
index 4779694cd3..c5ba3508ce 100644
--- a/plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts
+++ b/plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts
@@ -50,7 +50,6 @@ export async function makeImageData(
     bpPerPx,
     renderingMode,
   } = props
-  console.log({ minorAlleleFrequencyFilter })
   const region = regions[0]!
   const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(
     features.values(),
diff --git a/plugins/variants/src/shared/MultiVariantBaseModel.tsx b/plugins/variants/src/shared/MultiVariantBaseModel.tsx
index d0483a437b..a98c35c70d 100644
--- a/plugins/variants/src/shared/MultiVariantBaseModel.tsx
+++ b/plugins/variants/src/shared/MultiVariantBaseModel.tsx
@@ -193,11 +193,13 @@ export default function MultiVariantBaseModelF(
               if (info?.isPhased) {
                 const ploidy = info.maxPloidy
                 for (let i = 0; i < ploidy; i++) {
+                  const id = `${row.name} HP${i}`
                   rows.push({
                     ...sources[row.name],
                     ...row,
-                    label: `${row.name} HP${i}`,
+                    label: id,
                     HP: i,
+                    id: id,
                   })
                 }
               }
@@ -208,6 +210,7 @@ export default function MultiVariantBaseModelF(
                 ...sources[row.name],
                 ...row,
                 label: row.name,
+                id: row.name,
               })
             }
           }
diff --git a/plugins/variants/src/shared/MultiVariantTooltip.tsx b/plugins/variants/src/shared/MultiVariantTooltip.tsx
new file mode 100644
index 0000000000..524d636d71
--- /dev/null
+++ b/plugins/variants/src/shared/MultiVariantTooltip.tsx
@@ -0,0 +1,35 @@
+import { SanitizedHTML } from '@jbrowse/core/ui'
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+
+export default function MultiVariantTooltip({
+  source,
+}: {
+  source: { color?: string; [key: string]: unknown }
+}) {
+  return (
+    <BaseTooltip>
+      {source.color ? (
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            backgroundColor: source.color,
+          }}
+        />
+      ) : null}
+      <SanitizedHTML
+        html={Object.entries(source)
+          .filter(
+            ([key, val]) =>
+              key !== 'color' &&
+              key !== 'name' &&
+              key !== 'HP' &&
+              key !== 'id' &&
+              val !== undefined,
+          )
+          .map(([key, value]) => `${key}:${value}`)
+          .join('<br/>')}
+      />
+    </BaseTooltip>
+  )
+}
diff --git a/plugins/variants/src/shared/SourcesGrid.tsx b/plugins/variants/src/shared/SourcesGrid.tsx
index 261269bc5d..a862e6f0b2 100644
--- a/plugins/variants/src/shared/SourcesGrid.tsx
+++ b/plugins/variants/src/shared/SourcesGrid.tsx
@@ -1,21 +1,15 @@
 import { useState } from 'react'
 
 import { SanitizedHTML } from '@jbrowse/core/ui'
-import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
+import ColorPicker from '@jbrowse/core/ui/ColorPicker'
 import { getStr, measureGridWidth } from '@jbrowse/core/util'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'
-import { Button } from '@mui/material'
+
 import { DataGrid } from '@mui/x-data-grid'
 import { makeStyles } from 'tss-react/mui'
 
-// locals
-import { moveDown, moveUp } from './util'
-
 import type { Source } from '../types'
 import type { GridColDef } from '@mui/x-data-grid'
+import SourcesGridHeader from './SourcesGridHeader'
 
 // icons
 
@@ -43,7 +37,14 @@ function SourcesGrid({
 }) {
   const { classes } = useStyles()
   const [selected, setSelected] = useState([] as string[])
-  const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0]!
+  const {
+    id: _id,
+    name: _name,
+    color: _color,
+    baseUri: _baseUri,
+    HP: _HP,
+    ...rest
+  } = rows[0]!
   const [currSort, setCurrSort] = useState<SortField>({
     idx: 0,
     field: null,
@@ -51,7 +52,7 @@ function SourcesGrid({
 
   return (
     <div>
-      <GridHeader
+      <SourcesGridHeader
         selected={selected}
         rows={rows}
         showTips={showTips}
@@ -141,85 +142,4 @@ function SourcesGrid({
   )
 }
 
-function GridHeader({
-  selected,
-  onChange,
-  rows,
-  showTips,
-}: {
-  onChange: (arg: Source[]) => void
-  rows: Source[]
-  selected: string[]
-  showTips: boolean
-}) {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const [widgetColor, setWidgetColor] = useState('blue')
-  return (
-    <>
-      <Button
-        disabled={!selected.length}
-        onClick={event => {
-          setAnchorEl(event.currentTarget)
-        }}
-      >
-        Change color of selected items
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveUp([...rows], selected))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardArrowUpIcon />
-        {showTips ? 'Move selected items up' : null}
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveDown([...rows], selected))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardArrowDownIcon />
-        {showTips ? 'Move selected items down' : null}
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveUp([...rows], selected, rows.length))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardDoubleArrowUpIcon />
-        {showTips ? 'Move selected items to top' : null}
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveDown([...rows], selected, rows.length))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardDoubleArrowDownIcon />
-        {showTips ? 'Move selected items to bottom' : null}
-      </Button>
-      <ColorPopover
-        anchorEl={anchorEl}
-        color={widgetColor}
-        onChange={c => {
-          setWidgetColor(c)
-          selected.forEach(id => {
-            const elt = rows.find(f => f.name === id)
-            if (elt) {
-              elt.color = c
-            }
-          })
-
-          onChange([...rows])
-        }}
-        onClose={() => {
-          setAnchorEl(null)
-        }}
-      />
-    </>
-  )
-}
-
 export default SourcesGrid
diff --git a/plugins/variants/src/shared/SourcesGridHeader.tsx b/plugins/variants/src/shared/SourcesGridHeader.tsx
new file mode 100644
index 0000000000..9e4c5f299d
--- /dev/null
+++ b/plugins/variants/src/shared/SourcesGridHeader.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+
+import { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'
+import { Button } from '@mui/material'
+
+import { moveDown, moveUp } from './util'
+
+import type { Source } from '../types'
+
+export default function SourcesGridHeader({
+  selected,
+  onChange,
+  rows,
+  showTips,
+}: {
+  onChange: (arg: Source[]) => void
+  rows: Source[]
+  selected: string[]
+  showTips: boolean
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [widgetColor, setWidgetColor] = useState('blue')
+  return (
+    <>
+      <Button
+        disabled={!selected.length}
+        onClick={event => {
+          setAnchorEl(event.currentTarget)
+        }}
+      >
+        Change color of selected items
+      </Button>
+      <Button
+        onClick={() => {
+          onChange(moveUp([...rows], selected))
+        }}
+        disabled={!selected.length}
+      >
+        <KeyboardArrowUpIcon />
+        {showTips ? 'Move selected items up' : null}
+      </Button>
+      <Button
+        onClick={() => {
+          onChange(moveDown([...rows], selected))
+        }}
+        disabled={!selected.length}
+      >
+        <KeyboardArrowDownIcon />
+        {showTips ? 'Move selected items down' : null}
+      </Button>
+      <Button
+        onClick={() => {
+          onChange(moveUp([...rows], selected, rows.length))
+        }}
+        disabled={!selected.length}
+      >
+        <KeyboardDoubleArrowUpIcon />
+        {showTips ? 'Move selected items to top' : null}
+      </Button>
+      <Button
+        onClick={() => {
+          onChange(moveDown([...rows], selected, rows.length))
+        }}
+        disabled={!selected.length}
+      >
+        <KeyboardDoubleArrowDownIcon />
+        {showTips ? 'Move selected items to bottom' : null}
+      </Button>
+      <ColorPopover
+        anchorEl={anchorEl}
+        color={widgetColor}
+        onChange={c => {
+          setWidgetColor(c)
+          selected.forEach(id => {
+            const elt = rows.find(f => f.name === id)
+            if (elt) {
+              elt.color = c
+            }
+          })
+
+          onChange([...rows])
+        }}
+        onClose={() => {
+          setAnchorEl(null)
+        }}
+      />
+    </>
+  )
+}
diff --git a/plugins/variants/src/shared/Tooltip.tsx b/plugins/variants/src/shared/Tooltip.tsx
deleted file mode 100644
index dd2e18dd3f..0000000000
--- a/plugins/variants/src/shared/Tooltip.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { forwardRef } from 'react'
-
-import { observer } from 'mobx-react'
-
-import Tooltip from '../Tooltip'
-
-import type { TooltipContentsComponent } from '../Tooltip'
-import type { Source } from '../types'
-import type { Feature } from '@jbrowse/core/util'
-
-const en = (n: number) => n.toLocaleString('en-US')
-
-interface Props {
-  model: { sources: Source[] }
-  feature: Feature
-}
-const TooltipContents = forwardRef<HTMLDivElement, Props>(
-  function TooltipContents2({ model, feature }, ref) {
-    const start = feature.get('start')
-    const end = feature.get('end')
-    const refName = feature.get('refName')
-    const coord = start === end ? en(start) : `${en(start)}..${en(end)}`
-    const sources = feature.get('sources') as
-      | Record<string, { score: number }>
-      | undefined
-    const source = feature.get('source')
-    const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]))
-
-    return (
-      <div ref={ref}>
-        {[refName, coord].filter(f => !!f).join(':')}
-        <br />
-        {sources ? (
-          <table>
-            <thead>
-              <tr>
-                <th>color</th>
-                <th>source</th>
-                <th>score</th>
-              </tr>
-            </thead>
-            <tbody>
-              {Object.entries(sources).map(([source, data]) => (
-                <tr key={source}>
-                  <td style={{ background: obj[source]?.color }}> </td>
-                  <td>{source}</td>
-                  <td>{data.score}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        ) : (
-          <span>{source}</span>
-        )}
-      </div>
-    )
-  },
-)
-
-type Coord = [number, number]
-
-const VariantTooltip = observer(
-  (props: {
-    model: { featureUnderMouse: Feature; sources: Source[]; rowHeight: number }
-    height: number
-    offsetMouseCoord: Coord
-    clientMouseCoord: Coord
-    clientRect?: DOMRect
-    TooltipContents?: TooltipContentsComponent
-  }) => {
-    return <Tooltip useClientY TooltipContents={TooltipContents} {...props} />
-  },
-)
-export default VariantTooltip