@jbrowse/plugin-dotplot-view 2.6.1

package/src/DotplotView/components/Header.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react'
+import { IconButton, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { getBpDisplayStr } from '@jbrowse/core/util'
+import { Menu } from '@jbrowse/core/ui'
+
+// icons
+import ZoomOut from '@mui/icons-material/ZoomOut'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import MoreVert from '@mui/icons-material/MoreVert'
+import { CursorMouse, CursorMove } from './CursorIcon'
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+
+// locals
+import { DotplotViewModel } from '../model'
+import DotplotWarnings from './DotplotWarnings'
+import PanButtons from './PanButtons'
+
+const useStyles = makeStyles()({
+  iconButton: {
+    margin: 5,
+  },
+  bp: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  headerBar: {
+    display: 'flex',
+    position: 'relative',
+  },
+})
+
+const DotplotControls = observer(({ model }: { model: DotplotViewModel }) => {
+  const { classes } = useStyles()
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement>()
+  return (
+    <div>
+      <IconButton onClick={model.zoomOutButton} className={classes.iconButton}>
+        <ZoomOut />
+      </IconButton>
+
+      <IconButton onClick={model.zoomInButton} className={classes.iconButton}>
+        <ZoomIn />
+      </IconButton>
+
+      <IconButton
+        onClick={() => model.activateTrackSelector()}
+        className={classes.iconButton}
+        title="Open track selector"
+        data-testid="circular_track_select"
+      >
+        <TrackSelectorIcon />
+      </IconButton>
+
+      <IconButton
+        onClick={event => setMenuAnchorEl(event.currentTarget)}
+        className={classes.iconButton}
+      >
+        <MoreVert />
+      </IconButton>
+
+      {menuAnchorEl ? (
+        <Menu
+          anchorEl={menuAnchorEl}
+          open
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setMenuAnchorEl(undefined)
+          }}
+          menuItems={[
+            {
+              onClick: () => model.squareView(),
+              label: 'Square view - same base pairs per pixel',
+            },
+            {
+              onClick: () => model.squareViewProportional(),
+              label: 'Rectanglularize view - same total bp',
+            },
+            {
+              onClick: () => model.showAllRegions(),
+              label: 'Show all regions',
+            },
+            {
+              onClick: () => model.setDrawCigar(!model.drawCigar),
+              type: 'checkbox',
+              label: 'Draw CIGAR',
+              checked: model.drawCigar,
+            },
+            {
+              onClick: () => model.setShowPanButtons(!model.showPanButtons),
+              label: 'Show pan buttons',
+              type: 'checkbox',
+              checked: model.showPanButtons,
+            },
+            {
+              label: 'Click and drag mode',
+              subMenu: [
+                {
+                  onClick: () => model.setCursorMode('move'),
+                  label: 'Pan by default, select region when ctrl key is held',
+                  icon: CursorMove,
+                  type: 'radio',
+                  checked: model.cursorMode === 'move',
+                },
+                {
+                  onClick: () => model.setCursorMode('crosshair'),
+                  label: 'Select region by default, pan when ctrl key is held',
+                  icon: CursorMouse,
+                  type: 'radio',
+                  checked: model.cursorMode === 'crosshair',
+                },
+              ],
+            },
+            {
+              label: 'Wheel scroll mode',
+              subMenu: [
+                {
+                  onClick: () => model.setWheelMode('pan'),
+                  label: 'Pans view',
+                  type: 'radio',
+                  checked: model.wheelMode === 'pan',
+                },
+                {
+                  onClick: () => model.setWheelMode('zoom'),
+                  label: 'Zooms view',
+                  type: 'radio',
+                  checked: model.wheelMode === 'zoom',
+                },
+                {
+                  onClick: () => model.setWheelMode('none'),
+                  label: 'Disable',
+                  type: 'radio',
+                  checked: model.wheelMode === 'none',
+                },
+              ],
+            },
+          ]}
+          onClose={() => setMenuAnchorEl(undefined)}
+        />
+      ) : null}
+    </div>
+  )
+})
+
+export default observer(function Header({
+  model,
+  selection,
+}: {
+  model: DotplotViewModel
+  selection?: { width: number; height: number }
+}) {
+  const { classes } = useStyles()
+  const { hview, vview, showPanButtons } = model
+  return (
+    <div className={classes.headerBar}>
+      <DotplotControls model={model} />
+      <Typography className={classes.bp} variant="body2" color="textSecondary">
+        x: {hview.assemblyNames.join(',')} {getBpDisplayStr(hview.currBp)}
+        <br />
+        y: {vview.assemblyNames.join(',')} {getBpDisplayStr(vview.currBp)}
+      </Typography>
+      {selection ? (
+        <Typography
+          className={classes.bp}
+          variant="body2"
+          color="textSecondary"
+        >
+          {`width:${getBpDisplayStr(hview.bpPerPx * selection.width)}`} <br />
+          {`height:${getBpDisplayStr(vview.bpPerPx * selection.height)}`}
+        </Typography>
+      ) : null}
+      <div className={classes.spacer} />
+      <DotplotWarnings model={model} />
+      {showPanButtons ? <PanButtons model={model} /> : null}
+    </div>
+  )
+})

package/src/DotplotView/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/DotplotView/components/ImportForm.tsx

@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Button,
+  Container,
+  FormControl,
+  FormLabel,
+  FormControlLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { transaction } from 'mobx'
+import { SnapshotIn } from 'mobx-state-tree'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util'
+import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
+
+// locals
+import { DotplotViewModel } 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: DotplotViewModel
+  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}
+    </>
+  )
+}
+
+const DotplotImportForm = observer(({ model }: { model: DotplotViewModel }) => {
+  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>()
+
+  function onOpenClick() {
+    try {
+      if (!isSessionWithAddTracks(session)) {
+        return
+      }
+      setError(undefined)
+      model.setError(undefined)
+      transaction(() => {
+        if (sessionTrackData) {
+          session.addTrackConf(sessionTrackData)
+          model.toggleTrack(sessionTrackData.trackId)
+        } else if (showTrackId) {
+          model.showTrack(showTrackId)
+        }
+
+        model.setViews([
+          { bpPerPx: 0.1, offsetPx: 0 },
+          { bpPerPx: 0.1, offsetPx: 0 },
+        ])
+        model.setAssemblyNames(assembly2, assembly1)
+      })
+    } catch (e) {
+      console.error(e)
+      setError(e)
+    }
+  }
+
+  // this is a combination of any displayed error message we have
+  const displayError = error || model.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 }}>
+            <Typography style={{ textAlign: 'center' }}>
+              Select assemblies for dotplot view
+            </Typography>
+            <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>
+  )
+})
+
+export default DotplotImportForm