@jbrowse/plugin-dotplot-view 2.6.1

package/src/DotplotView/components/DotplotView.tsx

@@ -0,0 +1,348 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+import { transaction } from 'mobx'
+import { makeStyles } from 'tss-react/mui'
+import normalizeWheel from 'normalize-wheel'
+
+// locals
+import { DotplotViewModel } from '../model'
+import ImportForm from './ImportForm'
+import Header from './Header'
+import Grid from './Grid'
+import { HorizontalAxis, VerticalAxis } from './Axes'
+import { TooltipWhereClicked, TooltipWhereMouseovered } from './DotplotTooltip'
+
+const blank = { left: 0, top: 0, width: 0, height: 0 }
+
+const useStyles = makeStyles()(theme => ({
+  spacer: {
+    gridColumn: '1/2',
+    gridRow: '2/2',
+  },
+  root: {
+    position: 'relative',
+    marginBottom: theme.spacing(1),
+    overflow: 'hidden',
+  },
+
+  container: {
+    display: 'grid',
+    padding: 5,
+    position: 'relative',
+  },
+  overlay: {
+    pointerEvents: 'none',
+    overflow: 'hidden',
+    display: 'flex',
+    width: '100%',
+    gridRow: '1/2',
+    gridColumn: '2/2',
+    zIndex: 100, // needs to be below controls
+    '& path': {
+      cursor: 'crosshair',
+      fill: 'none',
+    },
+  },
+
+  content: {
+    position: 'relative',
+    gridColumn: '2/2',
+    gridRow: '1/2',
+  },
+
+  resizeHandle: {
+    height: 4,
+    background: '#ccc',
+    boxSizing: 'border-box',
+    borderTop: '1px solid #fafafa',
+  },
+}))
+
+type Coord = [number, number] | undefined
+type Rect = { left: number; top: number }
+
+// produces offsetX/offsetY coordinates from a clientX and an element's
+// getBoundingClientRect
+function getOffset(coord: Coord, rect: Rect) {
+  return coord && ([coord[0] - rect.left, coord[1] - rect.top] as Coord)
+}
+
+const RenderedComponent = observer(({ model }: { model: DotplotViewModel }) => {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.overlay}>
+      {model.tracks.map(track => {
+        const [display] = track.displays
+        const { RenderingComponent } = display
+        return RenderingComponent ? (
+          <RenderingComponent
+            key={track.configuration.trackId}
+            model={display}
+          />
+        ) : null
+      })}
+    </div>
+  )
+})
+
+const DotplotViewInternal = observer(function ({
+  model,
+}: {
+  model: DotplotViewModel
+}) {
+  const { classes } = useStyles()
+  const [mousecurrClient, setMouseCurrClient] = useState<Coord>()
+  const [mousedownClient, setMouseDownClient] = useState<Coord>()
+  const [mouseOvered, setMouseOvered] = useState(false)
+  const [mouseupClient, setMouseUpClient] = useState<Coord>()
+  const ref = useRef<HTMLDivElement>(null)
+  const root = useRef<HTMLDivElement>(null)
+  const distanceX = useRef(0)
+  const distanceY = useRef(0)
+  const scheduled = useRef(false)
+  const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = useState(false)
+  const svg = ref.current?.getBoundingClientRect() || blank
+  const rootRect = ref.current?.getBoundingClientRect() || blank
+  const mousedown = getOffset(mousedownClient, svg)
+  const mousecurr = getOffset(mousecurrClient, svg)
+  const mouseup = getOffset(mouseupClient, svg)
+  const mouserectClient = mouseupClient || mousecurrClient
+  const mouserect = mouseup || mousecurr
+  const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0
+  const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0
+  const { hview, vview, wheelMode, cursorMode } = model
+
+  const validPan =
+    (cursorMode === 'move' && !ctrlKeyWasUsed) ||
+    (cursorMode === 'crosshair' && ctrlKeyWasUsed)
+
+  const validSelect =
+    (cursorMode === 'move' && ctrlKeyWasUsed) ||
+    (cursorMode === 'crosshair' && !ctrlKeyWasUsed)
+
+  // use non-React wheel handler to properly prevent body scrolling
+  useEffect(() => {
+    function onWheel(origEvent: WheelEvent) {
+      const event = normalizeWheel(origEvent)
+      origEvent.preventDefault()
+
+      distanceX.current += event.pixelX
+      distanceY.current -= event.pixelY
+      if (!scheduled.current) {
+        scheduled.current = true
+
+        window.requestAnimationFrame(() => {
+          transaction(() => {
+            if (wheelMode === 'pan') {
+              hview.scroll(distanceX.current / 3)
+              vview.scroll(distanceY.current / 10)
+            } else if (wheelMode === 'zoom') {
+              if (
+                Math.abs(distanceY.current) > Math.abs(distanceX.current) * 2 &&
+                mousecurr
+              ) {
+                const val = distanceY.current < 0 ? 1.1 : 0.9
+                hview.zoomTo(hview.bpPerPx * val, mousecurr[0])
+                vview.zoomTo(
+                  vview.bpPerPx * val,
+                  rootRect.height - mousecurr[1],
+                )
+              }
+            }
+          })
+          scheduled.current = false
+          distanceX.current = 0
+          distanceY.current = 0
+        })
+      }
+    }
+    if (ref.current) {
+      const curr = ref.current
+      curr.addEventListener('wheel', onWheel)
+      return () => curr.removeEventListener('wheel', onWheel)
+    }
+    return () => {}
+  }, [hview, vview, wheelMode, mousecurr, rootRect.height])
+
+  useEffect(() => {
+    function globalMouseMove(event: MouseEvent) {
+      setMouseCurrClient([event.clientX, event.clientY])
+
+      if (mousecurrClient && mousedownClient && validPan && !mouseupClient) {
+        hview.scroll(-event.clientX + mousecurrClient[0])
+        vview.scroll(event.clientY - mousecurrClient[1])
+      }
+    }
+
+    window.addEventListener('mousemove', globalMouseMove)
+    return () => window.removeEventListener('mousemove', globalMouseMove)
+  }, [
+    validPan,
+    mousecurrClient,
+    mousedownClient,
+    cursorMode,
+    ctrlKeyWasUsed,
+    mouseupClient,
+    hview,
+    vview,
+  ])
+
+  // detect a mouseup after a mousedown was submitted, autoremoves mouseup
+  // once that single mouseup is set
+  useEffect(() => {
+    function globalMouseUp(event: MouseEvent) {
+      if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
+        setMouseUpClient([event.clientX, event.clientY])
+      } else {
+        setMouseDownClient(undefined)
+      }
+    }
+
+    if (mousedown && !mouseup) {
+      window.addEventListener('mouseup', globalMouseUp, true)
+      return () => window.removeEventListener('mouseup', globalMouseUp, true)
+    }
+    return () => {}
+  }, [
+    validSelect,
+    mousedown,
+    mousecurr,
+    mouseup,
+    xdistance,
+    ydistance,
+    ctrlKeyWasUsed,
+    cursorMode,
+  ])
+
+  return (
+    <div>
+      <Header
+        model={model}
+        selection={
+          !validSelect || !(mousedown && mouserect)
+            ? undefined
+            : {
+                width: Math.abs(xdistance),
+                height: Math.abs(ydistance),
+              }
+        }
+      />
+      <div
+        ref={root}
+        className={classes.root}
+        onMouseLeave={() => setMouseOvered(false)}
+        onMouseEnter={() => setMouseOvered(true)}
+      >
+        <div className={classes.container}>
+          <VerticalAxis model={model} />
+          <HorizontalAxis model={model} />
+          <div ref={ref} className={classes.content}>
+            {mouseOvered && validSelect ? (
+              <TooltipWhereMouseovered
+                model={model}
+                mouserect={mouserect}
+                mouserectClient={mouserectClient}
+                xdistance={xdistance}
+                ydistance={ydistance}
+              />
+            ) : null}
+            {validSelect ? (
+              <TooltipWhereClicked
+                model={model}
+                mousedown={mousedown}
+                mousedownClient={mousedownClient}
+                xdistance={xdistance}
+                ydistance={ydistance}
+              />
+            ) : null}
+            <div
+              style={{ cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }}
+              onMouseDown={event => {
+                if (event.button === 0) {
+                  const { clientX, clientY } = event
+                  setMouseDownClient([clientX, clientY])
+                  setMouseCurrClient([clientX, clientY])
+                  setCtrlKeyWasUsed(event.ctrlKey)
+                }
+              }}
+            >
+              <Grid model={model}>
+                {validSelect && mousedown && mouserect ? (
+                  <rect
+                    fill="rgba(255,0,0,0.3)"
+                    x={Math.min(mouserect[0], mousedown[0])}
+                    y={Math.min(mouserect[1], mousedown[1])}
+                    width={Math.abs(xdistance)}
+                    height={Math.abs(ydistance)}
+                  />
+                ) : null}
+              </Grid>
+            </div>
+            <div className={classes.spacer} />
+          </div>
+          <RenderedComponent model={model} />
+          <Menu
+            open={Boolean(mouseup)}
+            onMenuItemClick={(_, callback) => {
+              callback()
+              setMouseUpClient(undefined)
+              setMouseDownClient(undefined)
+            }}
+            onClose={() => {
+              setMouseUpClient(undefined)
+              setMouseDownClient(undefined)
+            }}
+            anchorReference="anchorPosition"
+            anchorPosition={
+              mouseupClient
+                ? {
+                    top: mouseupClient[1] + 50,
+                    left: mouseupClient[0] + 50,
+                  }
+                : undefined
+            }
+            style={{ zIndex: 10000 }}
+            menuItems={[
+              {
+                label: 'Zoom in',
+                onClick: () => {
+                  if (mousedown && mouseup) {
+                    model.zoomIn(mousedown, mouseup)
+                  }
+                },
+              },
+              {
+                label: 'Open linear synteny view',
+                onClick: () => {
+                  if (mousedown && mouseup) {
+                    model.onDotplotView(mousedown, mouseup)
+                  }
+                },
+              },
+            ]}
+          />
+        </div>
+        <ResizeHandle
+          onDrag={n => model.setHeight(model.height + n)}
+          className={classes.resizeHandle}
+        />
+      </div>
+    </div>
+  )
+})
+const DotplotView = observer(({ model }: { model: DotplotViewModel }) => {
+  const { initialized, loading, error } = model
+
+  if ((!initialized && !loading) || error) {
+    return <ImportForm model={model} />
+  }
+
+  if (loading) {
+    return <LoadingEllipses variant="h6" />
+  }
+
+  return <DotplotViewInternal model={model} />
+})
+
+export default DotplotView

package/src/DotplotView/components/DotplotWarnings.tsx

@@ -0,0 +1,26 @@
+import React, { lazy, useState } from 'react'
+import { Alert, Button } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { DotplotViewModel } from '../model'
+
+// lazy components
+const WarningDialog = lazy(() => import('./WarningDialog'))
+
+export default observer(function ({ model }: { model: DotplotViewModel }) {
+  const trackWarnings = model.tracks.filter(t => t.displays[0].warnings?.length)
+  const [shown, setShown] = useState(false)
+  return trackWarnings.length ? (
+    <Alert severity="warning">
+      Warnings during render{' '}
+      <Button onClick={() => setShown(true)}>More info</Button>
+      {shown ? (
+        <WarningDialog
+          trackWarnings={trackWarnings}
+          handleClose={() => setShown(false)}
+        />
+      ) : null}
+    </Alert>
+  ) : null
+})

package/src/DotplotView/components/ExportSvgDialog.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Checkbox,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  FormControlLabel,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
+import { ExportSvgOptions } from '../model'
+import { getSession, useLocalStorage } from '@jbrowse/core/util'
+
+function LoadingMessage() {
+  return (
+    <div>
+      <CircularProgress size={20} style={{ marginRight: 20 }} />
+      <Typography display="inline">Creating SVG</Typography>
+    </div>
+  )
+}
+
+function useSvgLocal<T>(key: string, val: T) {
+  return useLocalStorage('svg-' + key, val)
+}
+
+export default function ExportSvgDlg({
+  model,
+  handleClose,
+}: {
+  model: { exportSvg(opts: ExportSvgOptions): Promise<void> }
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
+  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<unknown>()
+  const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg')
+  const [themeName, setThemeName] = useSvgLocal(
+    'theme',
+    session.themeName || 'default',
+  )
+  return (
+    <Dialog open onClose={handleClose} title="Export SVG">
+      <DialogContent>
+        {error ? (
+          <ErrorMessage error={error} />
+        ) : loading ? (
+          <LoadingMessage />
+        ) : null}
+        <TextField
+          helperText="filename"
+          value={filename}
+          onChange={event => setFilename(event.target.value)}
+        />
+        <br />
+        {session.allThemes ? (
+          <TextField
+            select
+            label="Theme"
+            value={themeName}
+            onChange={event => setThemeName(event.target.value)}
+          >
+            {Object.entries(session.allThemes()).map(([key, val]) => (
+              <MenuItem key={key} value={key}>
+                {
+                  // @ts-expect-error
+                  val.name || '(Unknown name)'
+                }
+              </MenuItem>
+            ))}
+          </TextField>
+        ) : null}
+        {offscreenCanvas ? (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={rasterizeLayers}
+                onChange={() => setRasterizeLayers(val => !val)}
+              />
+            }
+            label="Rasterize canvas based tracks? File may be much larger if this is turned off"
+          />
+        ) : (
+          <Typography>
+            Note: rasterizing layers not yet supported in this browser, so SVG
+            size may be large
+          </Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => handleClose()}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          onClick={async () => {
+            setLoading(true)
+            setError(undefined)
+            try {
+              await model.exportSvg({
+                rasterizeLayers,
+                filename,
+                themeName,
+              })
+              handleClose()
+            } catch (e) {
+              console.error(e)
+              setError(e)
+              setLoading(false)
+            }
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/DotplotView/components/Grid.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { useTheme } from '@mui/material'
+
+// locals
+import { DotplotViewModel } from '../model'
+
+export const GridRaw = observer(function ({
+  model,
+  children,
+}: {
+  model: DotplotViewModel
+  children?: React.ReactNode
+}) {
+  const { viewWidth, viewHeight, hview, vview } = model
+  const hblocks = hview.dynamicBlocks.contentBlocks
+  const vblocks = vview.dynamicBlocks.contentBlocks
+  if (!hblocks.length || !vblocks.length) {
+    return null
+  }
+  const htop = hview.displayedRegionsTotalPx - hview.offsetPx
+  const vtop = vview.displayedRegionsTotalPx - vview.offsetPx
+  const hbottom = hblocks[0].offsetPx - hview.offsetPx
+  const vbottom = vblocks[0].offsetPx - vview.offsetPx
+  const theme = useTheme()
+  const stroke = theme.palette.divider
+
+  // Uses math.max/min avoid making very large SVG rect offscreen element,
+  // which can sometimes fail to draw
+  const rx = Math.max(hbottom, 0)
+  const ry = Math.max(viewHeight - vtop, 0)
+  const w = Math.min(htop - hbottom, viewWidth)
+  const h = Math.min(viewHeight - vbottom - ry, viewHeight)
+
+  let lastx = Infinity
+  let lasty = Infinity
+  return (
+    <>
+      <rect
+        x={rx}
+        y={ry}
+        width={w}
+        height={h}
+        fill={theme.palette.background.default}
+      />
+      <g>
+        {hblocks.map(region => {
+          const x = region.offsetPx - hview.offsetPx
+          const render = Math.floor(x) !== Math.floor(lastx)
+          if (render) {
+            lastx = x
+          }
+          return render ? (
+            <line
+              key={JSON.stringify(region)}
+              x1={x}
+              y1={0}
+              x2={x}
+              y2={viewHeight}
+              stroke={stroke}
+            />
+          ) : null
+        })}
+        {vblocks.map(region => {
+          const y = viewHeight - (region.offsetPx - vview.offsetPx)
+          const render = Math.floor(y) !== Math.floor(lasty)
+          if (render) {
+            lasty = y
+          }
+          return render ? (
+            <line
+              key={JSON.stringify(region)}
+              x1={0}
+              y1={y}
+              x2={viewWidth}
+              y2={y}
+              stroke={stroke}
+            />
+          ) : null
+        })}
+        <line x1={htop} y1={0} x2={htop} y2={viewHeight} stroke={stroke} />
+        <line
+          x1={0}
+          y1={viewHeight - vtop}
+          x2={viewWidth}
+          y2={viewHeight - vtop}
+          stroke={stroke}
+        />
+      </g>
+      {children}
+    </>
+  )
+})
+
+export default function Grid({
+  model,
+  children,
+}: {
+  model: DotplotViewModel
+  children?: React.ReactNode
+}) {
+  const { viewWidth, viewHeight } = model
+  return (
+    <svg
+      width={viewWidth}
+      height={viewHeight}
+      style={{ background: 'rgba(0,0,0,0.12)' }}
+    >
+      <GridRaw model={model}>{children}</GridRaw>
+    </svg>
+  )
+}