@jbrowse/plugin-variants 2.0.0 → 2.1.2

package/esm/index.js

@@ -1,109 +1,26 @@
-import { lazy } from 'react';
-import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-import { createBaseTrackConfig, createBaseTrackModel, } from '@jbrowse/core/pluggableElementTypes/models';
-import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
-import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
+import VcfAdapterF from './VcfAdapter';
+import VcfTabixAdapterF from './VcfTabixAdapter';
+import ExtensionPointsF from './extensionPoints';
+import VariantTrackF from './VariantTrack';
 import Plugin from '@jbrowse/core/Plugin';
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import ChordVariantDisplay from './ChordVariantDisplay';
-import { configSchemaFactory as linearVariantDisplayConfigSchemaFactory, modelFactory as linearVariantDisplayModelFactory, } from './LinearVariantDisplay';
+import LinearVariantDisplayF from './LinearVariantDisplay';
 import StructuralVariantChordRendererFactory from './StructuralVariantChordRenderer';
-import { configSchema as variantFeatureWidgetConfigSchema, stateModelFactory as variantFeatureWidgetStateModelFactory, } from './VariantFeatureWidget';
-import { configSchema as vcfTabixAdapterConfigSchema } from './VcfTabixAdapter';
-import { configSchema as vcfAdapterConfigSchema } from './VcfAdapter';
-import { makeIndex, makeIndexType, getFileName, } from '@jbrowse/core/util/tracks';
+import VariantFeatureWidgetF from './VariantFeatureWidget';
 export default class VariantsPlugin extends Plugin {
     constructor() {
         super(...arguments);
         this.name = 'VariantsPlugin';
     }
     install(pluginManager) {
-        pluginManager.addAdapterType(() => new AdapterType({
-            name: 'VcfTabixAdapter',
-            configSchema: vcfTabixAdapterConfigSchema,
-            getAdapterClass: () => import('./VcfTabixAdapter/VcfTabixAdapter').then(r => r.default),
-        }));
-        pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
-            return (file, index, adapterHint) => {
-                const regexGuess = /\.vcf\.b?gz$/i;
-                const adapterName = 'VcfTabixAdapter';
-                const fileName = getFileName(file);
-                const indexName = index && getFileName(index);
-                const obj = {
-                    type: adapterName,
-                    vcfGzLocation: file,
-                    index: {
-                        location: index || makeIndex(file, '.tbi'),
-                        indexType: makeIndexType(indexName, 'CSI', 'TBI'),
-                    },
-                };
-                if (regexGuess.test(fileName) && !adapterHint) {
-                    return obj;
-                }
-                else if (adapterHint === adapterName) {
-                    return obj;
-                }
-                return adapterGuesser(file, index, adapterHint);
-            };
-        });
-        pluginManager.addToExtensionPoint('Core-guessTrackTypeForLocation', (trackTypeGuesser) => {
-            return (adapterName) => {
-                if (adapterName === 'VcfTabixAdapter' ||
-                    adapterName === 'VcfAdapter') {
-                    return 'VariantTrack';
-                }
-                return trackTypeGuesser(adapterName);
-            };
-        });
-        pluginManager.addAdapterType(() => new AdapterType({
-            name: 'VcfAdapter',
-            configSchema: vcfAdapterConfigSchema,
-            getAdapterClass: () => import('./VcfAdapter/VcfAdapter').then(r => r.default),
-        }));
-        pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
-            return (file, index, adapterHint) => {
-                const regexGuess = /\.vcf$/i;
-                const adapterName = 'VcfAdapter';
-                const fileName = getFileName(file);
-                if (regexGuess.test(fileName) || adapterHint === adapterName) {
-                    return {
-                        type: adapterName,
-                        vcfLocation: file,
-                    };
-                }
-                return adapterGuesser(file, index, adapterHint);
-            };
-        });
+        VcfAdapterF(pluginManager);
+        VcfTabixAdapterF(pluginManager);
+        VariantFeatureWidgetF(pluginManager);
+        VariantTrackF(pluginManager);
+        ExtensionPointsF(pluginManager);
+        LinearVariantDisplayF(pluginManager);
         pluginManager.addRendererType(() => pluginManager.jbrequire(StructuralVariantChordRendererFactory));
-        pluginManager.addTrackType(() => {
-            const configSchema = ConfigurationSchema('VariantTrack', {}, { baseConfiguration: createBaseTrackConfig(pluginManager) });
-            return new TrackType({
-                name: 'VariantTrack',
-                configSchema,
-                stateModel: createBaseTrackModel(pluginManager, 'VariantTrack', configSchema),
-            });
-        });
         pluginManager.addDisplayType(() => pluginManager.jbrequire(ChordVariantDisplay));
-        pluginManager.addDisplayType(() => {
-            const configSchema = linearVariantDisplayConfigSchemaFactory(pluginManager);
-            return new DisplayType({
-                name: 'LinearVariantDisplay',
-                configSchema,
-                stateModel: linearVariantDisplayModelFactory(configSchema),
-                trackType: 'VariantTrack',
-                viewType: 'LinearGenomeView',
-                ReactComponent: BaseLinearDisplayComponent,
-            });
-        });
-        pluginManager.addWidgetType(() => new WidgetType({
-            name: 'VariantFeatureWidget',
-            heading: 'Feature details',
-            configSchema: variantFeatureWidgetConfigSchema,
-            stateModel: variantFeatureWidgetStateModelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./VariantFeatureWidget/VariantFeatureWidget')),
-        }));
     }
 }
 export { default as VcfFeature } from './VcfTabixAdapter/VcfFeature';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,gBAAgB,MAAM,mBAAmB,CAAA;AAChD,OAAO,gBAAgB,MAAM,mBAAmB,CAAA;AAChD,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,qBAAqB,MAAM,wBAAwB,CAAA;AAC1D,OAAO,qCAAqC,MAAM,kCAAkC,CAAA;AACpF,OAAO,qBAAqB,MAAM,wBAAwB,CAAA;AAE1D,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,MAAM;IAAlD;;QACE,SAAI,GAAG,gBAAgB,CAAA;IAkBzB,CAAC;IAhBC,OAAO,CAAC,aAA4B;QAClC,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC/B,qBAAqB,CAAC,aAAa,CAAC,CAAA;QACpC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC/B,qBAAqB,CAAC,aAAa,CAAC,CAAA;QAEpC,aAAa,CAAC,eAAe,CAAC,GAAG,EAAE,CACjC,aAAa,CAAC,SAAS,CAAC,qCAAqC,CAAC,CAC/D,CAAA;QAED,aAAa,CAAC,cAAc,CAAC,GAAG,EAAE,CAChC,aAAa,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAC7C,CAAA;IACH,CAAC;CACF;AAED,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "2.0.0",
+  "version": "2.1.2",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -37,20 +37,19 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
     "@flatten-js/interval-tree": "^1.0.15",
     "@gmod/bgzf-filehandle": "^1.4.3",
     "@gmod/tabix": "^1.5.2",
     "@gmod/vcf": "^5.0.5",
     "@mui/icons-material": "^5.0.2",
     "@mui/x-data-grid": "^5.0.1",
-    "generic-filehandle": "^2.2.2"
+    "generic-filehandle": "^3.0.0"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.0",
-    "@jbrowse/plugin-alignments": "^1.0.0",
-    "@jbrowse/plugin-circular-view": "^1.0.0",
-    "@jbrowse/plugin-linear-genome-view": "^1.0.0",
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-alignments": "^2.0.0",
+    "@jbrowse/plugin-circular-view": "^2.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^7.0.0",
@@ -66,5 +65,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ecc7f5d47351a5ea04bc00f3a6eb6dfb607342e6"
+  "gitHead": "449b17325c9a4a97181f7ddddf48e80219f03b8d"
 }

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>
   )
 }