@jbrowse/plugin-variants 2.6.1 → 2.6.2

package/src/StructuralVariantChordRenderer/ReactComponent.tsx

@@ -1,78 +0,0 @@
-import React, { useMemo } from 'react'
-import { observer } from 'mobx-react'
-import { Feature } from '@jbrowse/core/util'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-
-// locals
-import Chord, { Block, AnyRegion } from './Chord'
-
-export default observer(function StructuralVariantChords({
-  features,
-  config,
-  displayModel,
-  blockDefinitions,
-  radius,
-  bezierRadius,
-  displayModel: { selectedFeatureId },
-  onChordClick,
-}: {
-  features: Map<string, Feature>
-  radius: number
-  config: AnyConfigurationModel
-  displayModel: { id: string; selectedFeatureId: string }
-  blockDefinitions: Block[]
-  bezierRadius: number
-  onChordClick: (
-    feature: Feature,
-    reg: AnyRegion,
-    endBlock: AnyRegion,
-    evt: unknown,
-  ) => void
-}) {
-  // make a map of refName -> blockDefinition
-  const blocksForRefsMemo = useMemo(() => {
-    const blocksForRefs = {} as { [key: string]: Block }
-    blockDefinitions.forEach(block => {
-      ;(block.region.elided ? block.region.regions : [block.region]).forEach(
-        r => (blocksForRefs[r.refName] = block),
-      )
-    })
-    return blocksForRefs
-  }, [blockDefinitions])
-  const chords = []
-  for (const feature of features.values()) {
-    const id = feature.id()
-    const selected = String(selectedFeatureId) === String(id)
-    chords.push(
-      <Chord
-        key={id}
-        feature={feature}
-        config={config}
-        radius={radius}
-        bezierRadius={bezierRadius}
-        blocksForRefs={blocksForRefsMemo}
-        selected={selected}
-        onClick={onChordClick}
-      />,
-    )
-  }
-  const trackStyleId = `chords-${
-    typeof jest !== 'undefined' ? 'test' : displayModel.id
-  }`
-  return (
-    <g id={trackStyleId} data-testid="structuralVariantChordRenderer">
-      <style
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-          #${trackStyleId} > path {
-            cursor: crosshair;
-            fill: none;
-          }
-`,
-        }}
-      />
-      {chords}
-    </g>
-  )
-})

package/src/StructuralVariantChordRenderer/configSchema.ts

@@ -1,42 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-/**
- * #config StructuralVariantChordRenderer
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configSchema = ConfigurationSchema(
-  'StructuralVariantChordRenderer',
-  {
-    /**
-     * #slot
-     */
-    strokeColor: {
-      type: 'color',
-      description: 'the line color of each arc',
-      defaultValue: 'rgba(255,133,0,0.32)',
-      contextVariable: ['feature'],
-    },
-    /**
-     * #slot
-     */
-    strokeColorSelected: {
-      type: 'color',
-      description: 'the line color of an arc that has been selected',
-      defaultValue: 'black',
-      contextVariable: ['feature'],
-    },
-    /**
-     * #slot
-     */
-    strokeColorHover: {
-      type: 'color',
-      description:
-        'the line color of an arc that is being hovered over with the mouse',
-      defaultValue: '#555',
-      contextVariable: ['feature'],
-    },
-  },
-  { explicitlyTyped: true },
-)
-
-export default configSchema

package/src/StructuralVariantChordRenderer/index.ts

@@ -1,17 +0,0 @@
-import ChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType'
-import PluginManager from '@jbrowse/core/PluginManager'
-import configSchema from './configSchema'
-import ReactComponent from './ReactComponent'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addRendererType(
-    () =>
-      new ChordRendererType({
-        name: 'StructuralVariantChordRenderer',
-        displayName: 'SV chord renderer',
-        ReactComponent,
-        configSchema,
-        pluginManager,
-      }),
-  )
-}

package/src/VariantFeatureWidget/AnnotGrid.tsx

@@ -1,51 +0,0 @@
-import React, { useState } from 'react'
-import {
-  DataGrid,
-  GridColDef,
-  GridToolbar,
-  GridValidRowModel,
-} from '@mui/x-data-grid'
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
-import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
-import { measureGridWidth } from '@jbrowse/core/util'
-
-export default function VariantAnnotPanel({
-  rows,
-  columns,
-}: {
-  rows: GridValidRowModel[]
-  columns: GridColDef[]
-}) {
-  const { ref, scrollLeft } = useResizeBar()
-  const [checked, setChecked] = useState(false)
-  const [widths, setWidths] = useState(
-    columns.map(e => measureGridWidth(rows.map(r => r[e.field]))),
-  )
-
-  return rows.length ? (
-    <div ref={ref}>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={checked}
-            onChange={event => setChecked(event.target.checked)}
-          />
-        }
-        label={<Typography variant="body2">Show options</Typography>}
-      />
-      <div ref={ref}>
-        <ResizeBar
-          widths={widths}
-          setWidths={setWidths}
-          scrollLeft={scrollLeft}
-        />
-        <DataGrid
-          rowHeight={25}
-          rows={rows}
-          columns={columns.map((c, i) => ({ ...c, width: widths[i] }))}
-          slots={{ toolbar: checked ? GridToolbar : null }}
-        />
-      </div>
-    </div>
-  ) : null
-}

package/src/VariantFeatureWidget/BreakendOptionDialog.tsx

@@ -1,117 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import {
-  Button,
-  Checkbox,
-  DialogActions,
-  DialogContent,
-  FormControlLabel,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getSnapshot } from 'mobx-state-tree'
-// jbrowse
-import { Dialog } from '@jbrowse/core/ui'
-import { getSession, Feature } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()({
-  block: {
-    display: 'block',
-  },
-})
-
-export default observer(function BreakendOptionDialog({
-  model,
-  handleClose,
-  feature,
-  viewType,
-}: {
-  model: any
-  handleClose: () => void
-  feature: Feature
-  viewType: any
-}) {
-  const { classes } = useStyles()
-  const [copyTracks, setCopyTracks] = useState(true)
-  const [mirrorTracks, setMirrorTracks] = useState(true)
-
-  return (
-    <Dialog open onClose={handleClose} title="Breakpoint split view options">
-      <DialogContent>
-        <FormControlLabel
-          className={classes.block}
-          control={
-            <Checkbox
-              checked={copyTracks}
-              onChange={event => setCopyTracks(event.target.checked)}
-            />
-          }
-          label="Copy tracks into the new view"
-        />
-
-        <FormControlLabel
-          className={classes.block}
-          control={
-            <Checkbox
-              checked={mirrorTracks}
-              onChange={event => setMirrorTracks(event.target.checked)}
-            />
-          }
-          label="Mirror tracks vertically in vertically stacked view"
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={() => {
-            const { view } = model
-            const session = getSession(model)
-            try {
-              const viewSnapshot = viewType.snapshotFromBreakendFeature(
-                feature,
-                view,
-              )
-
-              interface Track {
-                trackId: string
-                [key: string]: unknown
-              }
-              function remapIds(arr: Track[]) {
-                return arr.map(v => ({
-                  ...v,
-                  id: `${v.trackId}-${Math.random()}`,
-                }))
-              }
-              viewSnapshot.views[0].offsetPx -= view.width / 2 + 100
-              viewSnapshot.views[1].offsetPx -= view.width / 2 + 100
-              viewSnapshot.featureData = feature
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-              const viewTracks = getSnapshot(view.tracks) as Track[]
-              viewSnapshot.views[0].tracks = remapIds(viewTracks)
-              viewSnapshot.views[1].tracks = remapIds(
-                mirrorTracks ? [...viewTracks].reverse() : viewTracks,
-              )
-
-              session.addView('BreakpointSplitView', viewSnapshot)
-            } catch (e) {
-              console.error(e)
-              session.notify(`${e}`)
-            }
-            handleClose()
-          }}
-          variant="contained"
-          color="primary"
-          autoFocus
-        >
-          OK
-        </Button>
-        <Button
-          onClick={() => handleClose()}
-          color="secondary"
-          variant="contained"
-        >
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-})

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/VariantAnnotationTable.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import AnnotGrid from './AnnotGrid'
-
-export default function VariantAnnotationTable({
-  data,
-  fields,
-  title,
-}: {
-  data: string[]
-  fields: string[]
-  title: string
-}) {
-  return data.length ? (
-    <BaseCard title={title}>
-      <AnnotGrid
-        rows={
-          data.map((elt, id) => ({
-            id,
-            ...Object.fromEntries(elt.split('|').map((e, i) => [fields[i], e])),
-          })) || []
-        }
-        columns={fields.map(c => ({ field: c }))}
-      />
-    </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,112 +0,0 @@
-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 BreakendPanel from './BreakendPanel'
-import VariantAnnotationTable from './VariantAnnotationTable'
-import { SimpleFeatureSerialized } from '@jbrowse/core/util'
-
-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',
-}
-
-function VariantFeatureDetails(props: {
-  model: {
-    featureData: SimpleFeatureSerialized
-    descriptions: Record<string, string>
-  }
-}) {
-  const { model } = props
-  const { featureData, descriptions } = model
-  const feat = JSON.parse(JSON.stringify(featureData))
-  const { samples, ...rest } = feat
-
-  return (
-    <Paper data-testid="variant-side-drawer">
-      <FeatureDetails
-        feature={rest}
-        descriptions={{ ...basicDescriptions, ...descriptions }}
-        {...props}
-      />
-      <Divider />
-      <CsqPanel feature={rest} descriptions={descriptions} />
-      <Divider />
-      <AnnPanel 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>
-  )
-}
-
-function AnnPanel({
-  descriptions,
-  feature,
-}: {
-  descriptions: { INFO?: { ANN?: { Description?: string } } }
-  feature: { INFO?: { ANN?: string[] } }
-}) {
-  const annDesc = descriptions?.INFO?.ANN?.Description
-  const annFields =
-    annDesc?.match(/.*Functional annotations:'(.*)'$/)?.[1].split('|') || []
-  const ann = feature.INFO?.ANN || []
-  return (
-    <VariantAnnotationTable
-      fields={annFields}
-      data={ann}
-      title="Variant ANN field"
-    />
-  )
-}
-
-function CsqPanel({
-  descriptions,
-  feature,
-}: {
-  descriptions: { INFO?: { CSQ?: { Description?: string } } }
-  feature: { INFO?: { CSQ?: string[] } }
-}) {
-  const csqDescription = descriptions?.INFO?.CSQ?.Description
-  const csqFields =
-    csqDescription?.match(/.*Format: (.*)/)?.[1].split('|') || []
-  const csq = feature.INFO?.CSQ || []
-  return (
-    <VariantAnnotationTable
-      fields={csqFields}
-      data={csq}
-      title="Variant CSQ field"
-    />
-  )
-}
-
-export default observer(VariantFeatureDetails)