@jbrowse/plugin-dotplot-view 2.6.1 → 2.6.2

package/src/DotplotView/components/ImportSyntenyTrackSelector.tsx

@@ -1,90 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Select, MenuItem, Paper, Typography } from '@mui/material'
-import { getTrackName } from '@jbrowse/core/util/tracks'
-import { getSession } from '@jbrowse/core/util'
-import { ErrorMessage } from '@jbrowse/core/ui'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { observer } from 'mobx-react'
-
-// icons
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-
-// locals
-import { DotplotViewModel } 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: DotplotViewModel
-    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>
-
-        <Typography paragraph>
-          Note: there is a track selector <i>inside</i> the DotplotView, which
-          can turn on one or more SyntenyTracks (more than one can be displayed
-          at once). Look for the track selector icon <TrackSelectorIcon />
-        </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/DotplotView/components/PanButtons.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import { IconButton, Paper } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-// icons
-import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
-import ArrowDropUp from '@mui/icons-material/ArrowDropUp'
-import ArrowLeft from '@mui/icons-material/ArrowLeft'
-import ArrowRight from '@mui/icons-material/ArrowRight'
-import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomOut from '@mui/icons-material/ZoomOut'
-
-// locals
-import { DotplotViewModel } from '../model'
-
-const useStyles = makeStyles()({
-  dpad: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    margin: 0,
-    position: 'absolute',
-    right: 50,
-    zIndex: 1000,
-    top: 50,
-  },
-  icon: {
-    padding: 0,
-    margin: 0,
-  },
-})
-
-export default observer(function PanButtons({
-  model,
-}: {
-  model: DotplotViewModel
-}) {
-  const { classes } = useStyles()
-  return (
-    <Paper className={classes.dpad} elevation={6}>
-      <div />
-      <IconButton
-        className={classes.icon}
-        onClick={() => model.vview.scroll(100)}
-      >
-        <ArrowDropUp />
-      </IconButton>
-      <div />
-
-      <IconButton
-        className={classes.icon}
-        onClick={() => model.hview.scroll(-100)}
-      >
-        <ArrowLeft />
-      </IconButton>
-      <div />
-      <IconButton
-        className={classes.icon}
-        onClick={() => model.hview.scroll(100)}
-      >
-        <ArrowRight />
-      </IconButton>
-
-      <div />
-      <IconButton
-        className={classes.icon}
-        onClick={() => model.vview.scroll(-100)}
-      >
-        <ArrowDropDown />
-      </IconButton>
-      <div />
-      <IconButton
-        className={classes.icon}
-        onClick={() => {
-          model.hview.zoomIn()
-          model.vview.zoomIn()
-        }}
-      >
-        <ZoomIn />
-      </IconButton>
-      <div />
-      <IconButton
-        className={classes.icon}
-        onClick={() => {
-          model.hview.zoomOut()
-          model.vview.zoomOut()
-        }}
-      >
-        <ZoomOut />
-      </IconButton>
-    </Paper>
-  )
-})

package/src/DotplotView/components/WarningDialog.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import { DialogContent, DialogContentText } from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-import { DataGrid } from '@mui/x-data-grid'
-import { AnyConfigurationModel, getConf } from '@jbrowse/core/configuration'
-import { measureGridWidth } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()({
-  content: {
-    minWidth: 600,
-  },
-})
-
-interface TrackWarning {
-  configuration: AnyConfigurationModel
-  displays: { warnings: { message: string; effect: string }[] }[]
-}
-
-export default observer(function WarningDialog({
-  trackWarnings,
-  handleClose,
-}: {
-  handleClose: () => void
-  trackWarnings: TrackWarning[]
-}) {
-  const { classes } = useStyles()
-  const rows = [] as {
-    name: string
-    message: string
-    effect: string
-    id: string
-  }[]
-  for (let i = 0; i < trackWarnings.length; i++) {
-    const track = trackWarnings[i]
-    const name = getConf(track, 'name')
-    for (let j = 0; j < track.displays[0].warnings.length; j++) {
-      const warning = track.displays[0].warnings[j]
-      rows.push({ name, ...warning, id: i + '_' + j })
-    }
-  }
-  const columns = [
-    { field: 'name' },
-    { field: 'message', width: measureGridWidth(rows.map(r => r.message)) },
-    { field: 'effect', width: measureGridWidth(rows.map(r => r.effect)) },
-  ]
-  return (
-    <Dialog
-      open
-      onClose={handleClose}
-      maxWidth="xl"
-      title="Dotplot rendered with warnings"
-    >
-      <DialogContent className={classes.content}>
-        <DialogContentText>
-          Found warnings while rendering the dotplot. This is often due to
-          out-of-bound features that may indicate the wrong assemblies are being
-          used. Check that the query and target are configured correctly, and
-          that the right assemblies are being compared.
-        </DialogContentText>
-        <div style={{ height: 600, width: '100%', overflow: 'auto' }}>
-          <DataGrid
-            rows={rows}
-            columns={columns}
-            disableRowSelectionOnClick
-            rowHeight={25}
-            disableColumnMenu
-          />
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-})

package/src/DotplotView/components/util.ts

@@ -1,118 +0,0 @@
-import { BaseBlock } from '@jbrowse/core/util/blockTypes'
-import { Dotplot1DViewModel } from '../model'
-
-export function locstr(
-  px: number,
-  view: Dotplot1DViewModel,
-  includeAsm = true,
-) {
-  const { assemblyName, refName, start, offset, oob } = view.pxToBp(px)
-  const coord = Math.floor(start + offset)
-  return oob
-    ? 'out of bounds'
-    : `${
-        includeAsm ? '{' + assemblyName + '}' : ''
-      }${refName}:${coord.toLocaleString('en-US')}`
-}
-
-export function getBlockLabelKeysToHide(
-  blocks: BaseBlock[],
-  length: number,
-  viewOffsetPx: number,
-) {
-  const blockLabelKeysToHide = new Set<string>()
-  const sortedBlocks = [...blocks].sort((a, b) => {
-    const alen = a.end - a.start
-    const blen = b.end - b.start
-    return blen - alen
-  })
-  const positions = Array.from({ length: Math.round(length) })
-  for (const { key, offsetPx } of sortedBlocks) {
-    const y = Math.round(length - offsetPx + viewOffsetPx)
-    const labelBounds = [Math.max(y - 12, 0), y]
-    if (y === 0 || positions.slice(...labelBounds).some(Boolean)) {
-      blockLabelKeysToHide.add(key)
-    } else {
-      positions.fill(true, ...labelBounds)
-    }
-  }
-  return blockLabelKeysToHide
-}
-/**
- * Given a scale ( bp/px ) and minimum distances (px) between major and minor
- * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
- * the gridline pitches to use.
- */
-export function chooseGridPitch(
-  scale: number,
-  minMajorPitchPx: number,
-  minMinorPitchPx: number,
-) {
-  scale = Math.abs(scale)
-  const minMajorPitchBp = minMajorPitchPx * scale
-  const majorMagnitude = Number.parseInt(
-    Number(minMajorPitchBp).toExponential().split(/e/i)[1],
-    10,
-  )
-
-  let majorPitch = 10 ** majorMagnitude
-  while (majorPitch < minMajorPitchBp) {
-    majorPitch *= 2
-    if (majorPitch >= minMajorPitchBp) {
-      break
-    }
-    majorPitch *= 2.5
-  }
-
-  majorPitch = Math.max(majorPitch, 5)
-
-  const majorPitchPx = majorPitch / scale
-
-  let minorPitch = 0
-  if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 10
-  } else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 5
-  } else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 2
-  }
-
-  return { majorPitch, minorPitch }
-}
-
-export function makeTicks(
-  regions: BaseBlock[],
-  bpPerPx: number,
-  emitMajor = true,
-  emitMinor = true,
-) {
-  const ticks = []
-  const gridPitch = chooseGridPitch(bpPerPx, 60, 15)
-  const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch
-  for (let i = 0; i < regions.length; i++) {
-    const region = regions[i]
-    const { start, end, refName } = region
-    let index = 0
-
-    const minBase = start
-    const maxBase = end
-
-    for (
-      let base = Math.floor(minBase / iterPitch) * iterPitch;
-      base < Math.ceil(maxBase / iterPitch) * iterPitch + 1;
-      base += iterPitch
-    ) {
-      if (emitMinor && base % gridPitch.majorPitch) {
-        ticks.push({ type: 'minor', base: base - 1, index, refName })
-        index += 1
-      } else if (
-        emitMajor &&
-        Math.abs(base - region.start) > gridPitch.minorPitch
-      ) {
-        ticks.push({ type: 'major', base: base - 1, index, refName })
-        index += 1
-      }
-    }
-  }
-  return ticks
-}

package/src/DotplotView/index.ts

@@ -1,16 +0,0 @@
-import { lazy } from 'react'
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-import PluginManager from '@jbrowse/core/PluginManager'
-// locals
-import stateModelFactory from './model'
-
-export default function (pluginManager: PluginManager) {
-  pluginManager.addViewType(() => {
-    return new ViewType({
-      name: 'DotplotView',
-      displayName: 'Dotplot view',
-      stateModel: stateModelFactory(pluginManager),
-      ReactComponent: lazy(() => import('./components/DotplotView')),
-    })
-  })
-}

package/src/DotplotView/model.test.ts

@@ -1,17 +0,0 @@
-import { createTestSession } from '@jbrowse/web/src/rootModel/test_util'
-import { getEnv } from 'mobx-state-tree'
-jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const { pluginManager } = getEnv(createTestSession() as any)
-
-describe('dotplot state model', () => {
-  test('can instantiate from an empty object', () => {
-    const DotplotModel = pluginManager.jbrequire(require('./model'))
-    expect(() =>
-      DotplotModel.create({
-        type: 'DotplotView',
-      }),
-    ).not.toThrow()
-  })
-})