@jbrowse/plugin-linear-comparative-view 2.6.1 → 2.6.3

package/src/LGVSyntenyDisplay/model.ts

@@ -1,177 +0,0 @@
-import {
-  ConfigurationReference,
-  AnyConfigurationSchemaType,
-} from '@jbrowse/core/configuration'
-import {
-  getSession,
-  getContainingTrack,
-  getContainingView,
-  Feature,
-} from '@jbrowse/core/util'
-import {
-  MismatchParser,
-  linearPileupDisplayStateModelFactory,
-} from '@jbrowse/plugin-alignments'
-import { IAnyStateTreeNode, types } from 'mobx-state-tree'
-import { when } from 'mobx'
-
-// locals
-import { LinearSyntenyViewModel } from '../LinearSyntenyView/model'
-
-type LSV = LinearSyntenyViewModel
-
-const { parseCigar } = MismatchParser
-
-function findPosInCigar(cigar: string[], startX: number) {
-  let featX = 0
-  let mateX = 0
-  for (let i = 0; i < cigar.length; i++) {
-    const len = +cigar[i]
-    const op = cigar[i + 1]
-    const min = Math.min(len, startX - featX)
-
-    if (featX >= startX) {
-      break
-    } else if (op === 'I') {
-      mateX += len
-    } else if (op === 'D') {
-      featX += min
-    } else if (op === 'M') {
-      mateX += min
-      featX += min
-    }
-  }
-  return [featX, mateX]
-}
-
-async function navToSynteny(feature: Feature, self: IAnyStateTreeNode) {
-  const session = getSession(self)
-  const track = getContainingTrack(self)
-  const view = getContainingView(self)
-  const reg = view.dynamicBlocks.contentBlocks[0]
-  const cigar = feature.get('CIGAR')
-  const strand = feature.get('strand')
-  const regStart = reg.start
-  const regEnd = reg.end
-  const featStart = feature.get('start')
-  const featEnd = feature.get('end')
-  const mate = feature.get('mate')
-  const mateStart = mate.start
-  const mateEnd = mate.end
-  const mateAsm = mate.assemblyName
-  const mateRef = mate.refName
-  const featAsm = reg.assemblyName
-  const featRef = reg.refName
-
-  let rMateStart: number
-  let rMateEnd: number
-  let rFeatStart: number
-  let rFeatEnd: number
-
-  if (cigar) {
-    const p = parseCigar(cigar)
-    const [fStartX, mStartX] = findPosInCigar(p, regStart - featStart)
-    const [fEndX, mEndX] = findPosInCigar(p, regEnd - featStart)
-
-    // avoid multiply by 0 with strand undefined
-    const flipper = strand === -1 ? -1 : 1
-    rFeatStart = featStart + fStartX
-    rFeatEnd = featStart + fEndX
-    rMateStart = (strand === -1 ? mateEnd : mateStart) + mStartX * flipper
-    rMateEnd = (strand === -1 ? mateEnd : mateStart) + mEndX * flipper
-  } else {
-    rFeatStart = featStart
-    rFeatEnd = featEnd
-    rMateStart = mateStart
-    rMateEnd = mateEnd
-  }
-  const trackId = track.configuration.trackId
-
-  const view2 = session.addView('LinearSyntenyView', {
-    type: 'LinearSyntenyView',
-    views: [
-      {
-        id: `${Math.random()}`,
-        type: 'LinearGenomeView',
-        hideHeader: true,
-      },
-      {
-        id: `${Math.random()}`,
-        type: 'LinearGenomeView',
-        hideHeader: true,
-      },
-    ],
-    tracks: [
-      {
-        configuration: trackId,
-        type: 'SyntenyTrack',
-        displays: [
-          {
-            type: 'LinearSyntenyDisplay',
-            configuration: `${trackId}-LinearSyntenyDisplay`,
-          },
-        ],
-      },
-    ],
-  }) as LSV
-  const f = (n: number) => Math.floor(n)
-  const l1 = `${featRef}:${f(rFeatStart)}-${f(rFeatEnd)}`
-  const m1 = Math.min(rMateStart, rMateEnd)
-  const m2 = Math.max(rMateStart, rMateEnd)
-  const l2 = `${mateRef}:${f(m1)}-${f(m2)}${strand === -1 ? '[rev]' : ''}`
-  await when(() => view2.width !== undefined)
-  await Promise.all([
-    view2.views[0].navToLocString(l1, featAsm),
-    view2.views[1].navToLocString(l2, mateAsm),
-  ])
-}
-
-/**
- * #stateModel LGVSyntenyDisplay
- * extends `LinearPileupDisplay`, displays location of "synteny" feature in a
- * plain LGV, allowing linking out to external synteny views
- */
-function stateModelFactory(schema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LGVSyntenyDisplay',
-      linearPileupDisplayStateModelFactory(schema),
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LGVSyntenyDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(schema),
-      }),
-    )
-    .views(self => {
-      const superContextMenuItems = self.contextMenuItems
-      return {
-        contextMenuItems() {
-          const feature = self.contextMenuFeature
-          return [
-            ...superContextMenuItems(),
-            ...(feature
-              ? [
-                  {
-                    label: 'Open synteny view for this position',
-                    onClick: () => navToSynteny(feature, self),
-                  },
-                ]
-              : []),
-          ]
-        },
-      }
-    })
-    .actions(self => ({
-      afterCreate() {
-        // use color by strand to help indicate inversions better
-        self.setColorScheme({ type: 'strand' })
-      },
-    }))
-}
-
-export default stateModelFactory

package/src/LaunchLinearSyntenyView.ts

@@ -1,86 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AbstractSessionModel } from '@jbrowse/core/util'
-import { LinearSyntenyViewModel } from './LinearSyntenyView/model'
-import { when } from 'mobx'
-
-type LSV = LinearSyntenyViewModel
-
-export default function LaunchLinearSyntenyView(pluginManager: PluginManager) {
-  pluginManager.addToExtensionPoint(
-    'LaunchView-LinearSyntenyView',
-    // @ts-expect-error
-    async ({
-      session,
-      views,
-      tracks = [],
-    }: {
-      session: AbstractSessionModel
-      views: { loc: string; assembly: string; tracks?: string[] }[]
-      tracks?: string[]
-    }) => {
-      try {
-        const { assemblyManager } = session
-        const model = session.addView('LinearSyntenyView', {}) as LSV
-
-        await when(() => !!model.width)
-
-        model.setViews(
-          await Promise.all(
-            views.map(async view => {
-              const asm = await assemblyManager.waitForAssembly(view.assembly)
-              if (!asm) {
-                throw new Error(`Assembly ${view.assembly} failed to load`)
-              }
-              return {
-                type: 'LinearGenomeView' as const,
-                bpPerPx: 1,
-                offsetPx: 0,
-                hideHeader: true,
-                displayedRegions: asm.regions,
-              }
-            }),
-          ),
-        )
-
-        await Promise.all(model.views.map(view => when(() => view.initialized)))
-
-        const idsNotFound = [] as string[]
-        await Promise.all(
-          views.map(async (data, idx) => {
-            const view = model.views[idx]
-            const { loc, tracks = [] } = data
-            await view.navToLocString(loc)
-            tracks.forEach(track => tryTrack(view, track, idsNotFound))
-          }),
-        )
-
-        tracks.forEach(track => tryTrack(model, track, idsNotFound))
-
-        if (idsNotFound.length) {
-          throw new Error(
-            `Could not resolve identifiers: ${idsNotFound.join(',')}`,
-          )
-        }
-      } catch (e) {
-        session.notify(`${e}`, 'error')
-        throw e
-      }
-    },
-  )
-}
-
-function tryTrack(
-  model: { showTrack: (arg: string) => void },
-  trackId: string,
-  idsNotFound: string[],
-) {
-  try {
-    model.showTrack(trackId)
-  } catch (e) {
-    if (`${e}`.match('Could not resolve identifier')) {
-      idsNotFound.push(trackId)
-    } else {
-      throw e
-    }
-  }
-}

package/src/LinearComparativeDisplay/configSchemaF.ts

@@ -1,22 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-
-/**
- * #config LinearComparativeDisplay
- */
-function configSchemaFactory(pluginManager: any) {
-  return ConfigurationSchema(
-    'LinearComparativeDisplay',
-    {},
-    {
-      explicitlyTyped: true,
-
-      /**
-       * #identifier
-       */
-      explicitIdentifier: 'displayId',
-    },
-  )
-}
-
-export default configSchemaFactory

package/src/LinearComparativeDisplay/index.ts

@@ -1,21 +0,0 @@
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-import configSchemaFactory from './configSchemaF'
-import stateModelFactory from './stateModelFactory'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const configSchema = configSchemaFactory(pluginManager)
-    return new DisplayType({
-      name: 'LinearComparativeDisplay',
-      configSchema,
-      stateModel: stateModelFactory(configSchema),
-      trackType: 'SyntenyTrack',
-      viewType: 'LinearComparativeView',
-      ReactComponent: () => {
-        return null
-      },
-    })
-  })
-}

package/src/LinearComparativeDisplay/stateModelFactory.ts

@@ -1,212 +0,0 @@
-import {
-  readConfObject,
-  ConfigurationReference,
-  AnyConfigurationSchemaType,
-} from '@jbrowse/core/configuration'
-import { types, getSnapshot, Instance } from 'mobx-state-tree'
-import {
-  dedupe,
-  Feature,
-  getContainingView,
-  getSession,
-  makeAbortableReaction,
-} from '@jbrowse/core/util'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import { LinearComparativeViewModel } from '../LinearComparativeView/model'
-
-/**
- * #stateModel LinearComparativeDisplay
- */
-function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearComparativeDisplay',
-      BaseDisplay,
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearComparativeDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
-        height: 100,
-      }),
-    )
-    .volatile((/* self */) => ({
-      renderInProgress: undefined as AbortController | undefined,
-      features: undefined as Feature[] | undefined,
-      message: undefined as string | undefined,
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      renderProps() {
-        return {
-          rpcDriverName: self.rpcDriverName,
-          displayModel: self,
-          highResolutionScaling: 2,
-        }
-      },
-    }))
-    .actions(self => {
-      let renderInProgress: undefined | AbortController
-
-      return {
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setLoading(abortController: AbortController) {
-          self.message = undefined
-          self.error = undefined
-          renderInProgress = abortController
-        },
-
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setMessage(messageText: string) {
-          if (renderInProgress && !renderInProgress.signal.aborted) {
-            renderInProgress.abort()
-          }
-          self.message = messageText
-          self.error = undefined
-          renderInProgress = undefined
-        },
-
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setRendered(args?: { features: Feature[] }) {
-          if (!args) {
-            return
-          }
-          const { features } = args
-          const existingFeatures = self.features || []
-
-          const featIds = new Set(existingFeatures.map(f => f.id()) || [])
-          const newFeatIds = new Set(features?.map(f => f.id()) || [])
-
-          let foundNewFeatureNotInExistingMap = false
-          let foundExistingFeatureNotInNewMap = false
-          for (let i = 0; i < features.length; i++) {
-            if (!featIds.has(features[i].id())) {
-              foundNewFeatureNotInExistingMap = true
-              break
-            }
-          }
-          for (let i = 0; i < existingFeatures.length; i++) {
-            if (!newFeatIds.has(existingFeatures[i].id())) {
-              foundExistingFeatureNotInNewMap = true
-              break
-            }
-          }
-
-          self.message = undefined
-          self.error = undefined
-          renderInProgress = undefined
-
-          if (
-            foundNewFeatureNotInExistingMap ||
-            foundExistingFeatureNotInNewMap ||
-            !self.features
-          ) {
-            self.features = features
-          }
-        },
-
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setError(error: unknown) {
-          console.error(error)
-          if (renderInProgress && !renderInProgress.signal.aborted) {
-            renderInProgress.abort()
-          }
-          // the rendering failed for some reason
-          self.message = undefined
-          self.error = error
-          renderInProgress = undefined
-        },
-      }
-    })
-    .actions(self => ({
-      afterAttach() {
-        makeAbortableReaction(
-          // @ts-expect-error
-          self,
-          renderBlockData,
-          renderBlockEffect,
-          {
-            name: `${self.type} ${self.id} rendering`,
-            delay: 1000,
-            fireImmediately: true,
-          },
-          self.setLoading,
-          self.setRendered,
-          self.setError,
-        )
-      },
-    }))
-}
-function renderBlockData(self: LinearComparativeDisplay) {
-  const { rpcManager } = getSession(self)
-  const display = self
-
-  // Alternative to readConfObject(config) is below used because renderProps is
-  // something under our control.  Compare to serverSideRenderedBlock
-  readConfObject(self.configuration)
-
-  const { adapterConfig } = self
-  const parent = getContainingView(self) as LinearComparativeViewModel
-  const sessionId = getRpcSessionId(self)
-  getSnapshot(parent)
-
-  return parent.initialized
-    ? {
-        rpcManager,
-        renderProps: {
-          ...display.renderProps(),
-          view: parent,
-          adapterConfig,
-          sessionId,
-          timeout: 1000000,
-          self,
-        },
-      }
-    : undefined
-}
-
-async function renderBlockEffect(props: ReturnType<typeof renderBlockData>) {
-  if (!props) {
-    return
-  }
-
-  const { rpcManager, renderProps } = props
-  const { adapterConfig } = renderProps
-  const view0 = renderProps.view.views[0]
-
-  const features = (await rpcManager.call('getFeats', 'CoreGetFeatures', {
-    regions: view0.staticBlocks.contentBlocks,
-    sessionId: 'getFeats',
-    adapterConfig,
-  })) as Feature[]
-
-  return {
-    features: dedupe(features, f => f.id()),
-  }
-}
-
-export default stateModelFactory
-export type LinearComparativeDisplayModel = ReturnType<typeof stateModelFactory>
-export type LinearComparativeDisplay = Instance<LinearComparativeDisplayModel>

package/src/LinearComparativeView/components/Header.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react'
-import { IconButton, Typography } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { SearchBox } from '@jbrowse/plugin-linear-genome-view'
-import { observer } from 'mobx-react'
-import { Menu } from '@jbrowse/core/ui'
-
-// icons
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-
-// locals
-import { LinearComparativeViewModel } from '../model'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-
-type LCV = LinearComparativeViewModel
-
-const useStyles = makeStyles()(() => ({
-  headerBar: {
-    gridArea: '1/1/auto/span 2',
-    display: 'flex',
-  },
-  spacer: {
-    flexGrow: 1,
-  },
-  iconButton: {
-    margin: 5,
-  },
-  bp: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: 10,
-  },
-  searchContainer: {
-    marginLeft: 5,
-  },
-  searchBox: {
-    display: 'flex',
-  },
-}))
-
-const TrackSelector = observer(({ model }: { model: LCV }) => {
-  return (
-    <IconButton
-      onClick={model.activateTrackSelector}
-      title="Open track selector"
-    >
-      <TrackSelectorIcon />
-    </IconButton>
-  )
-})
-
-const Header = observer(function ({ model }: { model: LCV }) {
-  const { classes } = useStyles()
-  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement>()
-  const anyShowHeaders = model.views.some(view => !view.hideHeader)
-  return (
-    <div className={classes.headerBar}>
-      <TrackSelector model={model} />
-
-      <IconButton
-        onClick={event => setMenuAnchorEl(event.currentTarget)}
-        className={classes.iconButton}
-      >
-        <MoreVertIcon />
-      </IconButton>
-      {!anyShowHeaders
-        ? model.views.map(view => (
-            <div key={view.id} className={classes.searchBox}>
-              <div className={classes.searchContainer}>
-                <SearchBox model={view} showHelp={false} />
-              </div>
-              <div className={classes.bp}>
-                <Typography
-                  variant="body2"
-                  color="textSecondary"
-                  className={classes.bp}
-                >
-                  {Math.round(view.coarseTotalBp).toLocaleString('en-US')} bp
-                </Typography>
-              </div>
-            </div>
-          ))
-        : null}
-
-      <div className={classes.spacer} />
-
-      {menuAnchorEl ? (
-        <Menu
-          anchorEl={menuAnchorEl}
-          open
-          onMenuItemClick={(_event, callback) => {
-            callback()
-            setMenuAnchorEl(undefined)
-          }}
-          menuItems={model.headerMenuItems()}
-          onClose={() => setMenuAnchorEl(undefined)}
-        />
-      ) : null}
-    </div>
-  )
-})
-
-export default Header