@jbrowse/plugin-variants 2.5.0 → 2.6.2

package/src/ChordVariantDisplay/index.ts

@@ -1,23 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { BaseChordDisplayComponent } from '@jbrowse/plugin-circular-view'
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-
-// locals
-import configSchemaF from './models/configSchema'
-import stateModelF from './models/stateModelFactory'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaF(pluginManager)
-    const stateModel = stateModelF(configSchema)
-    return new DisplayType({
-      name: 'ChordVariantDisplay',
-      displayName: 'Chord variant display',
-      configSchema,
-      stateModel,
-      trackType: 'VariantTrack',
-      viewType: 'CircularView',
-      ReactComponent: BaseChordDisplayComponent,
-    })
-  })
-}

package/src/ChordVariantDisplay/models/configSchema.ts

@@ -1,33 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { baseChordDisplayConfig } from '@jbrowse/plugin-circular-view'
-import { types } from 'mobx-state-tree'
-
-/**
- * #config ChordVariantDisplay
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-function stateModelFactory(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'ChordVariantDisplay',
-    {
-      /**
-       * #slot
-       */
-      renderer: types.optional(
-        pluginManager.pluggableConfigSchemaType('renderer'),
-        { type: 'StructuralVariantChordRenderer' },
-      ),
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: baseChordDisplayConfig,
-      explicitlyTyped: true,
-    },
-  )
-}
-
-export default stateModelFactory

package/src/ChordVariantDisplay/models/stateModelFactory.ts

@@ -1,63 +0,0 @@
-import { BaseChordDisplayModel } from '@jbrowse/plugin-circular-view'
-import {
-  AnyConfigurationSchemaType,
-  ConfigurationReference,
-} from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
-import { Feature, getContainingView } from '@jbrowse/core/util'
-import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-
-/**
- * #stateModel ChordVariantDisplay
- * extends `BaseChordDisplay`
- */
-const stateModelFactory = (configSchema: AnyConfigurationSchemaType) => {
-  return types
-    .compose(
-      'ChordVariantDisplay',
-      BaseChordDisplayModel,
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('ChordVariantDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-      }),
-    )
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get rendererTypeName() {
-        return self.configuration.renderer.type
-      },
-
-      /**
-       * #method
-       */
-      renderProps(): Record<string, unknown> {
-        const view = getContainingView(self)
-        return {
-          ...getParentRenderProps(self),
-          rpcDriverName: self.rpcDriverName,
-          displayModel: self,
-          bezierRadius: view.radiusPx * self.bezierRadiusRatio,
-          radius: view.radiusPx,
-          blockDefinitions: self.blockDefinitions,
-          config: self.configuration.renderer,
-          onChordClick: (arg: Feature) => self.onChordClick(arg),
-        }
-      },
-    }))
-}
-
-// http://localhost:3000/test_data/hs37d5.HG002-SequelII-CCS.sv.vcf.gz.tbi
-
-// render request is for 1.5x the current viewing window
-
-// tracks all have a height
-//
-export default stateModelFactory

package/src/LinearVariantDisplay/configSchema.ts

@@ -1,30 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { Instance } from 'mobx-state-tree'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
-
-/**
- * #config LinearVariantDisplay
- * mostly empty, this display type is very much
- * like a `FeatureTrack` with a `LinearBasicDisplay` except it has a custom
- * feature details widget
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-export default function configSchemaF(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'LinearVariantDisplay',
-    {},
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
-      explicitlyTyped: true,
-    },
-  )
-}
-
-export type LinearVariantDisplayConfigModel = ReturnType<typeof configSchemaF>
-export type LinearVariantDisplayConfig =
-  Instance<LinearVariantDisplayConfigModel>

package/src/LinearVariantDisplay/index.ts

@@ -1,20 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-import stateModelFactory from './model'
-import configSchemaF from './configSchema'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaF(pluginManager)
-    return new DisplayType({
-      name: 'LinearVariantDisplay',
-      displayName: 'Variant display',
-      configSchema,
-      stateModel: stateModelFactory(configSchema),
-      trackType: 'VariantTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent: BaseLinearDisplayComponent,
-    })
-  })
-}

package/src/LinearVariantDisplay/model.ts

@@ -1,76 +0,0 @@
-import { getConf, ConfigurationReference } from '@jbrowse/core/configuration'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import {
-  getContainingTrack,
-  getSession,
-  getContainingView,
-  isSessionModelWithWidgets,
-  Feature,
-} from '@jbrowse/core/util'
-
-import { linearBasicDisplayModelFactory } from '@jbrowse/plugin-linear-genome-view'
-import { Instance, types } from 'mobx-state-tree'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration'
-
-/**
- * #stateModel LinearVariantDisplay
- * extends `LinearBasicDisplay`
- * very similar to basic display, but provides custom widget on feature click
- */
-export default function stateModelFactory(
-  configSchema: AnyConfigurationSchemaType,
-) {
-  return types
-    .compose(
-      'LinearVariantDisplay',
-      linearBasicDisplayModelFactory(configSchema),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearVariantDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-      }),
-    )
-
-    .actions(self => ({
-      /**
-       * #action
-       */
-      async selectFeature(feature: Feature) {
-        const session = getSession(self)
-        if (isSessionModelWithWidgets(session)) {
-          const { rpcManager } = session
-          const sessionId = getRpcSessionId(self)
-          const track = getContainingTrack(self)
-          const view = getContainingView(self)
-          const adapterConfig = getConf(track, 'adapter')
-          const descriptions = await rpcManager.call(
-            sessionId,
-            'CoreGetMetadata',
-            {
-              adapterConfig,
-            },
-          )
-          session.showWidget(
-            session.addWidget('VariantFeatureWidget', 'variantFeature', {
-              featureData: feature.toJSON(),
-              view,
-              track,
-              descriptions,
-            }),
-          )
-        }
-
-        session.setSelection(feature)
-      },
-    }))
-}
-
-export type LinearVariantDisplayStateModel = ReturnType<
-  typeof stateModelFactory
->
-export type LinearVariantDisplayModel = Instance<LinearVariantDisplayStateModel>

package/src/StructuralVariantChordRenderer/Chord.tsx

@@ -1,141 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { polarToCartesian, Feature } from '@jbrowse/core/util'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { parseBreakend } from '@gmod/vcf'
-
-export interface Region {
-  end: number
-  start: number
-  refName: string
-  elided?: false
-}
-
-export interface ElidedRegion {
-  elided: true
-  regions: Region[]
-}
-
-export type AnyRegion = Region | ElidedRegion
-
-export interface Block {
-  flipped: boolean
-  bpPerRadian: number
-  startRadians: number
-  region: AnyRegion
-}
-
-function bpToRadians(block: Block, pos: number) {
-  const blockStart = block.region.elided ? 0 : block.region.start
-  const blockEnd = block.region.elided ? 0 : block.region.end
-  const bpOffset = block.flipped ? blockEnd - pos : pos - blockStart
-  return bpOffset / block.bpPerRadian + block.startRadians
-}
-
-const Chord = observer(function Chord({
-  feature,
-  blocksForRefs,
-  radius,
-  config,
-  bezierRadius,
-  selected,
-  onClick,
-}: {
-  feature: Feature
-  blocksForRefs: { [key: string]: Block }
-  radius: number
-  config: AnyConfigurationModel
-  bezierRadius: number
-  selected: boolean
-  onClick: (
-    feature: Feature,
-    reg: AnyRegion,
-    endBlock: AnyRegion,
-    evt: unknown,
-  ) => void
-}) {
-  // find the blocks that our start and end points belong to
-  const startBlock = blocksForRefs[feature.get('refName')]
-  if (!startBlock) {
-    return null
-  }
-  let svType
-  if (feature.get('INFO')) {
-    ;[svType] = feature.get('INFO').SVTYPE || []
-  } else if (feature.get('mate')) {
-    svType = 'mate'
-  }
-  let endPosition
-  let endBlock: Block | undefined
-  const alt = feature.get('ALT')?.[0]
-  const bnd = alt && parseBreakend(alt)
-  if (bnd) {
-    // VCF BND
-    const matePosition = bnd.MatePosition.split(':')
-    endPosition = +matePosition[1]
-    endBlock = blocksForRefs[matePosition[0]]
-  } else if (alt === '<TRA>') {
-    // VCF TRA
-    const chr2 = feature.get('INFO')?.CHR2?.[0]
-    const end = feature.get('INFO')?.END?.[0]
-    endPosition = parseInt(end, 10)
-    endBlock = blocksForRefs[chr2]
-  } else if (svType === 'mate') {
-    // generic simplefeatures arcs
-    const mate = feature.get('mate')
-    const chr2 = mate.refName
-    endPosition = mate.start
-    endBlock = blocksForRefs[chr2]
-  }
-
-  if (endBlock) {
-    const startPos = feature.get('start')
-    const startRadians = bpToRadians(startBlock, startPos)
-    const endRadians = bpToRadians(endBlock, endPosition)
-    const startXY = polarToCartesian(radius, startRadians)
-    const endXY = polarToCartesian(radius, endRadians)
-    const controlXY = polarToCartesian(
-      bezierRadius,
-      (endRadians + startRadians) / 2,
-    )
-
-    const strokeColor = selected
-      ? readConfObject(config, 'strokeColorSelected', { feature })
-      : readConfObject(config, 'strokeColor', { feature })
-
-    const hoverStrokeColor = readConfObject(config, 'strokeColorHover', {
-      feature,
-    })
-    return (
-      <path
-        data-testid={`chord-${feature.id()}`}
-        d={['M', ...startXY, 'Q', ...controlXY, ...endXY].join(' ')}
-        style={{ stroke: strokeColor }}
-        onClick={evt => {
-          if (endBlock && startBlock) {
-            onClick(feature, startBlock.region, endBlock.region, evt)
-          }
-        }}
-        onMouseOver={evt => {
-          if (!selected) {
-            evt.currentTarget.style.stroke = hoverStrokeColor
-            evt.currentTarget.style.strokeWidth = '3px'
-          }
-        }}
-        onMouseOut={evt => {
-          if (!selected) {
-            evt.currentTarget.style.stroke = strokeColor
-            evt.currentTarget.style.strokeWidth = '1px'
-          }
-        }}
-      />
-    )
-  }
-
-  return null
-})
-
-export default Chord

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,52 +0,0 @@
-import React, { useState } from 'react'
-import {
-  DataGrid,
-  GridColDef,
-  GridToolbar,
-  GridValidRowModel,
-} from '@mui/x-data-grid'
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
-
-export default function VariantAnnotPanel({
-  rows,
-  columns,
-}: {
-  rows: GridValidRowModel[]
-  columns: GridColDef[]
-}) {
-  const rowHeight = 25
-  const headerHeight = 100
-  const footerHeight = 50
-  const [checked, setChecked] = useState(false)
-  const height =
-    Math.min(rows.length, 100) * rowHeight +
-    headerHeight +
-    (checked ? 50 : 0) +
-    footerHeight
-  return rows.length ? (
-    <div>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={checked}
-            onChange={event => setChecked(event.target.checked)}
-          />
-        }
-        label={<Typography variant="body2">Show options</Typography>}
-      />
-      <div
-        style={{
-          height,
-          width: '100%',
-        }}
-      >
-        <DataGrid
-          rowHeight={rowHeight}
-          rows={rows}
-          columns={columns}
-          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>
-  )
-})