@jbrowse/plugin-linear-comparative-view 2.6.1

package/src/LinearSyntenyView/components/ImportCustomTrack.tsx

@@ -0,0 +1,262 @@
+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

@@ -0,0 +1,221 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,15 @@
+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')),
+    })
+  })
+}