@jbrowse/plugin-variants 2.5.0 → 2.6.2

package/src/VariantFeatureWidget/BreakendPanel.tsx

@@ -1,93 +0,0 @@
-/* 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 { getEnv, getSession } from '@jbrowse/core/util'
-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

@@ -1,31 +0,0 @@
-/* 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

@@ -1,31 +0,0 @@
-/* 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.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { types } from 'mobx-state-tree'
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-// locals
-import { stateModelFactory } from '.'
-import VariantFeatureDetails from './VariantFeatureWidget'
-
-test('renders with just the required model elements', () => {
-  const pluginManager = new PluginManager([])
-  const Session = types.model({
-    rpcManager: types.optional(types.frozen(), {}),
-    configuration: ConfigurationSchema('test', {}),
-    widget: stateModelFactory(pluginManager),
-  })
-  const model = Session.create(
-    {
-      widget: {
-        // @ts-expect-error
-        type: 'VariantFeatureWidget',
-      },
-    },
-    { pluginManager },
-  )
-  model.widget.setFeatureData({
-    refName: 'ctgA',
-    start: 176,
-    end: 177,
-    name: 'rs123',
-    REF: 'A',
-    ALT: ['<TRA>'],
-    QUAL: 10.4,
-    INFO: {
-      MQ: 5,
-    },
-  })
-
-  const { container } = render(<VariantFeatureDetails model={model.widget} />)
-  expect(container.firstChild).toMatchSnapshot()
-})

package/src/VariantFeatureWidget/VariantFeatureWidget.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Divider, Paper } from '@mui/material'
-import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { parseBreakend } from '@gmod/vcf'
-
-// locals
-import VariantSampleGrid from './VariantSampleGrid'
-import VariantCsqPanel from './VariantCsqPanel'
-import VariantAnnPanel from './VariantAnnPanel'
-import BreakendPanel from './BreakendPanel'
-
-function VariantFeatureDetails(props: any) {
-  const { model } = props
-  const { featureData, descriptions } = model
-  const feat = JSON.parse(JSON.stringify(featureData))
-  const { samples, ...rest } = feat
-  const basicDescriptions = {
-    CHROM: 'chromosome: An identifier from the reference genome',
-    POS: 'position: The reference position, with the 1st base having position 1',
-    ID: 'identifier: Semi-colon separated list of unique identifiers where available',
-    REF: 'reference base(s): Each base must be one of A,C,G,T,N (case insensitive).',
-    ALT: 'alternate base(s): Comma-separated list of alternate non-reference alleles',
-    QUAL: 'quality: Phred-scaled quality score for the assertion made in ALT',
-    FILTER:
-      'filter status: PASS if this position has passed all filters, otherwise a semicolon-separated list of codes for filters that fail',
-  }
-
-  return (
-    <Paper data-testid="variant-side-drawer">
-      <FeatureDetails
-        feature={rest}
-        descriptions={{ ...basicDescriptions, ...descriptions }}
-        {...props}
-      />
-      <Divider />
-      <VariantCsqPanel feature={rest} descriptions={descriptions} />
-      <Divider />
-      <VariantAnnPanel feature={rest} descriptions={descriptions} />
-      <Divider />
-      {feat.type === 'breakend' ? (
-        <BreakendPanel
-          feature={feat}
-          locStrings={feat.ALT.map(
-            (alt: string) => parseBreakend(alt)?.MatePosition || '',
-          )}
-          model={model}
-        />
-      ) : null}
-      {feat.type === 'translocation' ? (
-        <BreakendPanel
-          feature={feat}
-          model={model}
-          locStrings={[`${feat.INFO.CHR2[0]}:${feat.INFO.END}`]}
-        />
-      ) : null}
-      <VariantSampleGrid
-        feature={feat}
-        {...props}
-        descriptions={descriptions}
-      />
-    </Paper>
-  )
-}
-
-export default observer(VariantFeatureDetails)

package/src/VariantFeatureWidget/VariantSampleGrid.tsx

@@ -1,152 +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
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  descriptions: any
-}) {
-  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')),
-      }),
-  )
-}