@jbrowse/plugin-dotplot-view 2.6.1 → 2.6.2

package/src/DotplotView/components/Header.tsx

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

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

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