@jbrowse/plugin-variants 2.6.1 → 2.6.2

package/src/VariantFeatureWidget/VariantSampleGrid.tsx

@@ -1,151 +0,0 @@
-import React, { useState } from 'react'
-
-import {
-  FormControlLabel,
-  Checkbox,
-  TextField,
-  Typography,
-} from '@mui/material'
-
-import { DataGrid, GridToolbar } from '@mui/x-data-grid'
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { measureGridWidth, SimpleFeatureSerialized } from '@jbrowse/core/util'
-import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
-
-interface Entry {
-  sample: string
-  id: string
-  [key: string]: string
-}
-
-type InfoFields = Record<string, unknown>
-type Filters = Record<string, string>
-
-function SampleFilters({
-  columns,
-  filter,
-  setFilter,
-}: {
-  columns: { field: string }[]
-  filter: Filters
-  setFilter: (arg: Filters) => void
-}) {
-  return (
-    <>
-      <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>
-      {columns.map(({ field }) => (
-        <TextField
-          key={`filter-${field}`}
-          placeholder={`Filter ${field}`}
-          value={filter[field] || ''}
-          onChange={event =>
-            setFilter({ ...filter, [field]: event.target.value })
-          }
-        />
-      ))}
-    </>
-  )
-}
-
-export default function VariantSamples(props: {
-  feature: SimpleFeatureSerialized
-  descriptions: { FORMAT?: { [key: string]: { Description?: string } } }
-}) {
-  const { feature, descriptions = {} } = props
-  const { ref, scrollLeft } = useResizeBar()
-  const [filter, setFilter] = useState<Filters>({})
-  const samples = (feature.samples || {}) as Record<string, InfoFields>
-  const preFilteredRows = Object.entries(samples)
-
-  let error
-  let rows = [] as Entry[]
-  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 => {
-        return {
-          ...Object.fromEntries(
-            Object.entries(row[1]).map(e => [e[0], `${e[1]}`]),
-          ),
-          sample: row[0],
-          id: row[0],
-        } as Entry
-      })
-      .filter(row =>
-        filters.length
-          ? filters.every(key => {
-              const currFilter = filter[key]
-              return currFilter
-                ? row[key].match(new RegExp(currFilter, 'i'))
-                : true
-            })
-          : true,
-      )
-  } catch (e) {
-    error = e
-  }
-
-  const keys = ['sample', ...Object.keys(preFilteredRows[0]?.[1] || {})]
-  const [checked, setChecked] = useState(false)
-  const [widths, setWidths] = useState(
-    keys.map(e => measureGridWidth(rows.map(r => r[e]))),
-  )
-  const columns = keys.map((field, index) => ({
-    field,
-    description: descriptions.FORMAT?.[field]?.Description,
-    width: widths[index],
-  }))
-
-  // disableRowSelectionOnClick helps avoid
-  // https://github.com/mui-org/material-ui-x/issues/1197
-  return !preFilteredRows.length ? null : (
-    <BaseCard {...props} title="Samples">
-      {error ? <Typography color="error">{`${error}`}</Typography> : null}
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={checked}
-            onChange={event => setChecked(event.target.checked)}
-          />
-        }
-        label={<Typography variant="body2">Show options</Typography>}
-      />
-      {checked ? (
-        <SampleFilters
-          setFilter={setFilter}
-          columns={columns}
-          filter={filter}
-        />
-      ) : null}
-      <div ref={ref}>
-        <ResizeBar
-          widths={widths}
-          setWidths={setWidths}
-          scrollLeft={scrollLeft}
-        />
-        <DataGrid
-          rows={rows}
-          hideFooter={rows.length < 100}
-          columns={columns}
-          disableRowSelectionOnClick
-          rowHeight={25}
-          columnHeaderHeight={35}
-          disableColumnMenu
-          slots={{ toolbar: checked ? GridToolbar : null }}
-          slotProps={{
-            toolbar: { printOptions: { disableToolbarButton: true } },
-          }}
-        />
-      </div>
-    </BaseCard>
-  )
-}

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

@@ -1,244 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders with just the required model elements 1`] = `
-<div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root"
-  data-testid="variant-side-drawer"
->
-  <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-1elwnq4-MuiPaper-root-MuiAccordion-root"
-  >
-    <div
-      aria-expanded="true"
-      class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded MuiAccordionSummary-gutters css-sh22l5-MuiButtonBase-root-MuiAccordionSummary-root"
-      role="button"
-      tabindex="0"
-    >
-      <div
-        class="MuiAccordionSummary-content Mui-expanded MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
-      >
-        <span
-          class="MuiTypography-root MuiTypography-button css-1f0on15-MuiTypography-root"
-        >
-           
-          rs123
-        </span>
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
-          data-testid="ExpandMoreIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-          />
-        </svg>
-      </div>
-    </div>
-    <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-pwcg7p-MuiCollapse-root"
-      style="min-height: 0px;"
-    >
-      <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-      >
-        <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-        >
-          <div
-            class="MuiAccordion-region"
-            role="region"
-          >
-            <div
-              class="MuiAccordionDetails-root css-rqrb7m-MuiAccordionDetails-root-expansionPanelDetails"
-            >
-              <p
-                class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
-              >
-                Core details
-              </p>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  class="css-1q83rf3-fieldName"
-                >
-                  Position
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  ctgA:177 
-                </div>
-              </div>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  class="css-1q83rf3-fieldName"
-                >
-                  Name
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  <span>
-                    rs123
-                  </span>
-                </div>
-              </div>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  class="css-1q83rf3-fieldName"
-                >
-                  Length
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  <span>
-                    1
-                  </span>
-                </div>
-              </div>
-              <hr
-                class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
-              />
-              <p
-                class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
-              >
-                Attributes
-              </p>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  aria-label="reference base(s): Each base must be one of A,C,G,T,N (case insensitive)."
-                  class="css-18vnxxj-fieldDescription-fieldName"
-                  data-mui-internal-clone-element="true"
-                >
-                  REF
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  <span>
-                    A
-                  </span>
-                </div>
-              </div>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  aria-label="alternate base(s): Comma-separated list of alternate non-reference alleles"
-                  class="css-18vnxxj-fieldDescription-fieldName"
-                  data-mui-internal-clone-element="true"
-                >
-                  ALT
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  <span>
-                    &lt;TRA&gt;
-                  </span>
-                </div>
-              </div>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  aria-label="quality: Phred-scaled quality score for the assertion made in ALT"
-                  class="css-18vnxxj-fieldDescription-fieldName"
-                  data-mui-internal-clone-element="true"
-                >
-                  QUAL
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  <span>
-                    10.4
-                  </span>
-                </div>
-              </div>
-              <div
-                class="css-1m8nxnb-field"
-              >
-                <div
-                  class="css-1q83rf3-fieldName"
-                  style="width: 62px;"
-                >
-                  INFO.MQ
-                </div>
-                <div
-                  class="css-1omt041-fieldValue"
-                >
-                  <span>
-                    5
-                  </span>
-                </div>
-              </div>
-              <div
-                class="css-1lttu3w-container"
-              >
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-sghohy-MuiButtonBase-root-MuiButton-root"
-                  tabindex="0"
-                  type="button"
-                >
-                  Show feature sequence
-                  <span
-                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                  />
-                </button>
-                <div
-                  class="MuiFormControl-root css-147opmv-MuiFormControl-root-formControl"
-                >
-                  <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                      data-testid="HelpIcon"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.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.25z"
-                      />
-                    </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <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,32 +0,0 @@
-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'
-
-export const configSchema = ConfigurationSchema('VariantFeatureWidget', {})
-
-export function stateModelFactory(pluginManager: PluginManager) {
-  const baseModel = baseModelFactory(pluginManager)
-  return types.compose(
-    baseModel,
-    types.model('VariantFeatureWidget', {
-      type: types.literal('VariantFeatureWidget'),
-      descriptions: types.frozen(),
-    }),
-  )
-}
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addWidgetType(
-    () =>
-      new WidgetType({
-        name: 'VariantFeatureWidget',
-        heading: 'Feature details',
-        configSchema,
-        stateModel: stateModelFactory(pluginManager),
-        ReactComponent: lazy(() => import('./VariantFeatureWidget')),
-      }),
-  )
-}

package/src/VariantTrack/configSchema.ts

@@ -1,24 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-/**
- * #config VariantTrack
- * Mostly similar to feature track, but has `ChordDisplayType` registered to it,
- * and custom feature details in `LinearVariantDisplay`
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = (pluginManager: PluginManager) =>
-  ConfigurationSchema(
-    'VariantTrack',
-    {},
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: createBaseTrackConfig(pluginManager),
-    },
-  )
-
-export default configSchema

package/src/VariantTrack/index.ts

@@ -1,16 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
-import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
-import configSchemaF from './configSchema'
-
-export default (pm: PluginManager) => {
-  pm.addTrackType(() => {
-    const configSchema = configSchemaF(pm)
-    return new TrackType({
-      name: 'VariantTrack',
-      displayName: 'Variant track',
-      configSchema,
-      stateModel: createBaseTrackModel(pm, 'VariantTrack', configSchema),
-    })
-  })
-}

package/src/VcfAdapter/VcfAdapter.test.ts

@@ -1,28 +0,0 @@
-import { toArray } from 'rxjs/operators'
-import { firstValueFrom } from 'rxjs'
-import Adapter from './VcfAdapter'
-import configSchema from './configSchema'
-
-test('adapter can fetch variants from volvox.vcf', async () => {
-  const adapter = new Adapter(
-    configSchema.create({
-      vcfLocation: {
-        localPath: require.resolve('./test_data/volvox.filtered.vcf'),
-        locationType: 'LocalPathLocation',
-      },
-    }),
-  )
-
-  const feat = adapter.getFeatures({
-    assemblyName: 'volvox',
-    refName: 'ctgA',
-    start: 0,
-    end: 20000,
-  })
-
-  const names = await adapter.getRefNames()
-  expect(names).toMatchSnapshot()
-
-  const featArray = await firstValueFrom(feat.pipe(toArray()))
-  expect(featArray.slice(0, 5)).toMatchSnapshot()
-})

package/src/VcfAdapter/VcfAdapter.ts

@@ -1,125 +0,0 @@
-import {
-  BaseFeatureDataAdapter,
-  BaseOptions,
-} from '@jbrowse/core/data_adapters/BaseAdapter'
-import { Region, Feature } from '@jbrowse/core/util'
-import { openLocation } from '@jbrowse/core/util/io'
-import { ObservableCreate } from '@jbrowse/core/util/rxjs'
-import IntervalTree from '@flatten-js/interval-tree'
-import { unzip } from '@gmod/bgzf-filehandle'
-import VCF from '@gmod/vcf'
-
-// local
-import VcfFeature from '../VcfFeature'
-
-const readVcf = (f: string) => {
-  const header: string[] = []
-  const rest: string[] = []
-  f.split(/\n|\r\n|\r/)
-    .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 }
-}
-
-function isGzip(buf: Buffer) {
-  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
-}
-
-export default class VcfAdapter extends BaseFeatureDataAdapter {
-  public static capabilities = ['getFeatures', 'getRefNames']
-
-  protected vcfFeatures?: Promise<{
-    header: string
-    intervalTree: Record<string, IntervalTree>
-  }>
-
-  public async getHeader() {
-    const { header } = await this.setup()
-    return header
-  }
-
-  async getMetadata() {
-    const { header } = await this.setup()
-    const parser = new VCF({ header: header })
-    return parser.getMetadata()
-  }
-
-  // converts lines into an interval tree
-  public async setupP() {
-    const pm = this.pluginManager
-    const buf = await openLocation(this.getConf('vcfLocation'), pm).readFile()
-
-    const buffer = isGzip(buf) ? await unzip(buf) : buf
-
-    // 512MB  max chrome string length is 512MB
-    if (buffer.length > 536_870_888) {
-      throw new Error('Data exceeds maximum string length (512MB)')
-    }
-
-    const str = new TextDecoder().decode(buffer)
-    const { header, lines } = readVcf(str)
-    const intervalTree = {} as { [key: string]: IntervalTree }
-
-    for (const obj of lines.map((line, id) => {
-      const [refName, startP, , ref, , , , info] = line.split('\t')
-      const start = +startP - 1
-      const def = start + ref.length
-      const end = +(info.match(/END=(\d+)/)?.[1].trim() || def)
-      return { line, refName, start, end, id }
-    })) {
-      const key = obj.refName
-      if (!intervalTree[key]) {
-        intervalTree[key] = new IntervalTree()
-      }
-      intervalTree[key].insert([obj.start, obj.end], obj)
-    }
-
-    return { header, intervalTree }
-  }
-
-  public async setup() {
-    if (!this.vcfFeatures) {
-      this.vcfFeatures = this.setupP().catch(e => {
-        this.vcfFeatures = undefined
-        throw e
-      })
-    }
-    return this.vcfFeatures
-  }
-
-  public async getRefNames(_: BaseOptions = {}) {
-    const { intervalTree } = await this.setup()
-    return Object.keys(intervalTree)
-  }
-
-  public getFeatures(region: Region, opts: BaseOptions = {}) {
-    return ObservableCreate<Feature>(async observer => {
-      try {
-        const { start, end, refName } = region
-        const { header, intervalTree } = await this.setup()
-        const parser = new VCF({ header })
-        intervalTree[refName]?.search([start, end]).forEach(f =>
-          observer.next(
-            new VcfFeature({
-              variant: parser.parseLine(f.line),
-              parser,
-              id: `${this.id}-${f.id}`,
-            }),
-          ),
-        )
-        observer.complete()
-      } catch (e) {
-        observer.error(e)
-      }
-    }, opts.signal)
-  }
-
-  public freeResources(): void {}
-}