Render CSQ and ANN fields in VCF feature details as data grids

plugins/variants/src/LinearVariantDisplay/index.ts

@@ -1,2 +1,19 @@
-export { LinearVariantDisplayConfigFactory as configSchemaFactory } from './configSchema'
-export { default as modelFactory } from './model'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { LinearVariantDisplayConfigFactory } from './configSchema'
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import stateModelFactory from './model'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const configSchema = LinearVariantDisplayConfigFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearVariantDisplay',
+      configSchema,
+      stateModel: stateModelFactory(configSchema),
+      trackType: 'VariantTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}

plugins/variants/src/VariantFeatureWidget/AnnotGrid.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { DataGrid } from '@mui/x-data-grid'
+
+export default function VariantAnnotPanel({
+  rows,
+  columns,
+}: {
+  rows: any
+  columns: any[]
+}) {
+  const rowHeight = 25
+  const hideFooter = rows.length < 100
+  const headerHeight = 80
+  return rows.length ? (
+    <div
+      style={{
+        height:
+          Math.min(rows.length, 100) * rowHeight +
+          headerHeight +
+          (hideFooter ? 0 : 50),
+        width: '100%',
+      }}
+    >
+      <DataGrid rowHeight={rowHeight} rows={rows} columns={columns} />
+    </div>
+  ) : null
+}

plugins/variants/src/VariantFeatureWidget/BreakendPanel.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from 'react'
+import { Link, Typography } from '@mui/material'
+import SimpleFeature, {
+  SimpleFeatureSerialized,
+} from '@jbrowse/core/util/simpleFeature'
+import { getSession } from '@jbrowse/core/util'
+import { getEnv } from 'mobx-state-tree'
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import BreakendOptionDialog from './BreakendOptionDialog'
+
+export default function BreakendPanel(props: {
+  locStrings: string[]
+  model: any
+  feature: SimpleFeatureSerialized
+}) {
+  const { model, locStrings, feature } = props
+  const session = getSession(model)
+  const { pluginManager } = getEnv(session)
+  const [breakpointDialog, setBreakpointDialog] = useState(false)
+  let viewType
+
+  try {
+    viewType = pluginManager.getViewType('BreakpointSplitView')
+  } catch (e) {
+    // ignore
+  }
+
+  const simpleFeature = new SimpleFeature(feature)
+  return (
+    <BaseCard {...props} title="Breakends">
+      <Typography>Link to linear view of breakend endpoints</Typography>
+      <ul>
+        {locStrings.map(locString => (
+          <li key={`${JSON.stringify(locString)}`}>
+            <Link
+              href="#"
+              onClick={event => {
+                event.preventDefault()
+                const { view } = model
+                try {
+                  if (view) {
+                    view.navToLocString?.(locString)
+                  } else {
+                    throw new Error(
+                      'No view associated with this feature detail panel anymore',
+                    )
+                  }
+                } catch (e) {
+                  console.error(e)
+                  session.notify(`${e}`)
+                }
+              }}
+            >
+              {`LGV - ${locString}`}
+            </Link>
+          </li>
+        ))}
+      </ul>
+      {viewType ? (
+        <div>
+          <Typography>
+            Launch split views with breakend source and target
+          </Typography>
+          <ul>
+            {locStrings.map(locString => (
+              <li key={`${JSON.stringify(locString)}`}>
+                <Link
+                  href="#"
+                  onClick={event => {
+                    event.preventDefault()
+                    setBreakpointDialog(true)
+                  }}
+                >
+                  {`${feature.refName}:${feature.start} // ${locString} (split view)`}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          {breakpointDialog ? (
+            <BreakendOptionDialog
+              model={model}
+              feature={simpleFeature}
+              viewType={viewType}
+              handleClose={() => {
+                setBreakpointDialog(false)
+              }}
+            />
+          ) : null}
+        </div>
+      ) : null}
+    </BaseCard>
+  )
+}

plugins/variants/src/VariantFeatureWidget/VariantAnnPanel.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import AnnotGrid from './AnnotGrid'
+
+export default function VariantAnnPanel({
+  feature,
+  descriptions,
+}: {
+  feature: any
+  descriptions: any
+}) {
+  const annFields = (descriptions?.INFO?.ANN?.Description?.match(
+    /.*Functional annotations:'(.*)'$/,
+  )?.[1].split('|') || []) as string[]
+  const ann = (feature.INFO.ANN || []) as string[]
+
+  const rows =
+    ann.map((elt, id) => ({
+      id,
+      ...Object.fromEntries(elt.split('|').map((e, i) => [annFields[i], e])),
+    })) || []
+  const columns = annFields.map(c => ({
+    field: c,
+  }))
+  return ann.length ? (
+    <BaseCard title="ANN table">
+      <AnnotGrid rows={rows} columns={columns} />
+    </BaseCard>
+  ) : null
+}

plugins/variants/src/VariantFeatureWidget/VariantCsqPanel.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import AnnotGrid from './AnnotGrid'
+
+export default function VariantCsqPanel({
+  feature,
+  descriptions,
+}: {
+  feature: any
+  descriptions: any
+}) {
+  const csqFields = (descriptions?.INFO?.CSQ?.Description?.match(
+    /.*Format: (.*)/,
+  )?.[1].split('|') || []) as string[]
+
+  const csq = (feature.INFO.CSQ || []) as string[]
+  const rows =
+    csq.map((elt, id) => ({
+      id,
+      ...Object.fromEntries(elt.split('|').map((e, i) => [csqFields[i], e])),
+    })) || []
+  const columns = csqFields.map(c => ({
+    field: c,
+  }))
+  return csq.length ? (
+    <BaseCard title="CSQ table">
+      <AnnotGrid rows={rows} columns={columns} />
+    </BaseCard>
+  ) : null
+}