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

package/src/LinearSyntenyView/components/ImportCustomTrack.tsx

@@ -1,262 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { SnapshotIn } from 'mobx-state-tree'
-import path from 'path'
-import {
-  FormControlLabel,
-  Grid,
-  Paper,
-  Radio,
-  RadioGroup,
-  Typography,
-} from '@mui/material'
-import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
-import { FileLocation } from '@jbrowse/core/util/types'
-import { observer } from 'mobx-react'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-
-function getName(
-  sessionTrackData?: { uri: string } | { localPath: string } | { name: string },
-) {
-  return sessionTrackData
-    ? // @ts-expect-error
-      sessionTrackData.uri ||
-        // @ts-expect-error
-        sessionTrackData.localPath ||
-        // @ts-expect-error
-        sessionTrackData.name
-    : undefined
-}
-
-function stripGz(fileName: string) {
-  return fileName.endsWith('.gz') ? fileName.slice(0, -3) : fileName
-}
-
-function getAdapter({
-  radioOption,
-  assembly1,
-  assembly2,
-  fileLocation,
-  bed1Location,
-  bed2Location,
-}: {
-  radioOption: string
-  assembly1: string
-  assembly2: string
-  fileLocation?: FileLocation
-  bed1Location?: FileLocation
-  bed2Location?: FileLocation
-}) {
-  if (radioOption === '.paf') {
-    return {
-      type: 'PAFAdapter',
-      pafLocation: fileLocation,
-      queryAssembly: assembly1,
-      targetAssembly: assembly2,
-    }
-  } else if (radioOption === '.out') {
-    return {
-      type: 'MashMapAdapter',
-      outLocation: fileLocation,
-      queryAssembly: assembly1,
-      targetAssembly: assembly2,
-    }
-  } else if (radioOption === '.delta') {
-    return {
-      type: 'DeltaAdapter',
-      deltaLocation: fileLocation,
-      queryAssembly: assembly1,
-      targetAssembly: assembly2,
-    }
-  } else if (radioOption === '.chain') {
-    return {
-      type: 'ChainAdapter',
-      chainLocation: fileLocation,
-      queryAssembly: assembly1,
-      targetAssembly: assembly2,
-    }
-  } else if (radioOption === '.anchors') {
-    return {
-      type: 'MCScanAnchorsAdapter',
-      mcscanAnchorsLocation: fileLocation,
-      bed1Location,
-      bed2Location,
-      assemblyNames: [assembly1, assembly2],
-    }
-  } else if (radioOption === '.anchors.simple') {
-    return {
-      type: 'MCScanSimpleAnchorsAdapter',
-      mcscanSimpleAnchorsLocation: fileLocation,
-      bed1Location,
-      bed2Location,
-      assemblyNames: [assembly1, assembly2],
-    }
-  } else {
-    throw new Error('Unknown type')
-  }
-}
-
-type Conf = SnapshotIn<AnyConfigurationModel>
-
-const OpenTrack = observer(
-  ({
-    sessionTrackData,
-    assembly1,
-    assembly2,
-    setSessionTrackData,
-  }: {
-    sessionTrackData: Conf
-    assembly1: string
-    assembly2: string
-    setSessionTrackData: (arg: Conf) => void
-  }) => {
-    const [bed2Location, setBed2Location] = useState<FileLocation>()
-    const [bed1Location, setBed1Location] = useState<FileLocation>()
-    const [fileLocation, setFileLocation] = useState<FileLocation>()
-    const [value, setValue] = useState('')
-    const [error, setError] = useState<unknown>()
-    const fileName = getName(fileLocation)
-
-    const radioOption =
-      value || (fileName ? path.extname(stripGz(fileName)) : '')
-
-    useEffect(() => {
-      try {
-        if (fileLocation) {
-          const fn = fileName ? path.basename(fileName) : 'MyTrack'
-          const trackId = `${fn}-${Date.now()}`
-          setError(undefined)
-
-          setSessionTrackData({
-            trackId,
-            name: fn,
-            assemblyNames: [assembly2, assembly1],
-            type: 'SyntenyTrack',
-            adapter: getAdapter({
-              radioOption,
-              assembly1,
-              assembly2,
-              fileLocation,
-              bed1Location,
-              bed2Location,
-            }),
-          })
-        }
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      }
-    }, [
-      fileName,
-      assembly1,
-      assembly2,
-      bed1Location,
-      bed2Location,
-      fileLocation,
-      radioOption,
-      setSessionTrackData,
-    ])
-    return (
-      <Paper style={{ padding: 12 }}>
-        {error ? <ErrorMessage error={error} /> : null}
-        <Typography style={{ textAlign: 'center' }}>
-          Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or
-          .anchors.simple (MCScan) file to view in the dotplot. These file types
-          can also be gzipped. The first assembly should be the query sequence
-          (e.g. left column of the PAF) and the second assembly should be the
-          target sequence (e.g. right column of the PAF)
-        </Typography>
-        <RadioGroup
-          value={radioOption}
-          onChange={event => setValue(event.target.value)}
-        >
-          <Grid container justifyContent="center">
-            <Grid item>
-              <FormControlLabel value=".paf" control={<Radio />} label=".paf" />
-            </Grid>
-            <Grid item>
-              <FormControlLabel value=".out" control={<Radio />} label=".out" />
-            </Grid>
-            <Grid item>
-              <FormControlLabel
-                value=".delta"
-                control={<Radio />}
-                label=".delta"
-              />
-            </Grid>
-            <Grid item>
-              <FormControlLabel
-                value=".chain"
-                control={<Radio />}
-                label=".chain"
-              />
-            </Grid>
-            <Grid item>
-              <FormControlLabel
-                value=".anchors"
-                control={<Radio />}
-                label=".anchors"
-              />
-            </Grid>
-            <Grid item>
-              <FormControlLabel
-                value=".anchors.simple"
-                control={<Radio />}
-                label=".anchors.simple"
-              />
-            </Grid>
-          </Grid>
-        </RadioGroup>
-        <Grid container justifyContent="center">
-          <Grid item>
-            {value === '.anchors' || value === '.anchors.simple' ? (
-              <div>
-                <div style={{ margin: 20 }}>
-                  Open the {value} and .bed files for both genome assemblies
-                  from the MCScan (Python version) pipeline{' '}
-                  <a href="https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)">
-                    (more info)
-                  </a>
-                </div>
-                <div style={{ display: 'flex' }}>
-                  <div>
-                    <FileSelector
-                      name=".anchors file"
-                      description=""
-                      location={fileLocation}
-                      setLocation={loc => setFileLocation(loc)}
-                    />
-                  </div>
-                  <div>
-                    <FileSelector
-                      name="genome 1 .bed (left column of anchors file)"
-                      description=""
-                      location={bed1Location}
-                      setLocation={loc => setBed1Location(loc)}
-                    />
-                  </div>
-                  <div>
-                    <FileSelector
-                      name="genome 2 .bed (right column of anchors file)"
-                      description=""
-                      location={bed2Location}
-                      setLocation={loc => setBed2Location(loc)}
-                    />
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <FileSelector
-                name={value ? value + ' location' : ''}
-                description=""
-                location={fileLocation}
-                setLocation={loc => setFileLocation(loc)}
-              />
-            )}
-          </Grid>
-        </Grid>
-      </Paper>
-    )
-  },
-)
-
-export default OpenTrack

package/src/LinearSyntenyView/components/ImportForm.tsx

@@ -1,221 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import {
-  Button,
-  Container,
-  FormControl,
-  FormLabel,
-  FormControlLabel,
-  Grid,
-  Paper,
-  Radio,
-  RadioGroup,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import { SnapshotIn } from 'mobx-state-tree'
-import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util'
-import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
-
-// locals
-import { LinearSyntenyViewModel } from '../model'
-import ImportCustomTrack from './ImportCustomTrack'
-import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelector'
-
-const useStyles = makeStyles()(theme => ({
-  importFormContainer: {
-    padding: theme.spacing(4),
-    margin: '0 auto',
-  },
-  assemblySelector: {
-    width: '75%',
-    margin: '0 auto',
-  },
-}))
-
-type Conf = SnapshotIn<AnyConfigurationModel>
-
-function TrackSelector({
-  setSessionTrackData,
-  setShowTrackId,
-  sessionTrackData,
-  assembly1,
-  assembly2,
-  model,
-}: {
-  sessionTrackData: Conf
-  setSessionTrackData: (arg: Conf) => void
-  setShowTrackId: (arg?: string) => void
-  model: LinearSyntenyViewModel
-  assembly1: string
-  assembly2: string
-}) {
-  const [choice, setChoice] = useState('none')
-
-  useEffect(() => {
-    if (choice === 'none') {
-      setSessionTrackData(undefined)
-      setShowTrackId(undefined)
-    }
-  }, [choice, setSessionTrackData, setShowTrackId])
-  return (
-    <>
-      <FormControl>
-        <FormLabel id="group-label">
-          (Optional) Select or add a synteny track
-        </FormLabel>
-        <RadioGroup
-          row
-          value={choice}
-          onChange={event => setChoice(event.target.value)}
-          aria-labelledby="group-label"
-        >
-          <FormControlLabel value="none" control={<Radio />} label="None" />
-          <FormControlLabel
-            value="tracklist"
-            control={<Radio />}
-            label="Existing track"
-          />
-          <FormControlLabel
-            value="custom"
-            control={<Radio />}
-            label="New track"
-          />
-        </RadioGroup>
-      </FormControl>
-      {choice === 'custom' ? (
-        <ImportCustomTrack
-          setSessionTrackData={setSessionTrackData}
-          sessionTrackData={sessionTrackData}
-          assembly2={assembly2}
-          assembly1={assembly1}
-        />
-      ) : null}
-      {choice === 'tracklist' ? (
-        <ImportSyntenyTrackSelector
-          model={model}
-          assembly1={assembly1}
-          assembly2={assembly2}
-          setShowTrackId={setShowTrackId}
-        />
-      ) : null}
-    </>
-  )
-}
-
-export default observer(function ({
-  model,
-}: {
-  model: LinearSyntenyViewModel
-}) {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { assemblyNames } = session
-  const [assembly2, setAssembly2] = useState(assemblyNames[0] || '')
-  const [assembly1, setAssembly1] = useState(assemblyNames[0] || '')
-  const [error, setError] = useState<unknown>()
-  const [sessionTrackData, setSessionTrackData] = useState<Conf>()
-  const [showTrackId, setShowTrackId] = useState<string>()
-
-  async function onOpenClick() {
-    try {
-      if (!isSessionWithAddTracks(session)) {
-        return
-      }
-      setError(undefined)
-
-      const { assemblyManager } = session
-      const assemblies = [assembly1, assembly2]
-      model.setViews(
-        await Promise.all(
-          assemblies.map(async sel => {
-            const asm = await assemblyManager.waitForAssembly(sel)
-            if (!asm) {
-              throw new Error(`Assembly ${sel} failed to load`)
-            }
-            return {
-              type: 'LinearGenomeView' as const,
-              bpPerPx: 1,
-              offsetPx: 0,
-              hideHeader: true,
-              displayedRegions: asm.regions,
-            }
-          }),
-        ),
-      )
-      model.views.forEach(view => view.setWidth(model.width))
-      if (sessionTrackData) {
-        session.addTrackConf(sessionTrackData)
-        model.toggleTrack(sessionTrackData.trackId)
-      } else if (showTrackId) {
-        model.showTrack(showTrackId)
-      }
-    } catch (e) {
-      console.error(e)
-      setError(e)
-    }
-  }
-
-  // this is a combination of any displayed error message we have
-  const displayError = error
-  return (
-    <Container className={classes.importFormContainer}>
-      {displayError ? <ErrorMessage error={displayError} /> : null}
-      <Grid
-        container
-        spacing={1}
-        justifyContent="center"
-        alignItems="center"
-        className={classes.assemblySelector}
-      >
-        <Grid item>
-          <Paper style={{ padding: 12 }}>
-            <p style={{ textAlign: 'center' }}>
-              Select assemblies for linear synteny view
-            </p>
-            <Grid
-              container
-              spacing={1}
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Grid item>
-                <AssemblySelector
-                  selected={assembly1}
-                  onChange={val => setAssembly1(val)}
-                  session={session}
-                />
-              </Grid>
-              <Grid item>
-                <AssemblySelector
-                  selected={assembly2}
-                  onChange={val => setAssembly2(val)}
-                  session={session}
-                />
-              </Grid>
-              <Grid item>
-                <FormControl>
-                  <Button
-                    onClick={onOpenClick}
-                    variant="contained"
-                    color="primary"
-                  >
-                    Launch
-                  </Button>
-                </FormControl>
-              </Grid>
-            </Grid>
-          </Paper>
-          <TrackSelector
-            setShowTrackId={setShowTrackId}
-            assembly2={assembly2}
-            assembly1={assembly1}
-            setSessionTrackData={setSessionTrackData}
-            sessionTrackData={sessionTrackData}
-            model={model}
-          />
-        </Grid>
-      </Grid>
-    </Container>
-  )
-})

package/src/LinearSyntenyView/components/ImportSyntenyTrackSelector.tsx

@@ -1,82 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Select, MenuItem, Paper, Typography } from '@mui/material'
-import { getSession } from '@jbrowse/core/util'
-import { getTrackName } from '@jbrowse/core/util/tracks'
-import { ErrorMessage } from '@jbrowse/core/ui'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { observer } from 'mobx-react'
-
-// locals
-import { LinearSyntenyViewModel } from '../model'
-
-function f(track: AnyConfigurationModel, assembly1: string, assembly2: string) {
-  const assemblyNames = readConfObject(track, 'assemblyNames')
-  return (
-    assemblyNames.includes(assembly1) &&
-    assemblyNames.includes(assembly2) &&
-    track.type.includes('Synteny')
-  )
-}
-
-const Selector = observer(
-  ({
-    model,
-    assembly1,
-    assembly2,
-    setShowTrackId,
-  }: {
-    model: LinearSyntenyViewModel
-    assembly1: string
-    assembly2: string
-    setShowTrackId: (arg: string) => void
-  }) => {
-    const session = getSession(model)
-    const { tracks = [], sessionTracks = [] } = session
-    const allTracks = [...tracks, ...sessionTracks] as AnyConfigurationModel[]
-    const filteredTracks = allTracks.filter(t => f(t, assembly2, assembly1))
-    const resetTrack = filteredTracks[0]?.trackId || ''
-    const [value, setValue] = useState(resetTrack)
-    useEffect(() => {
-      // if assembly1/assembly2 changes, then we will want to use this effect to
-      // change the state of the useState because it otherwise gets locked to a
-      // stale value
-      setValue(resetTrack)
-    }, [resetTrack])
-
-    useEffect(() => {
-      // sets track data in a useEffect because the initial load is needed as well
-      // as onChange's to the select box
-      setShowTrackId(value)
-    }, [value, setShowTrackId])
-    return (
-      <Paper style={{ padding: 12 }}>
-        <Typography paragraph>
-          Select a track from the select box below, the track will be shown when
-          you hit "Launch".
-        </Typography>
-
-        {filteredTracks.length ? (
-          <Select
-            value={value}
-            onChange={event => setValue(event.target.value)}
-          >
-            {filteredTracks.map(track => (
-              <MenuItem key={track.trackId} value={track.trackId}>
-                {getTrackName(track, session)}
-              </MenuItem>
-            ))}
-          </Select>
-        ) : (
-          <ErrorMessage
-            error={`No synteny tracks found for ${assembly1},${assembly2}`}
-          />
-        )}
-      </Paper>
-    )
-  },
-)
-
-export default Selector

package/src/LinearSyntenyView/components/LinearSyntenyView.tsx

@@ -1,20 +0,0 @@
-import React, { lazy } from 'react'
-import { observer } from 'mobx-react'
-
-// locals
-import LinearComparativeViewComponent from '../../LinearComparativeView/components/LinearComparativeView'
-import { LinearSyntenyViewModel } from '../model'
-
-const ImportForm = lazy(() => import('./ImportForm'))
-
-type LSV = LinearSyntenyViewModel
-
-const LinearSyntenyView = observer(({ model }: { model: LSV }) => {
-  return !model.initialized ? (
-    <ImportForm model={model} />
-  ) : (
-    <LinearComparativeViewComponent model={model} />
-  )
-})
-
-export default LinearSyntenyView

package/src/LinearSyntenyView/index.ts

@@ -1,15 +0,0 @@
-import { lazy } from 'react'
-import PluginManager from '@jbrowse/core/PluginManager'
-import modelFactory from './model'
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addViewType(() => {
-    return new ViewType({
-      name: 'LinearSyntenyView',
-      displayName: 'Linear synteny view',
-      stateModel: modelFactory(pluginManager),
-      ReactComponent: lazy(() => import('./components/LinearSyntenyView')),
-    })
-  })
-}