@jbrowse/plugin-variants 2.1.0 → 2.1.2

package/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,
+    })
+  })
+}

package/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
+}

package/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>
+  )
+}

package/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
+}

package/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
+}

package/src/VariantFeatureWidget/VariantFeatureWidget.tsx

@@ -1,204 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState } from 'react'
-import {
-  Divider,
-  Link,
-  Paper,
-  FormControlLabel,
-  Checkbox,
-  TextField,
-  Typography,
-} from '@mui/material'
-import SimpleFeature, {
-  SimpleFeatureSerialized,
-} from '@jbrowse/core/util/simpleFeature'
-import { DataGrid } from '@mui/x-data-grid'
+import React from 'react'
 import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
-import { getEnv } from 'mobx-state-tree'
-import {
-  FeatureDetails,
-  BaseCard,
-} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import BreakendOptionDialog from './BreakendOptionDialog'
+import { Divider, Paper } from '@mui/material'
+import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { parseBreakend } from '@gmod/vcf'
 
-function VariantSamples(props: any) {
-  const [filter, setFilter] = useState<any>({})
-  const [showFilters, setShowFilters] = useState(false)
-  const { feature } = props
-
-  const { samples = {} } = feature
-  const preFilteredRows: any = Object.entries(samples)
-  if (!preFilteredRows.length) {
-    return null
-  }
-  const infoFields = ['sample', ...Object.keys(preFilteredRows[0][1])].map(
-    field => ({
-      field,
-    }),
-  )
-  let error
-  let rows = []
-  const filters = Object.keys(filter)
-
-  // catch some error thrown from regex
-  // note: maps all values into a string, if this is not done rows are not
-  // sortable by the data-grid
-  try {
-    rows = preFilteredRows
-      .map((row: any) => ({
-        ...Object.fromEntries(
-          Object.entries(row[1]).map(entry => [entry[0], String(entry[1])]),
-        ),
-        sample: row[0],
-        id: row[0],
-      }))
-      .filter((row: any) => {
-        return filters.length
-          ? filters.every(key => {
-              const val = row[key]
-              const currFilter = filter[key]
-              return currFilter ? val.match(new RegExp(currFilter, 'i')) : true
-            })
-          : true
-      })
-  } catch (e) {
-    error = e
-  }
-  // disableSelectionOnClick helps avoid
-  // https://github.com/mui-org/material-ui-x/issues/1197
-  return (
-    <BaseCard {...props} title="Samples">
-      {error ? <Typography color="error">{`${error}`}</Typography> : null}
-
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={showFilters}
-            onChange={() => setShowFilters(f => !f)}
-          />
-        }
-        label="Show sample filters"
-      />
-      {showFilters ? (
-        <>
-          <Typography>
-            These filters can use a plain text search or regex style query, e.g.
-            in the genotype field, entering 1 will query for all genotypes that
-            include the first alternate allele e.g. 0|1 or 1|1, entering
-            [1-9]\d* will find any non-zero allele e.g. 0|2 or 2/33
-          </Typography>
-          {infoFields.map(({ field }) => {
-            return (
-              <TextField
-                key={`filter-${field}`}
-                placeholder={`Filter ${field}`}
-                value={filter[field] || ''}
-                onChange={event =>
-                  setFilter({ ...filter, [field]: event.target.value })
-                }
-              />
-            )
-          })}
-        </>
-      ) : null}
-      <div style={{ height: 600, width: '100%', overflow: 'auto' }}>
-        <DataGrid
-          rows={rows}
-          columns={infoFields}
-          disableSelectionOnClick
-          rowHeight={25}
-          disableColumnMenu
-        />
-      </div>
-    </BaseCard>
-  )
-}
-
-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>
-  )
-}
+// locals
+import VariantSampleGrid from './VariantSampleGrid'
+import VariantCsqPanel from './VariantCsqPanel'
+import VariantAnnPanel from './VariantAnnPanel'
+import BreakendPanel from './BreakendPanel'
 
 function VariantFeatureDetails(props: any) {
   const { model } = props
@@ -224,6 +35,10 @@ function VariantFeatureDetails(props: any) {
         {...props}
       />
       <Divider />
+      <VariantCsqPanel feature={rest} descriptions={descriptions} />
+      <Divider />
+      <VariantAnnPanel feature={rest} descriptions={descriptions} />
+      <Divider />
       {feat.type === 'breakend' ? (
         <BreakendPanel
           feature={feat}
@@ -240,7 +55,7 @@ function VariantFeatureDetails(props: any) {
           locStrings={[`${feat.INFO.CHR2[0]}:${feat.INFO.END}`]}
         />
       ) : null}
-      <VariantSamples feature={feat} {...props} />
+      <VariantSampleGrid feature={feat} {...props} />
     </Paper>
   )
 }

package/src/VariantFeatureWidget/VariantSampleGrid.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from 'react'
+
+import {
+  FormControlLabel,
+  Checkbox,
+  TextField,
+  Typography,
+} from '@mui/material'
+
+import { DataGrid } from '@mui/x-data-grid'
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+
+export default function VariantSamples(props: any) {
+  const [filter, setFilter] = useState<any>({})
+  const [showFilters, setShowFilters] = useState(false)
+  const { feature } = props
+
+  const { samples = {} } = feature
+  const preFilteredRows: any = Object.entries(samples)
+  if (!preFilteredRows.length) {
+    return null
+  }
+  const infoFields = ['sample', ...Object.keys(preFilteredRows[0][1])].map(
+    field => ({
+      field,
+    }),
+  )
+  let error
+  let rows = []
+  const filters = Object.keys(filter)
+
+  // catch some error thrown from regex
+  // note: maps all values into a string, if this is not done rows are not
+  // sortable by the data-grid
+  try {
+    rows = preFilteredRows
+      .map((row: any) => ({
+        ...Object.fromEntries(
+          Object.entries(row[1]).map(entry => [entry[0], String(entry[1])]),
+        ),
+        sample: row[0],
+        id: row[0],
+      }))
+      .filter((row: any) => {
+        return filters.length
+          ? filters.every(key => {
+              const val = row[key]
+              const currFilter = filter[key]
+              return currFilter ? val.match(new RegExp(currFilter, 'i')) : true
+            })
+          : true
+      })
+  } catch (e) {
+    error = e
+  }
+  // disableSelectionOnClick helps avoid
+  // https://github.com/mui-org/material-ui-x/issues/1197
+  return (
+    <BaseCard {...props} title="Samples">
+      {error ? <Typography color="error">{`${error}`}</Typography> : null}
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={showFilters}
+            onChange={() => setShowFilters(f => !f)}
+          />
+        }
+        label="Show sample filters"
+      />
+      {showFilters ? (
+        <>
+          <Typography>
+            These filters can use a plain text search or regex style query, e.g.
+            in the genotype field, entering 1 will query for all genotypes that
+            include the first alternate allele e.g. 0|1 or 1|1, entering
+            [1-9]\d* will find any non-zero allele e.g. 0|2 or 2/33
+          </Typography>
+          {infoFields.map(({ field }) => {
+            return (
+              <TextField
+                key={`filter-${field}`}
+                placeholder={`Filter ${field}`}
+                value={filter[field] || ''}
+                onChange={event =>
+                  setFilter({ ...filter, [field]: event.target.value })
+                }
+              />
+            )
+          })}
+        </>
+      ) : null}
+      <div style={{ height: 600, width: '100%', overflow: 'auto' }}>
+        <DataGrid
+          rows={rows}
+          columns={infoFields}
+          disableSelectionOnClick
+          rowHeight={25}
+          disableColumnMenu
+        />
+      </div>
+    </BaseCard>
+  )
+}

package/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.js.snap

@@ -198,5 +198,11 @@ exports[`VariantTrack widget renders with just the required model elements 1`] =
   <hr
     class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
   />
+  <hr
+    class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
+  />
+  <hr
+    class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
+  />
 </div>
 `;

package/src/VariantFeatureWidget/index.ts

@@ -1,4 +1,6 @@
+import { lazy } from 'react'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { types } from 'mobx-state-tree'
 import { stateModelFactory as baseModelFactory } from '@jbrowse/core/BaseFeatureWidget'
@@ -15,3 +17,16 @@ export function stateModelFactory(pluginManager: PluginManager) {
     }),
   )
 }
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addWidgetType(
+    () =>
+      new WidgetType({
+        name: 'VariantFeatureWidget',
+        heading: 'Feature details',
+        configSchema,
+        stateModel: stateModelFactory(pluginManager),
+        ReactComponent: lazy(() => import('./VariantFeatureWidget')),
+      }),
+  )
+}

package/src/VariantTrack/index.ts

@@ -0,0 +1,26 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
+import {
+  createBaseTrackConfig,
+  createBaseTrackModel,
+} from '@jbrowse/core/pluggableElementTypes/models'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addTrackType(() => {
+    const configSchema = ConfigurationSchema(
+      'VariantTrack',
+      {},
+      { baseConfiguration: createBaseTrackConfig(pluginManager) },
+    )
+    return new TrackType({
+      name: 'VariantTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(
+        pluginManager,
+        'VariantTrack',
+        configSchema,
+      ),
+    })
+  })
+}

package/src/VcfAdapter/VcfAdapter.ts

@@ -6,23 +6,24 @@ import { Region } from '@jbrowse/core/util/types'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
-import { readConfObject } from '@jbrowse/core/configuration'
 import IntervalTree from '@flatten-js/interval-tree'
 import { unzip } from '@gmod/bgzf-filehandle'
 import VCF from '@gmod/vcf'
 import VcfFeature from '../VcfTabixAdapter/VcfFeature'
 
 const readVcf = (f: string) => {
-  const lines = f.split('\n')
   const header: string[] = []
   const rest: string[] = []
-  lines.forEach(line => {
-    if (line.startsWith('#')) {
-      header.push(line)
-    } else if (line) {
-      rest.push(line)
-    }
-  })
+  f.split('\n')
+    .map(f => f.trim())
+    .filter(f => !!f)
+    .forEach(line => {
+      if (line.startsWith('#')) {
+        header.push(line)
+      } else if (line) {
+        rest.push(line)
+      }
+    })
   return { header: header.join('\n'), lines: rest }
 }
 
@@ -51,19 +52,17 @@ export default class VcfAdapter extends BaseFeatureDataAdapter {
 
   // converts lines into an interval tree
   public async setupP() {
-    const buffer = await openLocation(
-      readConfObject(this.config, 'vcfLocation'),
-      this.pluginManager,
-    ).readFile()
+    const pm = this.pluginManager
+    const buf = await openLocation(this.getConf('vcfLocation'), pm).readFile()
 
-    const buf = isGzip(buffer) ? await unzip(buffer) : buffer
+    const buffer = isGzip(buf) ? await unzip(buf) : buf
 
     // 512MB  max chrome string length is 512MB
-    if (buf.length > 536_870_888) {
+    if (buffer.length > 536_870_888) {
       throw new Error('Data exceeds maximum string length (512MB)')
     }
 
-    const str = new TextDecoder().decode(buf)
+    const str = new TextDecoder().decode(buffer)
     const { header, lines } = readVcf(str)
 
     const intervalTree = lines

package/src/VcfAdapter/index.ts

@@ -1 +1,14 @@
-export { default as configSchema } from './configSchema'
+import PluginManager from '@jbrowse/core/PluginManager'
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
+import configSchema from './configSchema'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'VcfAdapter',
+        configSchema,
+        getAdapterClass: () => import('./VcfAdapter').then(r => r.default),
+      }),
+  )
+}