@jbrowse/plugin-dotplot-view 2.6.1

package/src/DotplotView/components/ImportSyntenyTrackSelector.tsx

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

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

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

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

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

@@ -0,0 +1,17 @@
+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()
+  })
+})